Create animated numbers (1–10) in the style of Netflix’s "Top 10" design.

🎨 Visual Style:
Bold, oversized, cinematic numbers
3D bevel or extruded look
Black or deep gradient background
Dramatic red lighting or glowing edge accents (like Netflix’s brand style)
Metallic or glassy surfaces with depth and shadows
🎥 Animation Variations (generate a few options):
Slow Zoom In with light shimmer
Pop-in Bounce (dynamic entry with scale bounce)
Smoke or Particle Reveal (number emerges through cinematic particles)
Glitch Flicker for a digital/glassy feel
Energy Pulse where the number briefly surges with light
📐 Framing & Layout:
Centered, full-screen number focus
No extra UI, no labels — just the animated number
🧱 Output Needed:
Separate animation clips for each number (1–10)
Transparent or dark background
Looping and non-looping options

README.md

@@ -1,10 +1,13 @@
 ---
-title: Cinematic Countdown Canvas
-emoji: 🚀
-colorFrom: gray
-colorTo: blue
+title: Cinematic Countdown Canvas 🎬
+colorFrom: green
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/number-animations.js

@@ -0,0 +1,140 @@
+class CinematicNumber extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    static get observedAttributes() {
+        return ['number', 'animation', 'loop'];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            this.render();
+        }
+    }
+
+    render() {
+        const number = this.getAttribute('number') || '1';
+        const animation = this.getAttribute('animation') || 'zoom';
+        const loop = this.getAttribute('loop') === 'true';
+
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    font-family: 'Bebas Neue', sans-serif;
+                }
+
+                .number-container {
+                    position: relative;
+                    display: inline-block;
+                }
+
+                .cinematic-number {
+                    font-size: 20rem;
+                    font-weight: 900;
+                    letter-spacing: -0.05em;
+                    background: linear-gradient(145deg, #8b0000, #ff0000, #8b0000);
+                    background-size: 200% 200%;
+                    -webkit-background-clip: text;
+                    background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                    text-shadow: 
+                        0 0 30px rgba(255, 0, 0, 0.8),
+                        0 0 60px rgba(255, 0, 0, 0.6),
+                        0 0 90px rgba(255, 0, 0, 0.4),
+                        2px 2px 4px rgba(0, 0, 0, 0.8),
+                        -2px -2px 4px rgba(255, 255, 255, 0.1);
+                    animation: shimmer 3s ease-in-out infinite;
+                }
+
+                @keyframes shimmer {
+                    0%, 100% {
+                        background-position: 0% 50%;
+                        filter: brightness(1);
+                    }
+                    50% {
+                        background-position: 100% 50%;
+                        filter: brightness(1.2);
+                    }
+                }
+
+                .particles {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    pointer-events: none;
+                }
+
+                .particle {
+                    position: absolute;
+                    width: 4px;
+                    height: 4px;
+                    background: #ff0000;
+                    border-radius: 50%;
+                    animation: particleFloat 2s ease-out forwards;
+                }
+
+                @keyframes particleFloat {
+                    0% {
+                        transform: translate(0, 0) scale(1);
+                        opacity: 1;
+                    }
+                    100% {
+                        transform: translate(var(--tx), var(--ty)) scale(0);
+                        opacity: 0;
+                    }
+                }
+            </style>
+            <div class="number-container">
+                <div class="cinematic-number">${number}</div>
+                <div class="particles"></div>
+            </div>
+        `;
+
+        this.applyAnimation(animation);
+    }
+
+    applyAnimation(animationType) {
+        const numberElement = this.shadowRoot.querySelector('.cinematic-number');
+        const particlesContainer = this.shadowRoot.querySelector('.particles');
+        
+        // Remove existing particles
+        particlesContainer.innerHTML = '';
+
+        switch(animationType) {
+            case 'smoke':
+                this.createParticles(particlesContainer);
+                break;
+        }
+    }
+
+    createParticles(container) {
+        for (let i = 0; i < 20; i++) {
+            const particle = document.createElement('div');
+            particle.classList.add('particle');
+            
+            const angle = Math.random() * Math.PI * 2;
+            const distance = 80 + Math.random() * 120;
+            const tx = Math.cos(angle) * distance;
+            const ty = Math.sin(angle) * distance;
+            
+            particle.style.setProperty('--tx', `${tx}px`);
+            particle.style.setProperty('--ty', `${ty}px`);
+            particle.style.left = '50%';
+            particle.style.top = '50%';
+            particle.style.animationDelay = `${Math.random() * 0.3}s`;
+            
+            container.appendChild(particle);
+        }
+    }
+}
+
+customElements.define('cinematic-number', CinematicNumber);

index.html

@@ -1,19 +1,64 @@
-<!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>Cinematic Countdown Canvas</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-black min-h-screen overflow-hidden">
+    <div id="app" class="relative w-full h-screen flex items-center justify-center">
+        <!-- Animation Controls -->
+        <div class="absolute top-4 left-4 z-10 bg-black/70 backdrop-blur-sm rounded-lg p-4 text-white">
+            <h3 class="font-bold mb-2">Animation Controls</h3>
+            <div class="space-y-2">
+                <select id="animationType" class="w-full bg-gray-800 text-white rounded px-2 py-1">
+                    <option value="zoom">Zoom In with Shimmer</option>
+                    <option value="bounce">Pop-in Bounce</option>
+                    <option value="smoke">Smoke Reveal</option>
+                    <option value="glitch">Glitch Flicker</option>
+                    <option value="pulse">Energy Pulse</option>
+                </select>
+                <div class="flex gap-2">
+                    <button id="prevNumber" class="flex-1 bg-red-600 hover:bg-red-700 text-white rounded px-2 py-1 transition-colors">
+                        <i data-feather="chevron-left" class="w-4 h-4"></i>
+                    </button>
+                    <button id="nextNumber" class="flex-1 bg-red-600 hover:bg-red-700 text-white rounded px-2 py-1 transition-colors">
+                        <i data-feather="chevron-right" class="w-4 h-4"></i>
+                    </button>
+                </div>
+                <label class="flex items-center gap-2">
+                    <input type="checkbox" id="loopAnimation" checked>
+                    <span class="text-sm">Loop Animation</span>
+                </label>
+                <button id="playPause" class="w-full bg-red-600 hover:bg-red-700 text-white rounded px-2 py-1 transition-colors">
+                    Play/Pause
+                </button>
+            </div>
+        </div>
+
+        <!-- Number Display -->
+        <div id="numberContainer" class="relative">
+            <div id="numberDisplay" class="cinematic-number text-9xl md:text-[20rem] font-black tracking-tighter">
+                1
+            </div>
+            <div id="particles" class="absolute inset-0 pointer-events-none"></div>
+        </div>
+
+        <!-- Current Number Indicator -->
+        <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black/70 backdrop-blur-sm rounded-full px-4 py-2 text-white text-sm">
+            Number <span id="currentNumber">1</span>/10
+        </div>
+    </div>
+
+    <script src="components/number-animations.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,161 @@
+class CinematicNumbersApp {
+    constructor() {
+        this.currentNumber = 1;
+        this.currentAnimation = 'zoom';
+        this.isLooping = true;
+        this.isPlaying = true;
+        this.animationTimeout = null;
+        
+        this.initializeElements();
+        this.setupEventListeners();
+        this.startAnimation();
+    }
+
+    initializeElements() {
+        this.numberDisplay = document.getElementById('numberDisplay');
+        this.currentNumberSpan = document.getElementById('currentNumber');
+        this.animationTypeSelect = document.getElementById('animationType');
+        this.loopCheckbox = document.getElementById('loopAnimation');
+        this.playPauseButton = document.getElementById('playPause');
+        this.prevButton = document.getElementById('prevNumber');
+        this.nextButton = document.getElementById('nextNumber');
+        this.particlesContainer = document.getElementById('particles');
+    }
+
+    setupEventListeners() {
+        this.animationTypeSelect.addEventListener('change', (e) => {
+            this.currentAnimation = e.target.value;
+            this.applyAnimation();
+        });
+
+        this.loopCheckbox.addEventListener('change', (e) => {
+            this.isLooping = e.target.checked;
+            if (this.isLooping && this.isPlaying) {
+                this.startAnimation();
+            }
+        });
+
+        this.playPauseButton.addEventListener('click', () => {
+            this.isPlaying = !this.isPlaying;
+            if (this.isPlaying) {
+                this.startAnimation();
+            } else {
+                this.stopAnimation();
+            }
+        });
+
+        this.prevButton.addEventListener('click', () => {
+            this.changeNumber(-1);
+        });
+
+        this.nextButton.addEventListener('click', () => {
+            this.changeNumber(1);
+        });
+
+        // Keyboard navigation
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowLeft') this.changeNumber(-1);
+            if (e.key === 'ArrowRight') this.changeNumber(1);
+            if (e.key === ' ') {
+                this.isPlaying = !this.isPlaying;
+                if (this.isPlaying) this.startAnimation();
+                else this.stopAnimation();
+            }
+        });
+    }
+
+    changeNumber(direction) {
+        this.currentNumber += direction;
+        
+        if (this.currentNumber < 1) this.currentNumber = 10;
+        if (this.currentNumber > 10) this.currentNumber = 1;
+        
+        this.updateDisplay();
+        this.applyAnimation();
+    }
+
+    updateDisplay() {
+        this.numberDisplay.textContent = this.currentNumber;
+        this.numberDisplay.setAttribute('data-number', this.currentNumber);
+        this.currentNumberSpan.textContent = this.currentNumber;
+    }
+
+    applyAnimation() {
+        // Remove all animation classes
+        this.numberDisplay.className = 'cinematic-number text-9xl md:text-[20rem] font-black tracking-tighter';
+        
+        // Add current animation class
+        switch(this.currentAnimation) {
+            case 'zoom':
+                this.numberDisplay.classList.add('zoom-animation');
+                break;
+            case 'bounce':
+                this.numberDisplay.classList.add('bounce-animation');
+                break;
+            case 'smoke':
+                this.numberDisplay.classList.add('smoke-animation');
+                this.createParticles();
+                break;
+            case 'glitch':
+                this.numberDisplay.classList.add('glitch-animation');
+                break;
+            case 'pulse':
+                this.numberDisplay.classList.add('pulse-animation');
+                break;
+        }
+    }
+
+    createParticles() {
+        // Clear existing particles
+        this.particlesContainer.innerHTML = '';
+        
+        // Create new particles
+        for (let i = 0; i < 30; i++) {
+            const particle = document.createElement('div');
+            particle.classList.add('particle');
+            
+            const angle = Math.random() * Math.PI * 2;
+            const distance = 100 + Math.random() * 200;
+            const tx = Math.cos(angle) * distance;
+            const ty = Math.sin(angle) * distance;
+            
+            particle.style.setProperty('--tx', `${tx}px`);
+            particle.style.setProperty('--ty', `${ty}px`);
+            particle.style.left = '50%';
+            particle.style.top = '50%';
+            particle.style.animationDelay = `${Math.random() * 0.5}s`;
+            
+            this.particlesContainer.appendChild(particle);
+        }
+    }
+
+    startAnimation() {
+        this.stopAnimation(); // Clear any existing timeout
+        
+        if (this.isLooping && this.isPlaying) {
+            this.animationTimeout = setTimeout(() => {
+                this.changeNumber(1);
+                this.startAnimation();
+            }, 3000); // 3 second delay between numbers
+        }
+    }
+
+    stopAnimation() {
+        if (this.animationTimeout) {
+            clearTimeout(this.animationTimeout);
+            this.animationTimeout = null;
+        }
+    }
+}
+
+// Initialize the app when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    new CinematicNumbersApp();
+});
+
+// Handle feather icons replacement
+document.addEventListener('DOMContentLoaded', () => {
+    if (typeof feather !== 'undefined') {
+        feather.replace();
+    }
+});

style.css

@@ -1,28 +1,212 @@
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Bebas Neue', sans-serif;
+    background: #000;
+    color: white;
+    overflow: hidden;
+}
+
+.cinematic-number {
+    font-family: 'Bebas Neue', sans-serif;
+    background: linear-gradient(145deg, #8b0000, #ff0000, #8b0000);
+    background-size: 200% 200%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 
+        0 0 30px rgba(255, 0, 0, 0.8),
+        0 0 60px rgba(255, 0, 0, 0.6),
+        0 0 90px rgba(255, 0, 0, 0.4),
+        2px 2px 4px rgba(0, 0, 0, 0.8),
+        -2px -2px 4px rgba(255, 255, 255, 0.1);
+    position: relative;
+    animation: shimmer 3s ease-in-out infinite;
+}
+
+.cinematic-number::before {
+    content: attr(data-number);
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    z-index: -1;
+}
+
+.cinematic-number::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(circle at center, transparent 30%, rgba(255, 0, 0, 0.1) 100%);
+    border-radius: 10px;
+    z-index: -2;
+}
+
+@keyframes shimmer {
+    0%, 100% {
+        background-position: 0% 50%;
+        filter: brightness(1);
+    }
+    50% {
+        background-position: 100% 50%;
+        filter: brightness(1.2);
+    }
+}
+
+/* Animation Classes */
+.zoom-animation {
+    animation: zoomIn 2s ease-out;
+}
+
+@keyframes zoomIn {
+    0% {
+        transform: scale(0.1) rotate(-10deg);
+        opacity: 0;
+        filter: blur(20px);
+    }
+    60% {
+        transform: scale(1.1) rotate(2deg);
+        opacity: 1;
+        filter: blur(0);
+    }
+    100% {
+        transform: scale(1) rotate(0);
+    }
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.bounce-animation {
+    animation: bounceIn 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+@keyframes bounceIn {
+    0% {
+        transform: scale(0.3);
+        opacity: 0;
+    }
+    50% {
+        transform: scale(1.05);
+    }
+    70% {
+        transform: scale(0.9);
+    }
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.smoke-animation {
+    animation: smokeReveal 2.5s ease-out;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+@keyframes smokeReveal {
+    0% {
+        transform: translateY(100px) scale(0.8);
+        opacity: 0;
+        filter: blur(30px);
+    }
+    50% {
+        transform: translateY(-20px) scale(1.1);
+        filter: blur(10px);
+    }
+    100% {
+        transform: translateY(0) scale(1);
+        opacity: 1;
+        filter: blur(0);
+    }
 }
+
+.glitch-animation {
+    animation: glitchFlicker 2s ease-out;
+}
+
+@keyframes glitchFlicker {
+    0%, 100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+    10%, 30%, 50%, 70%, 90% {
+        transform: translateX(-2px);
+        opacity: 0.8;
+    }
+    20%, 40%, 60%, 80% {
+        transform: translateX(2px);
+        opacity: 0.9;
+    }
+}
+
+.pulse-animation {
+    animation: energyPulse 2s ease-out;
+}
+
+@keyframes energyPulse {
+    0% {
+        transform: scale(0.5);
+        opacity: 0;
+        filter: brightness(0) blur(20px);
+    }
+    30% {
+        transform: scale(1.2);
+        filter: brightness(2) blur(5px);
+    }
+    50% {
+        transform: scale(0.9);
+        filter: brightness(1.5) blur(2px);
+    }
+    70% {
+        transform: scale(1.1);
+        filter: brightness(1.8) blur(1px);
+    }
+    100% {
+        transform: scale(1);
+        opacity: 1;
+        filter: brightness(1) blur(0);
+    }
+}
+
+/* Particle Effects */
+.particle {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    background: #ff0000;
+    border-radius: 50%;
+    pointer-events: none;
+    animation: particleFloat 2s ease-out forwards;
+}
+
+@keyframes particleFloat {
+    0% {
+        transform: translate(0, 0) scale(1);
+        opacity: 1;
+    }
+    100% {
+        transform: translate(var(--tx), var(--ty)) scale(0);
+        opacity: 0;
+    }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .cinematic-number {
+        font-size: 12rem !important;
+    }
+}
+
+@media (max-width: 480px) {
+    .cinematic-number {
+        font-size: 8rem !important;
+    }
+}