Canvas Text

A headline that rasterizes text into canvas particles which spin as a loading ring before slowly resolving into the letterforms, with optional pointer-magnetism and idle drift.

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

import CanvasText from "@/components/ui/canvas-text";

export default function Example() {
  return (
    <CanvasText
      text="Wensity"
      fontSize={72}
      density={2}
      scatter={64}
      loadDuration={1}
      morphDuration={1.4}
      magnetic={0.45}
      className="h-[200px]"
    />
  );
}