Hero Recursive Type

Heroes 19

About

A giant wordmark hero rendered on canvas where each lit letterform cell is subdivided and filled with real readable filler text, so the headline reads as one word from afar and as smaller words up close, with the cursor acting as a magnifying lens over the text.

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

Code

How Hero Recursive Type is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { NestedSlug } from "@/components/ui/hero-recursive-type";

export default function HeroRecursiveTypeDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background px-6">
      <NestedSlug
        headline="BUILD"
        filler="Ship faster with components made for real products. Ship faster with components made for real products. "
        lensRadius={130}
        className="max-w-5xl"
      />
    </div>
  );
}