Spaces:

ProjectGenesis
/

lootbox-cinematics-royale

Running

App Files Files Community

ProjectGenesis commited on Nov 14, 2025

Commit

138ddd3

verified ·

1 Parent(s): 01c0a69

Create a 16:9 widescreen UI render of a clean, modern “Multiplier Spin Slider” for an online sweepstakes casino platform called Nioplay.

Browse files

This scene should ONLY show the multiplier slider — do not include loot boxes, characters, or any other game modules. The focus must be entirely on the horizontal multiplier meter and its animation state.

Overall Visual Style:
- Deep black and charcoal background with subtle ambient glow.
- Nioplay color palette: neon orange (#FF8C00) accents, warm gold (#FFCC66 / #FFD700) highlights, soft amber lighting.
- Clean, premium, fintech-like aesthetic with glassmorphism surfaces and glowing accents.
- No cartoon style. Modern, futuristic, minimal, sleek.

Multiplier Slider Structure:
- A long, horizontal, thin track centered in the frame.
- Inside the track, display repeating multiplier values as glowing “pills” or rounded rectangles:
×1, ×1.25, ×1.5, ×2, ×3, ×5
- Repeat the sequence twice so the slider appears long and scrollable.
- Each multiplier pill should have:
- Translucent glassmorphism background (blur, reflection).
- Soft white or gold text with a faint glow.
- Rounded pill shape with subtle rim light.
- Light shadow to create floating depth.

Selection Window:
- A small glowing rectangular frame centered over the track.
- Neon-orange outline, soft glow, transparent interior.
- This window indicates the chosen multiplier after the spin.

Animation Impression:
- Show the slider mid-spin or slowing down:
- Slight motion blur on non-selected multiplier pills.
- Multiplier values stretching or streaking slightly to show speed.
- The selected multiplier (centered) should be:
- Slightly larger (scaled up)
- Strong neon-orange glow behind it
- Crisp and perfectly readable
- The rest of the multipliers should have mild blur to imply horizontal motion.

Background & Atmosphere:
- Deep black-to-warm radial gradient.
- Subtle particles, dust, or amber sparks floating around the slider.
- Soft rim lighting behind the slider to highlight depth.

Text Labels (optional, small and minimal):
- A tiny upper label above the slider:
“Multiplier Roll”
- A tiny lower label:
“Spin to boost your reward”

Final Requirements:
- Render in true 16:9 widescreen.
- Only show the multiplier slider component — no loot boxes or pop-ups.
- The final design should look like a polished, production-ready Nioplay UI module focused solely on the multiplier meter spin.

Files changed (3) hide show

multiplier-slider.html +41 -0
script.js +93 -13
style.css +73 -2

multiplier-slider.html ADDED Viewed

	@@ -0,0 +1,41 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nioplay Multiplier Slider</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
+</head>
+<body class="bg-black w-full h-screen flex items-center justify-center overflow-hidden">
+    <div id="multiplier-slider-container" class="relative w-full max-w-4xl">
+        <!-- Background Effects -->
+        <div class="absolute inset-0 bg-gradient-to-b from-black to-gray-900 opacity-90 -z-10"></div>
+        <div class="ambient-particles absolute inset-0 -z-10"></div>
+        <!-- Slider Track -->
+        <div class="slider-track absolute w-full h-2 bg-gray-800/50 rounded-full blur-sm"></div>
+        <div class="slider-track-highlight absolute w-full h-1 bg-amber-500/10 rounded-full blur-xs"></div>
+        <!-- Multiplier Values -->
+        <div id="multiplier-values" class="relative h-20 flex items-center overflow-hidden">
+            <div id="multiplier-strip" class="flex space-x-8 transition-transform duration-1000">
+                <!-- Multiplier pills will be generated via JS -->
+            </div>
+        </div>
+        <!-- Selection Window -->
+        <div class="selection-window absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-24 h-16 border-2 border-amber-500/80 rounded-lg shadow-lg shadow-amber-500/30 pointer-events-none">
+            <div class="absolute inset-0 bg-amber-500/10 rounded-md blur-xs"></div>
+            <div class="absolute -inset-1 border border-amber-500/20 rounded-lg pointer-events-none"></div>
+        </div>
+        <!-- Labels -->
+        <div class="absolute -top-8 left-0 right-0 text-center text-sm text-amber-500/80 tracking-widest">MULTIPLIER ROLL</div>
+        <div class="absolute -bottom-8 left-0 right-0 text-center text-xs text-amber-500/60 tracking-wider">SPIN TO BOOST YOUR REWARD</div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

script.js CHANGED Viewed

@@ -250,18 +250,98 @@ document.addEventListener('DOMContentLoaded', () => {
             });
         }
     }
-    // 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);
 });

             });
         }
     }
+// 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);
+// Multiplier Slider Initialization
+if (document.getElementById('multiplier-strip')) {
+    const multiplierValues = ['×1', '×1.25', '×1.5', '×2', '×3', '×5'];
+    const strip = document.getElementById('multiplier-strip');
+    // Create two sets of multipliers for smooth looping
+    for (let i = 0; i < 12; i++) {
+        const value = multiplierValues[i % multiplierValues.length];
+        const pill = document.createElement('div');
+        pill.className = 'multiplier-pill';
+        pill.textContent = value;
+        strip.appendChild(pill);
+    }
+    // Start infinite scroll animation
+    let currentPosition = 0;
+    let isSpinning = false;
+    function startSpin() {
+        if (isSpinning) return;
+        isSpinning = true;
+        const spinDistance = Math.random() * 1500 + 1000;
+        const spinDuration = 3;
+        // Add motion blur to all pills except selected one
+        document.querySelectorAll('.multiplier-pill').forEach(pill => {
+            pill.classList.add('motion-blur');
+        });
+        gsap.to(strip, {
+            x: `-=${spinDistance}`,
+            duration: spinDuration,
+            ease: "power2.inOut",
+            onUpdate: () => {
+                // Check if we need to loop the strip
+                const stripRect = strip.getBoundingClientRect();
+                if (stripRect.right < window.innerWidth / 2) {
+                    const firstChild = strip.firstElementChild;
+                    strip.appendChild(firstChild.cloneNode(true));
+                    firstChild.remove();
+                    gsap.set(strip, { x: `+=${firstChild.offsetWidth + 32}` });
+                }
+            },
+            onComplete: () => {
+                // Select a random multiplier (biased toward middle values)
+                const centerIndex = Math.floor(Math.random() * 3) + 5;
+                const pills = document.querySelectorAll('.multiplier-pill');
+                const selectedPill = pills[centerIndex];
+                // Align selected pill to center
+                const containerWidth = document.getElementById('multiplier-slider-container').offsetWidth;
+                const pillWidth = selectedPill.offsetWidth;
+                const pillOffset = selectedPill.offsetLeft;
+                const targetX = containerWidth / 2 - pillWidth / 2 - pillOffset;
+                gsap.to(strip, {
+                    x: targetX,
+                    duration: 0.8,
+                    ease: "elastic.out(1, 0.5)",
+                    onStart: () => {
+                        // Remove blur from selected pill
+                        selectedPill.classList.remove('motion-blur');
+                        selectedPill.classList.add('selected');
+                    },
+                    onComplete: () => {
+                        isSpinning = false;
+                        // Remove blur from all pills after animation
+                        document.querySelectorAll('.multiplier-pill').forEach(pill => {
+                            pill.classList.remove('motion-blur');
+                        });
+                    }
+                });
+            }
+        });
+    }
+    // Auto-spin on page load
+    setTimeout(startSpin, 1000);
+}
 });

style.css CHANGED Viewed

@@ -135,11 +135,82 @@
     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;
-}

     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;
+}
+/* Multiplier Slider Styles */
+.multiplier-pill {
+    position: relative;
+    width: 80px;
+    height: 40px;
+    background: rgba(30, 30, 30, 0.7);
+    backdrop-filter: blur(8px);
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: bold;
+    font-size: 1.1rem;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3),
+                inset 0 1px 1px rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+    border: 1px solid rgba(255, 140, 0, 0.2);
+}
+.multiplier-pill::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 20px;
+    padding: 1px;
+    background: linear-gradient(135deg, rgba(255, 140, 0, 0.5), rgba(255, 215, 0, 0.3));
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+}
+.multiplier-pill.selected {
+    transform: scale(1.2);
+    background: rgba(255, 140, 0, 0.3);
+    box-shadow: 0 0 20px rgba(255, 140, 0, 0.5);
+    z-index: 10;
+}
+.multiplier-pill.motion-blur {
+    filter: blur(2px);
+    opacity: 0.7;
+}
+.slider-track {
+    top: 50%;
+    transform: translateY(-50%);
+}
+.slider-track-highlight {
+    top: 50%;
+    transform: translateY(-50%);
+    background: linear-gradient(90deg, transparent, rgba(255, 140, 0, 0.3), transparent);
+}
+.ambient-particles {
+    background-image: radial-gradient(ellipse at center, rgba(255, 140, 0, 0.05) 0%, transparent 70%);
+    background-size: 600px 600px;
+    background-position: 0 0;
+    animation: particle-move 20s infinite linear;
+}
+.selection-window {
+    animation: pulse-glow 2s infinite alternate;
+}
+@keyframes pulse-glow {
+    0% { box-shadow: 0 0 10px rgba(255, 140, 0, 0.3); }
+    100% { box-shadow: 0 0 20px rgba(255, 140, 0, 0.5); }
+}