"use client";
import DotTransition from "@/components/ui/dot-transition";
// Any white silhouette on transparent works, not just letters — swapping in
// a few icon shapes here to show the range beyond the component's own
// letter-mark default.
const toDataUri = (svg: string) => `data:image/svg+xml,${encodeURIComponent(svg)}`;
const mark = (path: string) =>
toDataUri(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="${path}" fill="#fff"/></svg>`);
const icons = [
mark("M50 5 L61 38 L97 38 L68 59 L79 92 L50 71 L21 92 L32 59 L3 38 L39 38 Z"),
mark(
"M50 90 C22 68 6 48 6 29 C6 13 18 3 32 3 C42 3 48 9 50 17 C52 9 58 3 68 3 C82 3 94 13 94 29 C94 48 78 68 50 90 Z",
),
mark("M55 2 L14 56 L42 56 L37 98 L88 40 L58 40 Z"),
mark("M50 6 A44 44 0 1 1 49.99 6 Z"),
];
export default function DotTransitionDemo() {
return (
<div className="relative h-screen w-full overflow-hidden bg-black">
<DotTransition images={icons} dotColor="#ffb454" backgroundColor="#0a0a0a" spacing={22} />
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 p-[2vw] text-white">
<p className="text-xs uppercase tracking-[0.2em] text-white/50">Canvas · Dot Grid</p>
<h1 className="mt-1 text-2xl font-medium sm:text-3xl">Dot Transition</h1>
<p className="mt-1 max-w-sm text-sm leading-relaxed text-white/60">
A resting grid grows into each silhouette, holds, then drains away. Click to advance early.
</p>
</div>
</div>
);
}
