Spaces:

Setsunapux
/

animaflow

Running

App Files Files Community

Setsunapux commited on Jul 12, 2025

Commit

291e0ca

verified ·

1 Parent(s): ed48040

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +648 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Animaflow
-emoji: 📚
-colorFrom: blue
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: animaflow
+emoji: 🐳
+colorFrom: yellow
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,648 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Smooth Animations Showcase</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#6366f1',
+                        secondary: '#8b5cf6',
+                        dark: '#1e293b',
+                    },
+                    animation: {
+                        'spin-slow': 'spin 3s linear infinite',
+                        'bounce-slow': 'bounce 2s infinite',
+                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                        'float': 'float 6s ease-in-out infinite',
+                        'wave': 'wave 1.5s ease-in-out infinite',
+                    },
+                    keyframes: {
+                        float: {
+                            '0%, 100%': { transform: 'translateY(0)' },
+                            '50%': { transform: 'translateY(-20px)' },
+                        },
+                        wave: {
+                            '0%, 100%': { transform: 'rotate(0deg)' },
+                            '25%': { transform: 'rotate(5deg)' },
+                            '75%': { transform: 'rotate(-5deg)' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+            color: #e2e8f0;
+            overflow-x: hidden;
+        }
+        .hero-pattern {
+            background: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 20%),
+                        radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 20%);
+        }
+        .card {
+            background: rgba(30, 41, 59, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(99, 102, 241, 0.2);
+            border-radius: 16px;
+            transition: all 0.3s ease;
+        }
+        .card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.2), 0 10px 10px -5px rgba(99, 102, 241, 0.1);
+            border-color: rgba(99, 102, 241, 0.4);
+        }
+        .parallax {
+            background-attachment: fixed;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .ripple {
+            position: relative;
+            overflow: hidden;
+        }
+        .ripple-effect {
+            position: absolute;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.3);
+            transform: scale(0);
+            animation: ripple-animation 0.6s linear;
+        }
+        @keyframes ripple-animation {
+            to {
+                transform: scale(4);
+                opacity: 0;
+            }
+        }
+        .typing {
+            overflow: hidden;
+            border-right: 0.15em solid #6366f1;
+            white-space: nowrap;
+            animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
+        }
+        @keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
+        }
+        @keyframes blink-caret {
+            from, to { border-color: transparent }
+            50% { border-color: #6366f1 }
+        }
+        .path {
+            stroke-dasharray: 1000;
+            stroke-dashoffset: 1000;
+            animation: dash 5s linear forwards infinite;
+        }
+        @keyframes dash {
+            to {
+                stroke-dashoffset: 0;
+            }
+        }
+        .bounce-ball {
+            animation: bounce 2s infinite;
+        }
+        @keyframes bounce {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-50px);
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Header -->
+    <header class="fixed w-full z-50">
+        <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
+            <div class="text-2xl font-bold">
+                <span class="gradient-text">Anim</span>Magic
+            </div>
+            <div class="hidden md:flex space-x-8">
+                <a href="#home" class="hover:text-primary transition-colors">Home</a>
+                <a href="#scroll" class="hover:text-primary transition-colors">Scroll</a>
+                <a href="#css" class="hover:text-primary transition-colors">CSS</a>
+                <a href="#svg" class="hover:text-primary transition-colors">SVG</a>
+                <a href="#micro" class="hover:text-primary transition-colors">Micro</a>
+            </div>
+            <button class="md:hidden text-xl">
+                <i class="fas fa-bars"></i>
+            </button>
+        </nav>
+    </header>
+    <!-- Hero Section -->
+    <section id="home" class="min-h-screen flex items-center hero-pattern">
+        <div class="container mx-auto px-6 py-20 text-center">
+            <h1 class="text-5xl md:text-7xl font-bold mb-6">
+                <span class="gradient-text">Smooth Animations</span><br>for Modern Web
+            </h1>
+            <p class="text-xl max-w-3xl mx-auto mb-10 text-slate-300">
+                Enhance user experience with beautiful animations that bring your website to life
+            </p>
+            <div class="flex justify-center space-x-4">
+                <button class="px-8 py-3 bg-primary rounded-full font-semibold ripple hover:bg-indigo-500 transition-colors">
+                    Explore Animations
+                </button>
+                <button class="px-8 py-3 bg-transparent border-2 border-primary rounded-full font-semibold hover:bg-primary/20 transition-colors">
+                    View Examples
+                </button>
+            </div>
+            <div class="mt-20 flex justify-center">
+                <div class="relative w-64 h-64">
+                    <div class="absolute inset-0 bg-primary/20 rounded-full animate-ping-slow"></div>
+                    <div class="absolute inset-4 bg-secondary/20 rounded-full animate-ping-slow delay-1000"></div>
+                    <div class="absolute inset-8 bg-primary/20 rounded-full animate-ping-slow delay-2000"></div>
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <div class="w-32 h-32 bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center animate-float">
+                            <i class="fas fa-play text-white text-3xl"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Scroll Animations -->
+    <section id="scroll" class="py-20">
+        <div class="container mx-auto px-6">
+            <h2 class="text-4xl font-bold text-center mb-4">Scroll Animations</h2>
+            <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16">
+                Elements that animate as you scroll down the page
+            </p>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Card 1 -->
+                <div class="card p-8 transform transition-all duration-500 opacity-0 translate-y-10" data-scroll>
+                    <div class="text-5xl text-primary mb-6">
+                        <i class="fas fa-fade"></i>
+                    </div>
+                    <h3 class="text-2xl font-semibold mb-4">Fade In</h3>
+                    <p class="text-slate-300 mb-4">
+                        Elements gracefully appear as you scroll down the page
+                    </p>
+                    <div class="mt-4 h-2 bg-gradient-to-r from-primary to-secondary rounded-full"></div>
+                </div>
+                <!-- Card 2 -->
+                <div class="card p-8 transform transition-all duration-500 opacity-0 translate-y-10" data-scroll>
+                    <div class="text-5xl text-primary mb-6">
+                        <i class="fas fa-slide"></i>
+                    </div>
+                    <h3 class="text-2xl font-semibold mb-4">Slide In</h3>
+                    <p class="text-slate-300 mb-4">
+                        Content slides in from different directions
+                    </p>
+                    <div class="mt-4 flex space-x-2">
+                        <div class="h-2 w-8 bg-primary rounded-full animate-bounce-slow"></div>
+                        <div class="h-2 w-8 bg-secondary rounded-full animate-bounce-slow delay-150"></div>
+                        <div class="h-2 w-8 bg-primary rounded-full animate-bounce-slow delay-300"></div>
+                    </div>
+                </div>
+                <!-- Card 3 -->
+                <div class="card p-8 transform transition-all duration-500 opacity-0 translate-y-10" data-scroll>
+                    <div class="text-5xl text-primary mb-6">
+                        <i class="fas fa-expand"></i>
+                    </div>
+                    <h3 class="text-2xl font-semibold mb-4">Scale Up</h3>
+                    <p class="text-slate-300 mb-4">
+                        Elements grow to their natural size
+                    </p>
+                    <div class="mt-4 flex justify-center">
+                        <div class="w-12 h-12 bg-gradient-to-br from-primary to-secondary rounded-full animate-pulse-slow"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Parallax Section -->
+    <section class="py-32 parallax" style="background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80');">
+        <div class="container mx-auto px-6 text-center">
+            <h2 class="text-4xl font-bold mb-6">Parallax Scrolling</h2>
+            <p class="text-xl max-w-2xl mx-auto mb-10 text-slate-200">
+                Background moves at a different speed than foreground content, creating depth illusion
+            </p>
+            <div class="inline-block px-8 py-4 bg-primary/80 backdrop-blur-sm rounded-full font-semibold">
+                Experience the Depth
+            </div>
+        </div>
+    </section>
+    <!-- CSS Animations -->
+    <section id="css" class="py-20">
+        <div class="container mx-auto px-6">
+            <h2 class="text-4xl font-bold text-center mb-4">CSS Animations</h2>
+            <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16">
+                Smooth transitions and animations using pure CSS
+            </p>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
+                <div class="flex flex-col justify-center">
+                    <h3 class="text-3xl font-semibold mb-6">Hover Effects</h3>
+                    <p class="text-slate-300 mb-6">
+                        Enhance interactivity with subtle hover animations that provide visual feedback to users.
+                    </p>
+                    <div class="flex space-x-6">
+                        <div class="group">
+                            <div class="w-20 h-20 bg-primary rounded-xl flex items-center justify-center group-hover:rotate-12 transition-transform duration-300">
+                                <i class="fas fa-star text-2xl text-white"></i>
+                            </div>
+                        </div>
+                        <div class="group">
+                            <div class="w-20 h-20 bg-secondary rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                                <i class="fas fa-heart text-2xl text-white"></i>
+                            </div>
+                        </div>
+                        <div class="group">
+                            <div class="w-20 h-20 bg-gradient-to-br from-primary to-secondary rounded-xl flex items-center justify-center group-hover:skew-y-3 transition-transform duration-300">
+                                <i class="fas fa-bolt text-2xl text-white"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="card p-8 h-full">
+                        <h3 class="text-2xl font-semibold mb-6">Animated Cards</h3>
+                        <div class="space-y-4">
+                            <div class="flex items-center p-4 bg-slate-800 rounded-lg hover:bg-slate-700 transition-colors">
+                                <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center mr-4">
+                                    <i class="fas fa-cube"></i>
+                                </div>
+                                <div>
+                                    <h4 class="font-semibold">3D Transform</h4>
+                                    <p class="text-sm text-slate-300">Rotate elements in 3D space</p>
+                                </div>
+                            </div>
+                            <div class="flex items-center p-4 bg-slate-800 rounded-lg hover:bg-slate-700 transition-colors">
+                                <div class="w-12 h-12 bg-secondary rounded-full flex items-center justify-center mr-4">
+                                    <i class="fas fa-move"></i>
+                                </div>
+                                <div>
+                                    <h4 class="font-semibold">Smooth Transitions</h4>
+                                    <p class="text-sm text-slate-300">Animate property changes</p>
+                                </div>
+                            </div>
+                            <div class="flex items-center p-4 bg-slate-800 rounded-lg hover:bg-slate-700 transition-colors">
+                                <div class="w-12 h-12 bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center mr-4">
+                                    <i class="fas fa-infinity"></i>
+                                </div>
+                                <div>
+                                    <h4 class="font-semibold">Keyframe Animations</h4>
+                                    <p class="text-sm text-slate-300">Create complex animation sequences</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- SVG Animation -->
+    <section id="svg" class="py-20 bg-slate-900/50">
+        <div class="container mx-auto px-6">
+            <h2 class="text-4xl font-bold text-center mb-4">SVG Animations</h2>
+            <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16">
+                Scalable vector graphics with smooth animations
+            </p>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+                <div>
+                    <svg viewBox="0 0 200 200" class="w-full max-w-md mx-auto">
+                        <circle cx="100" cy="100" r="80" fill="none" stroke="#6366f1" stroke-width="4" stroke-dasharray="1000" stroke-dashoffset="1000">
+                            <animate attributeName="stroke-dashoffset" from="1000" to="0" dur="2s" fill="freeze" repeatCount="indefinite" />
+                        </circle>
+                        <path d="M50,100 Q100,20 150,100 T250,100" fill="none" stroke="#8b5cf6" stroke-width="3" stroke-dasharray="1000" stroke-dashoffset="1000" class="path">
+                            <animate attributeName="stroke-dashoffset" from="1000" to="0" dur="3s" fill="freeze" repeatCount="indefinite" />
+                        </path>
+                        <circle cx="100" cy="100" r="30" fill="#6366f1" opacity="0.7">
+                            <animate attributeName="r" from="30" to="50" dur="2s" repeatCount="indefinite" />
+                            <animate attributeName="opacity" from="0.7" to="0.3" dur="2s" repeatCount="indefinite" />
+                        </circle>
+                    </svg>
+                </div>
+                <div>
+                    <h3 class="text-3xl font-semibold mb-6">Dynamic SVG Elements</h3>
+                    <p class="text-slate-300 mb-6">
+                        SVG animations provide resolution-independent graphics that look crisp on any device. They're perfect for logos, icons, and illustrations.
+                    </p>
+                    <ul class="space-y-3">
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-primary mr-3"></i>
+                            <span>Path drawing animations</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-primary mr-3"></i>
+                            <span>Morphing between shapes</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-primary mr-3"></i>
+                            <span>Transform animations</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-primary mr-3"></i>
+                            <span>Stroke and fill animations</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Micro-interactions -->
+    <section id="micro" class="py-20">
+        <div class="container mx-auto px-6">
+            <h2 class="text-4xl font-bold text-center mb-4">Micro-interactions</h2>
+            <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16">
+                Small animations that respond to user actions
+            </p>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
+                <div class="card p-8">
+                    <h3 class="text-2xl font-semibold mb-6">Like Button</h3>
+                    <div class="flex justify-center">
+                        <button id="likeButton" class="w-16 h-16 rounded-full bg-slate-800 flex items-center justify-center group">
+                            <i class="fas fa-heart text-3xl text-slate-400 group-hover:text-red-500 transition-colors"></i>
+                        </button>
+                    </div>
+                    <p class="text-center mt-6 text-slate-300">Click the heart to see the animation</p>
+                </div>
+                <div class="card p-8">
+                    <h3 class="text-2xl font-semibold mb-6">Ripple Effect</h3>
+                    <div class="flex justify-center">
+                        <button id="rippleButton" class="px-8 py-4 bg-primary rounded-full font-semibold ripple">
+                            Click Me
+                        </button>
+                    </div>
+                    <p class="text-center mt-6 text-slate-300">Creates a water ripple effect on click</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Loading Animation -->
+    <section class="py-20 bg-slate-900/50">
+        <div class="container mx-auto px-6 text-center">
+            <h2 class="text-4xl font-bold mb-6">Loading Animations</h2>
+            <p class="text-xl max-w-2xl mx-auto mb-16 text-slate-300">
+                Engaging animations displayed during loading processes
+            </p>
+            <div class="flex flex-wrap justify-center gap-8">
+                <div class="w-32 h-32 rounded-full border-4 border-t-primary border-r-secondary border-b-secondary border-l-primary animate-spin-slow"></div>
+                <div class="flex items-center justify-center space-x-3">
+                    <div class="w-6 h-6 bg-primary rounded-full animate-bounce-slow"></div>
+                    <div class="w-6 h-6 bg-secondary rounded-full animate-bounce-slow delay-150"></div>
+                    <div class="w-6 h-6 bg-primary rounded-full animate-bounce-slow delay-300"></div>
+                </div>
+                <div class="relative w-32 h-32">
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <div class="w-16 h-16 bg-gradient-to-br from-primary to-secondary rounded-full animate-pulse-slow"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Canvas Animation -->
+    <section class="py-20">
+        <div class="container mx-auto px-6">
+            <h2 class="text-4xl font-bold text-center mb-4">Canvas Animations</h2>
+            <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16">
+                Dynamic animations using HTML5 Canvas
+            </p>
+            <div class="card p-6">
+                <canvas id="animationCanvas" class="w-full h-96 rounded-xl"></canvas>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="py-12 border-t border-slate-800">
+        <div class="container mx-auto px-6 text-center">
+            <div class="text-3xl font-bold mb-6">
+                <span class="gradient-text">Anim</span>Magic
+            </div>
+            <p class="text-slate-400 max-w-2xl mx-auto mb-8">
+                Creating beautiful web experiences with smooth animations and interactions
+            </p>
+            <div class="flex justify-center space-x-6 mb-8">
+                <a href="#" class="text-slate-400 hover:text-primary transition-colors">
+                    <i class="fab fa-twitter text-xl"></i>
+                </a>
+                <a href="#" class="text-slate-400 hover:text-primary transition-colors">
+                    <i class="fab fa-github text-xl"></i>
+                </a>
+                <a href="#" class="text-slate-400 hover:text-primary transition-colors">
+                    <i class="fab fa-linkedin text-xl"></i>
+                </a>
+                <a href="#" class="text-slate-400 hover:text-primary transition-colors">
+                    <i class="fab fa-codepen text-xl"></i>
+                </a>
+            </div>
+            <p class="text-slate-500 text-sm">
+                &copy; 2023 AnimMagic. All rights reserved.
+            </p>
+        </div>
+    </footer>
+    <script>
+        // Scroll animations
+        document.addEventListener('DOMContentLoaded', function() {
+            // Scroll animation for cards
+            const scrollElements = document.querySelectorAll('[data-scroll]');
+            const elementInView = (el) => {
+                const elementTop = el.getBoundingClientRect().top;
+                return (
+                    elementTop <= (window.innerHeight || document.documentElement.clientHeight) * 0.75
+                );
+            };
+            const displayScrollElement = (element) => {
+                element.classList.add('opacity-100', 'translate-y-0');
+            };
+            const handleScrollAnimation = () => {
+                scrollElements.forEach((el) => {
+                    if (elementInView(el)) {
+                        displayScrollElement(el);
+                    }
+                });
+            };
+            window.addEventListener('scroll', () => {
+                handleScrollAnimation();
+            });
+            // Initialize by checking elements on load
+            handleScrollAnimation();
+            // Like button animation
+            const likeButton = document.getElementById('likeButton');
+            likeButton.addEventListener('click', function() {
+                this.classList.toggle('text-red-500');
+                // Create animation element
+                const heart = document.createElement('div');
+                heart.innerHTML = '<i class="fas fa-heart text-red-500"></i>';
+                heart.classList.add('absolute', 'text-2xl', 'animate-like');
+                // Position it
+                const rect = this.getBoundingClientRect();
+                heart.style.left = `${rect.left + rect.width/2}px`;
+                heart.style.top = `${rect.top + rect.height/2}px`;
+                document.body.appendChild(heart);
+                // Remove after animation
+                setTimeout(() => {
+                    heart.remove();
+                }, 1000);
+            });
+            // Ripple effect
+            const rippleButton = document.getElementById('rippleButton');
+            rippleButton.addEventListener('click', function(e) {
+                // Remove any existing ripples
+                const existingRipples = document.querySelectorAll('.ripple-effect');
+                existingRipples.forEach(ripple => ripple.remove());
+                // Create ripple
+                const ripple = document.createElement('span');
+                ripple.classList.add('ripple-effect');
+                // Position ripple
+                const rect = this.getBoundingClientRect();
+                const size = Math.max(rect.width, rect.height);
+                ripple.style.width = ripple.style.height = `${size}px`;
+                ripple.style.left = `${e.clientX - rect.left - size/2}px`;
+                ripple.style.top = `${e.clientY - rect.top - size/2}px`;
+                this.appendChild(ripple);
+                // Remove ripple after animation
+                setTimeout(() => {
+                    ripple.remove();
+                }, 600);
+            });
+            // Canvas animation
+            const canvas = document.getElementById('animationCanvas');
+            const ctx = canvas.getContext('2d');
+            // Set canvas size
+            canvas.width = canvas.offsetWidth;
+            canvas.height = canvas.offsetHeight;
+            // Ball properties
+            const balls = [];
+            const ballCount = 30;
+            class Ball {
+                constructor() {
+                    this.radius = Math.random() * 20 + 10;
+                    this.x = Math.random() * (canvas.width - this.radius * 2) + this.radius;
+                    this.y = Math.random() * (canvas.height - this.radius * 2) + this.radius;
+                    this.dx = (Math.random() - 0.5) * 4;
+                    this.dy = (Math.random() - 0.5) * 4;
+                    this.color = `hsl(${Math.random() * 360}, 70%, 60%)`;
+                }
+                draw() {
+                    ctx.beginPath();
+                    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+                    ctx.fillStyle = this.color;
+                    ctx.fill();
+                    ctx.closePath();
+                }
+                update() {
+                    if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
+                        this.dx = -this.dx;
+                    }
+                    if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
+                        this.dy = -this.dy;
+                    }
+                    this.x += this.dx;
+                    this.y += this.dy;
+                    this.draw();
+                }
+            }
+            // Create balls
+            for (let i = 0; i < ballCount; i++) {
+                balls.push(new Ball());
+            }
+            // Animation loop
+            function animate() {
+                requestAnimationFrame(animate);
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                balls.forEach(ball => {
+                    ball.update();
+                });
+            }
+            animate();
+            // Resize canvas on window resize
+            window.addEventListener('resize', () => {
+                canvas.width = canvas.offsetWidth;
+                canvas.height = canvas.offsetHeight;
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Setsunapux/animaflow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>