diff --git a/golden-ticket.png b/golden-ticket.png new file mode 100644 index 0000000..90236d1 Binary files /dev/null and b/golden-ticket.png differ diff --git a/result-remade.png b/result-remade.png new file mode 100644 index 0000000..0b5bcab Binary files /dev/null and b/result-remade.png differ diff --git a/result.png b/result.png new file mode 100644 index 0000000..f633afb Binary files /dev/null and b/result.png differ diff --git a/src/App.jsx b/src/App.jsx index 299fdd7..6d97cc2 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -3,6 +3,7 @@ import { useLuckyDraw } from './hooks/useLuckyDraw'; import { SlotMachine } from './components/SlotMachine'; import { HistoryPanel } from './components/HistoryPanel'; import { WinnerModal } from './components/WinnerModal'; +import { SparkleEffect } from './components/SparkleEffect'; import { Sparkles } from 'lucide-react'; function App() { @@ -109,6 +110,16 @@ function App() { onDraw={handleDraw} poolLength={pool.length} /> + + {/* Left Sparkles - Absolute positioned next to slot machine */} +
+ +
+ + {/* Right Sparkles - Absolute positioned next to slot machine */} +
+ +
diff --git a/src/components/SparkleEffect.jsx b/src/components/SparkleEffect.jsx new file mode 100644 index 0000000..bdf1b4b --- /dev/null +++ b/src/components/SparkleEffect.jsx @@ -0,0 +1,132 @@ +import { useEffect, useState } from 'react'; + +/** + * Helper to generate random number within a range + */ +const random = (min, max) => Math.random() * (max - min) + min; + +/** + * Component: Star + * Renders a 4-pointed glowing star (lens flare style) + */ +const Star = ({ style }) => { + return ( +
+ {/* The Glow Center - Bright Core */} +
+ + {/* Vertical Ray - Sharp White Core */} +
+ {/* Vertical Ray - Gold Glow */} +
+ + {/* Horizontal Ray - Sharp White Core */} +
+ {/* Horizontal Ray - Gold Glow */} +
+ + {/* Diffuse Halo */} +
+
+ ); +}; + +/** + * Component: Particle + * Renders tiny background dust/bokeh circles + */ +const Particle = ({ style }) => ( +
+); + +export function SparkleEffect() { + const [stars, setStars] = useState([]); + const [particles, setParticles] = useState([]); + + useEffect(() => { + // Generate Stars (The big cross flares) - spread across entire area + const starCount = 40; // Increased from 25 + const newStars = Array.from({ length: starCount }).map((_, i) => { + return { + id: i, + style: { + left: `${random(0, 100)}%`, + top: `${random(0, 100)}%`, + width: `${random(50, 150)}px`, + height: `${random(50, 150)}px`, + animationDuration: `${random(1.5, 4)}s`, + animationDelay: `${random(0, 4)}s`, + opacity: random(0.6, 1), + }, + }; + }); + + // Generate Particles (The small bokeh dots) - spread across entire area + const particleCount = 100; // Increased from 60 + const newParticles = Array.from({ length: particleCount }).map((_, i) => { + return { + id: i, + style: { + left: `${random(0, 100)}%`, + top: `${random(0, 100)}%`, + width: `${random(2, 5)}px`, + height: `${random(2, 5)}px`, + opacity: random(0.3, 0.8), + boxShadow: `0 0 ${random(3, 6)}px rgba(255, 255, 220, 0.8)`, + animationDuration: `${random(1, 3)}s`, + animationDelay: `${random(0, 5)}s`, + }, + }; + }); + + setStars(newStars); + setParticles(newParticles); + }, []); + + return ( +
+ {/* Custom Keyframes */} + + + {/* Render Stars (Big cross flares) */} +
+ {stars.map((s) => ( + + ))} +
+ + {/* Render Particles (Small dots) */} +
+ {particles.map((p) => ( + + ))} +
+
+ ); +}