Hero239: Anamorphic Type Hero

A centered full-height hero whose headline is cut by anamorphic-type into thousands of fragments scattered in depth, drifting as an abstract constellation while the camera orbits and snapping into readable words from the one true viewpoint every few seconds, framed by an eyebrow, an intro, a Turn Arrow block button and an underline link.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/hero239?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/hero239?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hero239.tsx plus the anamorphic-type component, the button24 Turn Arrow button and the button2 underline link it uses.

Quick start

The installed file exports hero239Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.

import { Hero239, hero239Demo } from "@/components/beste/block/hero239";

export default function Page() {
  return <Hero239 {...hero239Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Hero239 } from "@/components/beste/block/hero239";

export default function Page() {
  return (
    <Hero239
      eyebrow="Oblique Works, spatial installations"
      heading="It only makes sense from here."
      description="Room-scale installations that come together from one spot and fall apart from every other."
      buttons={[
        { label: "Plan an installation", href: "/commission" },
        { label: "See the works", href: "/works" },
      ]}
      anamorph={{
        density: 0.5,
        depth: 0.55,
        orbit: 0.5,
        interval: 6,
        hold: 2.2,
        fragment: "dots",
        color: "currentColor",
        accentColor: "var(--primary)",
        accent: 0.08,
      }}
    />
  );
}

Props

type ActionButton = {
  label: string;
  href: string;
};

Behavior notes

• Every interval seconds the camera eases into the true angle, the words hold in focus for hold seconds and then fall apart again.
• With interactive on, the cursor steers the camera, and the center of the headline is the true viewpoint.
• color: "currentColor" makes the fragments follow the text color, so the demo follows the theme, while accent sets the share drawn in accentColor.
• The real heading text stays in the page for screen readers and search; the fragment count adapts to the device and the effect pauses offscreen.
• With reduced motion the component shows the resolved words and the copy skips its rise-in.
• The heading block only renders when heading is set, capped at max-w-5xl.