+13
-12
src/pages/Results.tsx
+13
-12
src/pages/Results.tsx
···
100
100
<div className="bg-firefly-banner dark:bg-firefly-banner-dark text-white relative overflow-hidden">
101
101
{!reducedMotion && (
102
102
<div className="absolute inset-0 opacity-20" aria-hidden="true">
103
-
{[...Array(10)].map((_, i) => (
104
-
<div
105
-
key={i}
106
-
className="absolute w-1 h-1 bg-white rounded-full"
107
-
style={{
108
-
left: `${Math.random() * 100}%`,
109
-
top: `${Math.random() * 100}%`,
110
-
animation: `float ${2 + Math.random()}s ease-in-out infinite`,
111
-
animationDelay: `${Math.random()}s`,
112
-
}}
113
-
/>
114
-
))}
103
+
{[...Array(10)].map((_, i) => {
104
+
const animations = ["animate-float-1", "animate-float-2", "animate-float-3"];
105
+
return (
106
+
<div
107
+
key={i}
108
+
className={`absolute w-1 h-1 bg-white rounded-full ${animations[i % 3]}`}
109
+
style={{
110
+
left: `${Math.random() * 100}%`,
111
+
top: `${Math.random() * 100}%`,
112
+
}}
113
+
/>
114
+
);
115
+
})}
115
116
</div>
116
117
)}
117
118
<div className="max-w-3xl mx-auto px-4 py-6 relative">
+3
tailwind.config.js
+3
tailwind.config.js