Spaces:

ProjectGenesis
/

cinematic-countdown-elite

Running

App Files Files Community

ProjectGenesis commited on 17 days ago

Commit

1838d8f

verified ·

1 Parent(s): 6c428b6

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

Browse files

🎨 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

Files changed (5) hide show

README.md +8 -5
components/number-display.js +62 -0
index.html +55 -19
script.js +133 -0
style.css +213 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Cinematic Countdown Elite
-emoji: 🏃
-colorFrom: green
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Cinematic Countdown Elite 🎬
+colorFrom: blue
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/number-display.js ADDED Viewed

	@@ -0,0 +1,62 @@

+class NumberDisplay extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+    }
+    render() {
+        const number = this.getAttribute('number') || '1';
+        const animation = this.getAttribute('animation') || 'zoom';
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    height: 100%;
+                }
+                .cinematic-number {
+                    position: relative;
+                    font-size: 30vw;
+                    font-weight: 900;
+                    color: transparent;
+                    background: linear-gradient(145deg, #8B0000, #B22222, #DC143C);
+                    -webkit-background-clip: text;
+                    background-clip: text;
+                    text-shadow:
+                        0 0 30px rgba(220, 20, 60, 0.8),
+                        0 0 60px rgba(220, 20, 60, 0.6),
+                        0 0 90px rgba(220, 20, 60, 0.4),
+                        4px 4px 0px #000,
+                        8px 8px 15px rgba(0, 0, 0, 0.8);
+                    transform-style: preserve-3d;
+                    perspective: 1000px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    height: 100%;
+                }
+            </style>
+            <div class="cinematic-number" data-number="${number}">
+                ${number}
+            </div>
+        `;
+    }
+    static get observedAttributes() {
+        return ['number', 'animation'];
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            this.render();
+        }
+    }
+}
+customElements.define('number-display', NumberDisplay);

index.html CHANGED Viewed

@@ -1,19 +1,55 @@
-<!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 Elite</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <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="animation-container" class="w-full h-screen flex items-center justify-center">
+        <!-- Numbers will be dynamically inserted here -->
+    </div>
+    <div class="fixed bottom-4 right-4 z-50">
+        <div class="bg-gray-900 bg-opacity-80 rounded-lg p-4 text-white">
+            <h3 class="font-bold mb-2">Animation Controls</h3>
+            <div class="space-y-2">
+                <select id="animation-select" class="bg-gray-800 text-white rounded px-2 py-1 w-full">
+                    <option value="zoom">Slow Zoom In</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>
+                <select id="number-select" class="bg-gray-800 text-white rounded px-2 py-1 w-full">
+                    <option value="1">Number 1</option>
+                    <option value="2">Number 2</option>
+                    <option value="3">Number 3</option>
+                    <option value="4">Number 4</option>
+                    <option value="5">Number 5</option>
+                    <option value="6">Number 6</option>
+                    <option value="7">Number 7</option>
+                    <option value="8">Number 8</option>
+                    <option value="9">Number 9</option>
+                    <option value="10">Number 10</option>
+                </select>
+                <div class="flex space-x-2">
+                    <button id="play-btn" class="bg-red-600 hover:bg-red-700 px-3 py-1 rounded flex-1">Play</button>
+                    <button id="loop-toggle" class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded flex-1">Loop: Off</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,133 @@

+class NumberAnimationManager {
+    constructor() {
+        this.container = document.getElementById('animation-container');
+        this.currentAnimation = null;
+        this.isLooping = false;
+        this.initializeControls();
+    }
+    initializeControls() {
+        const playBtn = document.getElementById('play-btn');
+        const loopToggle = document.getElementById('loop-toggle');
+        const animationSelect = document.getElementById('animation-select');
+        const numberSelect = document.getElementById('number-select');
+        playBtn.addEventListener('click', () => {
+            this.playAnimation(
+                numberSelect.value,
+                animationSelect.value
+            );
+        });
+        loopToggle.addEventListener('click', () => {
+            this.isLooping = !this.isLooping;
+            loopToggle.textContent = `Loop: ${this.isLooping ? 'On' : 'Off'}`;
+            if (this.isLooping && this.currentAnimation) {
+                this.startLoop();
+            }
+        });
+    }
+    playAnimation(number, animationType) {
+        this.clearContainer();
+        const numberElement = this.createNumberElement(number);
+        this.container.appendChild(numberElement);
+        if (animationType === 'smoke') {
+            this.createParticles();
+        }
+        // Add animation class
+        setTimeout(() => {
+            numberElement.classList.add(this.getAnimationClass(animationType));
+        }, 100);
+        this.currentAnimation = { number, animationType };
+        if (this.isLooping) {
+            this.startLoop();
+        }
+    }
+    createNumberElement(number) {
+        const div = document.createElement('div');
+        div.className = 'cinematic-number';
+        div.textContent = number;
+        div.setAttribute('data-number', number);
+        return div;
+    }
+    createParticles() {
+        const particlesContainer = document.createElement('div');
+        particlesContainer.className = 'particles';
+        for (let i = 0; i < 50; i++) {
+            const particle = document.createElement('div');
+            particle.className = '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() * 1}s`;
+            particlesContainer.appendChild(particle);
+        }
+        this.container.appendChild(particlesContainer);
+        // Remove particles after animation
+        setTimeout(() => {
+            particlesContainer.remove();
+        }, 2000);
+    }
+    getAnimationClass(animationType) {
+        const animationClasses = {
+            'zoom': 'zoom-in',
+            'bounce': 'bounce-in',
+            'smoke': 'smoke-reveal',
+            'glitch': 'glitch-flicker',
+            'pulse': 'energy-pulse'
+        };
+        return animationClasses[animationType] || 'zoom-in';
+    }
+    clearContainer() {
+        this.container.innerHTML = '';
+    }
+    startLoop() {
+        if (!this.isLooping || !this.currentAnimation) return;
+        const { number, animationType } = this.currentAnimation;
+        const durations = {
+            'zoom': 3000,
+            'bounce': 1500,
+            'smoke': 4000,
+            'glitch': 2500,
+            'pulse': 3000
+        };
+        setInterval(() => {
+            this.playAnimation(number, animationType);
+        }, durations[animationType] || 3000);
+    }
+}
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    new NumberAnimationManager();
+    // Auto-play first animation
+    setTimeout(() => {
+        document.getElementById('play-btn').click();
+    }, 500);
+});

style.css CHANGED Viewed

@@ -1,28 +1,223 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
 body {
+    font-family: 'Bebas Neue', cursive;
+    background: #000;
+    overflow: hidden;
+}
+.cinematic-number {
+    position: relative;
+    font-size: 30vw;
+    font-weight: 900;
+    color: transparent;
+    background: linear-gradient(145deg, #8B0000, #B22222, #DC143C);
+    -webkit-background-clip: text;
+    background-clip: text;
+    text-shadow:
+        0 0 30px rgba(220, 20, 60, 0.8),
+        0 0 60px rgba(220, 20, 60, 0.6),
+        0 0 90px rgba(220, 20, 60, 0.4),
+        4px 4px 0px #000,
+        8px 8px 15px rgba(0, 0, 0, 0.8);
+    transform-style: preserve-3d;
+    perspective: 1000px;
+}
+.cinematic-number::before {
+    content: attr(data-number);
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: rgba(139, 0, 0, 0.3);
+    z-index: -1;
+    transform: translateZ(-30px) scale(1.1);
+    filter: blur(15px);
+}
+.cinematic-number::after {
+    content: '';
+    position: absolute;
+    top: -10%;
+    left: -10%;
+    right: -10%;
+    bottom: -10%;
+    background: radial-gradient(circle at center, rgba(220, 20, 60, 0.1) 0%, transparent 70%);
+    z-index: -2;
+    border-radius: 20%;
+    animation: ambientGlow 3s ease-in-out infinite alternate;
+}
+@keyframes ambientGlow {
+    0% { opacity: 0.3; transform: scale(0.95); }
+    100% { opacity: 0.7; transform: scale(1.05); }
+}
+/* Animation Classes */
+.zoom-in {
+    animation: zoomIn 3s ease-out forwards;
+}
+@keyframes zoomIn {
+    0% {
+        transform: scale(0.1) rotateX(90deg);
+        opacity: 0;
+    }
+    50% {
+        transform: scale(1.1) rotateX(0deg);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1) rotateX(0deg);
+        opacity: 1;
+    }
+}
+.bounce-in {
+    animation: bounceIn 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
+}
+@keyframes bounceIn {
+    0% {
+        transform: scale(0) translateY(100vh);
+        opacity: 0;
+    }
+    60% {
+        transform: scale(1.2) translateY(-20px);
+        opacity: 1;
+    }
+    80% {
+        transform: scale(0.95) translateY(10px);
+    }
+    100% {
+        transform: scale(1) translateY(0);
+        opacity: 1;
+    }
+}
+.smoke-reveal {
+    animation: smokeReveal 4s ease-out forwards;
 }
+@keyframes smokeReveal {
+    0% {
+        transform: scale(0.5) translateY(50px);
+        opacity: 0;
+        filter: blur(20px);
+    }
+    30% {
+        transform: scale(1.1) translateY(-10px);
+        opacity: 0.5;
+        filter: blur(10px);
+    }
+    60% {
+        transform: scale(0.95) translateY(5px);
+        opacity: 0.8;
+        filter: blur(5px);
+    }
+    100% {
+        transform: scale(1) translateY(0);
+        opacity: 1;
+        filter: blur(0);
+    }
 }
+.glitch-flicker {
+    animation: glitchFlicker 2.5s ease-out forwards;
 }
+@keyframes glitchFlicker {
+    0% {
+        transform: scale(0.8);
+        opacity: 0;
+        filter: hue-rotate(0deg);
+    }
+    20% {
+        transform: scale(1.1);
+        opacity: 1;
+        filter: hue-rotate(90deg);
+    }
+    40% {
+        transform: scale(0.9) translateX(-10px);
+        filter: hue-rotate(180deg);
+    }
+    60% {
+        transform: scale(1.05) translateX(10px);
+        filter: hue-rotate(270deg);
+    }
+    80% {
+        transform: scale(0.95);
+        filter: hue-rotate(360deg);
+    }
+    100% {
+        transform: scale(1);
+        opacity: 1;
+        filter: hue-rotate(0deg);
+    }
 }
+.energy-pulse {
+    animation: energyPulse 3s ease-out forwards;
 }
+@keyframes energyPulse {
+    0% {
+        transform: scale(0.5);
+        opacity: 0;
+    }
+    30% {
+        transform: scale(1.3);
+        opacity: 1;
+        text-shadow:
+            0 0 50px rgba(220, 20, 60, 1),
+            0 0 100px rgba(220, 20, 60, 0.8),
+            0 0 150px rgba(220, 20, 60, 0.6);
+    }
+    50% {
+        transform: scale(1.1);
+        text-shadow:
+            0 0 30px rgba(220, 20, 60, 0.8),
+            0 0 60px rgba(220, 20, 60, 0.6),
+            0 0 90px rgba(220, 20, 60, 0.4);
+    }
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+/* Particle Effects */
+.particles {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+.particle {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    background: #DC143C;
+    border-radius: 50%;
+    animation: floatParticle 2s ease-out forwards;
+}
+@keyframes floatParticle {
+    0% {
+        transform: translate(0, 0) scale(0);
+        opacity: 1;
+    }
+    100% {
+        transform: translate(var(--tx), var(--ty)) scale(1);
+        opacity: 0;
+    }
+}