Dot Transition

Component 33

About

Canvas 2D dot grid that grows into a silhouette mask, holds, then shrinks away before cycling to the next image. Click advances the cycle early, respects prefers-reduced-motion, zero dependencies.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dot Transition to your project and fits it to your theme.

Code

How Dot Transition is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}