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) => (
+
+ ))}
+
+
+ );
+}