Spaces:

ProjectGenesis
/

lootbox-cinematics-royale

Running

App Files Files Community

ProjectGenesis commited on Nov 14, 2025

Commit

01c0a69

verified ·

1 Parent(s): 80e9b16

Create a cinematic animation concept for Nioplay’s horizontal loot-box RNG slider — inspired by Stake.com’s mystery box mechanic.

Browse files

Do NOT generate a full webpage or desktop mockup. Only produce the animation module.
Overall Direction:
Design a motion graphic sequence that shows how the loot box system behaves from start to finish.
Use a premium black + neon orange/gold casino theme with glowing accents, soft glassmorphism layers, backlit amber lighting, and particle effects.
Animation Sequence to Depict (Frame-by-Frame Concept):
Idle State
A long horizontal carousel with 10–14 loot boxes evenly spaced.
Boxes glow subtly:
Common = green
Rare = blue
Epic = purple
Legendary = bright gold/orange
All boxes float slightly above a glossy black track with soft reflections.
Player Action
A large glowing “ROLL” button pulses beneath the carousel.
When pressed, show a charged energy burst under the button.
High-Speed Sliding Phase
The entire horizontal row of boxes moves at high velocity left-to-right.
Use motion blur, neon streaks, light trails, and radial highlights.
Background stays dark — the only lighting comes from the passing boxes.
Deceleration Phase
The carousel slows down with rhythmic pulses of light.
Camera slightly zooms in for tension.
Add subtle sparks, floating particles, and lens reflections.
Final Settle & Selection
The motion stops precisely on one loot box.
The selected box should:
Enlarge 10–15%
Glow intensely with neon orange/gold rim-light
Emit heatwave distortion
Cast light onto the track
Loot Box Opening Reveal
The lid pops open with a cinematic light explosion
Streams of particles, fog glow, and golden dust burst outward
SC coins with ·SC· engraved spin upward
Show the prize hovering above the open box with a radiant outline
End State
Dim surrounding boxes
Keep the selected box glowing
Prize hover slowly with gentle rotation
Visual Requirements:
Style: Futuristic casino luxury — metallic, glassy, realistic
Colors: Black, deep charcoal, neon orange (#FF8C00), gold, amber
Lighting: Backlit glow, rim lighting, volumetric fog beams
No characters, no people, no mascots
No browser UI, device frame, or page layout
Final render should clearly read as an animation storyboard or motion concept, not a static page.
Aspect ratio: 16:9 widescreen.
Background: Black-to-warm gradient with subtle spark particles.

Files changed (4) hide show

README.md +8 -5
index.html +48 -19
script.js +267 -0
style.css +136 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Lootbox Cinematics Royale
-emoji: 📈
-colorFrom: green
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: LootBox Cinematics Royale 🎰
+colorFrom: pink
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,48 @@
-<!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>LootBox Animation Concept</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
+    </style>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-black overflow-hidden font-['Orbitron']">
+    <div class="relative w-full h-screen flex items-center justify-center">
+        <!-- Background Elements -->
+        <div class="absolute inset-0 bg-gradient-to-b from-black to-gray-900 opacity-90 z-0"></div>
+        <div class="particles absolute inset-0 z-10"></div>
+        <!-- Main Animation Container -->
+        <div id="animation-container" class="relative w-full max-w-4xl h-80 z-20">
+            <!-- Track -->
+            <div class="absolute bottom-0 left-0 right-0 h-2 bg-gradient-to-r from-transparent via-amber-500/50 to-transparent rounded-full blur-sm"></div>
+            <div class="absolute bottom-0 left-0 right-0 h-1.5 bg-gradient-to-r from-transparent via-amber-500/20 to-transparent rounded-full"></div>
+            <!-- Loot Boxes -->
+            <div id="loot-boxes" class="absolute bottom-10 left-0 flex space-x-8 transition-transform duration-1000">
+                <!-- Boxes will be generated via JS -->
+            </div>
+            <!-- ROLL Button -->
+            <div id="roll-button" class="absolute -bottom-16 left-1/2 transform -translate-x-1/2 px-10 py-3 bg-gradient-to-br from-amber-500 to-orange-600 rounded-full cursor-pointer shadow-lg shadow-amber-500/30 hover:shadow-amber-500/50 transition-all duration-300 group">
+                <span class="text-lg font-bold text-white tracking-widest">ROLL</span>
+                <div class="absolute inset-0 rounded-full border-2 border-amber-300/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                <div class="absolute -inset-1 rounded-full bg-amber-500 blur opacity-0 group-hover:opacity-50 transition-opacity duration-300"></div>
+            </div>
+            <!-- Light Effects -->
+            <div class="light-beam absolute w-40 h-40 bg-amber-500/10 rounded-full blur-3xl -z-10"></div>
+            <div class="light-beam-2 absolute w-60 h-60 bg-orange-500/5 rounded-full blur-3xl -z-10"></div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,267 @@

+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize scene
+    const container = document.getElementById('animation-container');
+    const lootBoxesContainer = document.getElementById('loot-boxes');
+    const rollButton = document.getElementById('roll-button');
+    // Box types and colors
+    const boxTypes = [
+        { name: 'Common', class: 'common', chance: 60 },
+        { name: 'Rare', class: 'rare', chance: 25 },
+        { name: 'Epic', class: 'epic', chance: 10 },
+        { name: 'Legendary', class: 'legendary', chance: 5 }
+    ];
+    // Generate loot boxes
+    const totalBoxes = 12;
+    const boxes = [];
+    for (let i = 0; i < totalBoxes; i++) {
+        const box = document.createElement('div');
+        box.className = 'loot-box';
+        // Determine box type based on chance
+        const random = Math.random() * 100;
+        let cumulativeChance = 0;
+        let boxType;
+        for (const type of boxTypes) {
+            cumulativeChance += type.chance;
+            if (random <= cumulativeChance) {
+                boxType = type;
+                break;
+            }
+        }
+        box.innerHTML = `
+            <div class="loot-box-inner">
+                <div class="loot-box-front ${boxType.class}">
+                    <div class="loot-box-lid ${boxType.class}"></div>
+                    <span class="text-xs opacity-70">${boxType.name}</span>
+                </div>
+                <div class="loot-box-back"></div>
+            </div>
+        `;
+        boxes.push(box);
+        lootBoxesContainer.appendChild(box);
+    }
+    // Add event listener to roll button
+    rollButton.addEventListener('click', () => {
+        if (lootBoxesContainer.classList.contains('rolling')) return;
+        startRollAnimation();
+    });
+    function startRollAnimation() {
+        // Disable button during animation
+        lootBoxesContainer.classList.add('rolling');
+        rollButton.classList.add('opacity-50', 'pointer-events-none');
+        // Clear previous selection
+        document.querySelectorAll('.loot-box.selected').forEach(box => {
+            box.classList.remove('selected');
+        });
+        // Add motion blur
+        lootBoxesContainer.classList.add('motion-blur');
+        // Create speed lines
+        const speedLines = document.createElement('div');
+        speedLines.className = 'speed-lines';
+        container.appendChild(speedLines);
+        // Energy burst effect
+        const energyBurst = document.createElement('div');
+        energyBurst.className = 'energy-burst';
+        energyBurst.style.width = '200px';
+        energyBurst.style.height = '200px';
+        energyBurst.style.left = rollButton.offsetLeft + rollButton.offsetWidth / 2 - 100 + 'px';
+        energyBurst.style.top = rollButton.offsetTop + rollButton.offsetHeight / 2 - 100 + 'px';
+        container.appendChild(energyBurst);
+        // Animate energy burst
+        gsap.to(energyBurst, {
+            scale: 1.5,
+            opacity: 0.8,
+            duration: 0.3,
+            ease: 'power2.out',
+            onComplete: () => {
+                gsap.to(energyBurst, {
+                    scale: 3,
+                    opacity: 0,
+                    duration: 0.5,
+                    onComplete: () => {
+                        energyBurst.remove();
+                    }
+                });
+            }
+        });
+        // High-speed sliding phase
+        const slideDistance = Math.random() * 5000 + 3000;
+        gsap.to(lootBoxesContainer, {
+            x: `-=${slideDistance}`,
+            duration: 3,
+            ease: 'power2.inOut',
+            onUpdate: () => {
+                // Add speed lines effect
+                gsap.to(speedLines, {
+                    opacity: 0.5,
+                    duration: 0.1
+                });
+            },
+            onComplete: () => {
+                // Remove speed lines
+                gsap.to(speedLines, {
+                    opacity: 0,
+                    duration: 0.5,
+                    onComplete: () => {
+                        speedLines.remove();
+                    }
+                });
+                // Remove motion blur
+                lootBoxesContainer.classList.remove('motion-blur');
+                // Select a random box (bias towards center boxes)
+                const centerBoxIndex = Math.floor(Math.random() * 4) + 4;
+                const selectedBox = boxes[centerBoxIndex];
+                selectedBox.classList.add('selected');
+                // Align the selected box to center
+                const containerWidth = container.offsetWidth;
+                const boxWidth = selectedBox.offsetWidth;
+                const boxOffset = selectedBox.offsetLeft;
+                const targetX = containerWidth / 2 - boxWidth / 2 - boxOffset;
+                gsap.to(lootBoxesContainer, {
+                    x: targetX,
+                    duration: 0.8,
+                    ease: 'elastic.out(1, 0.5)',
+                    onComplete: () => {
+                        // Open the box after a delay
+                        setTimeout(() => {
+                            openBox(selectedBox);
+                        }, 500);
+                    }
+                });
+            }
+        });
+    }
+    function openBox(box) {
+        const lid = box.querySelector('.loot-box-lid');
+        const isLegendary = box.classList.contains('legendary');
+        // Animate lid opening
+        gsap.to(lid, {
+            rotationX: -120,
+            transformOrigin: 'bottom',
+            duration: 0.5,
+            ease: 'back.out(1)'
+        });
+        // Create light explosion
+        const explosion = document.createElement('div');
+        explosion.className = 'absolute inset-0 rounded-full bg-amber-500/20 blur-xl';
+        explosion.style.width = '200px';
+        explosion.style.height = '200px';
+        explosion.style.left = '50%';
+        explosion.style.top = '50%';
+        explosion.style.transform = 'translate(-50%, -50%) scale(0)';
+        box.appendChild(explosion);
+        // Animate explosion
+        gsap.to(explosion, {
+            scale: 2,
+            opacity: 0.8,
+            duration: 0.3,
+            ease: 'power2.out',
+            onComplete: () => {
+                gsap.to(explosion, {
+                    scale: 3,
+                    opacity: 0,
+                    duration: 0.5,
+                    onComplete: () => {
+                        explosion.remove();
+                    }
+                });
+            }
+        });
+        // Create particles
+        createParticles(box, isLegendary);
+        // Create prize reveal
+        const prizeValue = isLegendary ? '5000 SC' : ['100 SC', '250 SC', '500 SC', '1000 SC'][Math.floor(Math.random() * 4)];
+        const prize = document.createElement('div');
+        prize.className = 'prize-reveal';
+        prize.textContent = prizeValue;
+        box.appendChild(prize);
+        // Enable button again
+        setTimeout(() => {
+            lootBoxesContainer.classList.remove('rolling');
+            rollButton.classList.remove('opacity-50', 'pointer-events-none');
+        }, 2000);
+    }
+    function createParticles(box, isLegendary) {
+        const particleCount = isLegendary ? 30 : 15;
+        const colors = isLegendary
+            ? ['#FF8C00', '#FFD700', '#FFA500', '#FFFFFF']
+            : ['#FFFFFF', '#CCCCCC', '#AAAAAA'];
+        for (let i = 0; i < particleCount; i++) {
+            const particle = document.createElement('div');
+            particle.className = 'absolute rounded-full';
+            particle.style.width = Math.random() * 8 + 2 + 'px';
+            particle.style.height = particle.style.width;
+            particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+            particle.style.left = '50%';
+            particle.style.top = '50%';
+            particle.style.opacity = '0';
+            box.appendChild(particle);
+            const angle = Math.random() * Math.PI * 2;
+            const distance = Math.random() * 50 + 30;
+            const duration = Math.random() * 1 + 0.5;
+            gsap.to(particle, {
+                x: Math.cos(angle) * distance,
+                y: Math.sin(angle) * distance - 50,
+                opacity: 1,
+                duration: duration * 0.3,
+                ease: 'power2.out'
+            });
+            gsap.to(particle, {
+                y: `-=${Math.random() * 30 + 20}`,
+                opacity: 0,
+                duration: duration * 0.7,
+                delay: duration * 0.3,
+                ease: 'power2.in',
+                onComplete: () => {
+                    particle.remove();
+                }
+            });
+        }
+    }
+    // Ambient animations
+    setInterval(() => {
+        const randomBox = boxes[Math.floor(Math.random() * boxes.length)];
+        if (!randomBox.classList.contains('selected') && !lootBoxesContainer.classList.contains('rolling')) {
+            gsap.to(randomBox, {
+                y: -10,
+                duration: 1,
+                yoyo: true,
+                repeat: 1,
+                ease: 'sine.inOut'
+            });
+        }
+    }, 3000);
+});

style.css CHANGED Viewed

@@ -1,28 +1,145 @@
-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;
 }

+@keyframes pulse-glow {
+    0%, 100% { opacity: 0.7; }
+    50% { opacity: 1; }
 }
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-5px); }
 }
+.loot-box {
+    position: relative;
+    width: 120px;
+    height: 120px;
+    perspective: 1000px;
+    cursor: pointer;
+    animation: float 3s ease-in-out infinite;
 }
+.loot-box-inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transform-style: preserve-3d;
+    transition: transform 0.8s;
 }
+.loot-box:hover .loot-box-inner {
+    transform: rotateY(10deg) rotateX(5deg);
 }
+.loot-box-front, .loot-box-back {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+    border-radius: 8px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
+    border: 2px solid;
+}
+.loot-box-front {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    color: white;
+}
+.loot-box-back {
+    transform: rotateY(180deg);
+    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
+}
+.common { border-color: rgba(0, 255, 0, 0.3); box-shadow: 0 0 20px rgba(0, 255, 0, 0.1); }
+.rare { border-color: rgba(0, 100, 255, 0.3); box-shadow: 0 0 20px rgba(0, 100, 255, 0.1); }
+.epic { border-color: rgba(150, 0, 255, 0.3); box-shadow: 0 0 20px rgba(150, 0, 255, 0.1); }
+.legendary { border-color: rgba(255, 140, 0, 0.5); box-shadow: 0 0 30px rgba(255, 140, 0, 0.2); }
+.loot-box.selected {
+    animation: pulse-glow 1.5s infinite;
+    transform: scale(1.15);
+    z-index: 10;
+}
+.loot-box.selected.legendary {
+    box-shadow: 0 0 50px rgba(255, 140, 0, 0.5);
+}
+.loot-box-lid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 20%;
+    background: inherit;
+    border-radius: 8px 8px 0 0;
+    transform-origin: bottom;
+    transition: transform 0.5s;
+}
+.particles {
+    background-image: radial-gradient(ellipse at center, rgba(255, 140, 0, 0.1) 0%, transparent 70%);
+    background-size: 600px 600px;
+    background-position: 0 0;
+    animation: particle-move 20s infinite linear;
+}
+@keyframes particle-move {
+    100% { background-position: 600px 600px; }
+}
+.light-beam {
+    animation: beam-pulse 8s infinite alternate;
+}
+.light-beam-2 {
+    animation: beam-pulse 12s infinite alternate-reverse;
+}
+@keyframes beam-pulse {
+    0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.1; }
+    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.3; }
+}
+.prize-reveal {
+    position: absolute;
+    top: -100px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: white;
+    text-shadow: 0 0 10px rgba(255, 140, 0, 0.8);
+    animation: prize-float 3s ease-in-out infinite;
+}
+@keyframes prize-float {
+    0%, 100% { transform: translate(-50%, 0); }
+    50% { transform: translate(-50%, -10px); }
+}
+.motion-blur {
+    filter: blur(3px);
+    opacity: 0.7;
+}
+.speed-lines {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 140, 0, 0.1), transparent);
+    opacity: 0;
+}
+.energy-burst {
+    position: absolute;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255, 140, 0, 0.8), transparent 70%);
+    transform: scale(0);
+    opacity: 0;
+}