38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { FLOATING_EMOJIS } from "~/lib/data";
|
|
|
|
const POSITIONS = [
|
|
{ left: "8%", top: "18%", size: "text-2xl", delay: 0 },
|
|
{ left: "85%", top: "12%", size: "text-3xl", delay: 1 },
|
|
{ left: "15%", top: "65%", size: "text-xl", delay: 2 },
|
|
{ left: "78%", top: "55%", size: "text-2xl", delay: 0.5 },
|
|
{ left: "5%", top: "42%", size: "text-lg", delay: 1.5 },
|
|
{ left: "92%", top: "38%", size: "text-xl", delay: 2.5 },
|
|
{ left: "25%", top: "8%", size: "text-lg", delay: 3 },
|
|
{ left: "65%", top: "78%", size: "text-2xl", delay: 1.2 },
|
|
{ left: "45%", top: "88%", size: "text-lg", delay: 0.8 },
|
|
{ left: "55%", top: "5%", size: "text-xl", delay: 2.2 },
|
|
] as const;
|
|
|
|
export function FloatingEmojis() {
|
|
return (
|
|
<div className="pointer-events-none absolute inset-0 overflow-hidden">
|
|
{POSITIONS.map((pos, i) => (
|
|
<span
|
|
key={i}
|
|
className={`absolute select-none opacity-[0.15] ${pos.size}`}
|
|
style={{
|
|
left: pos.left,
|
|
top: pos.top,
|
|
animation: `bounce-gentle ${4 + (i % 3)}s ease-in-out infinite`,
|
|
animationDelay: `${pos.delay}s`,
|
|
}}
|
|
>
|
|
{FLOATING_EMOJIS[i]}
|
|
</span>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|