Hero203: Particle Type Hero

A full-height hero whose headline is drawn by text21 as thousands of Canvas 2D particles that fly into the letters, scatter and swirl away from the cursor and shimmer at rest, with an eyebrow above and an intro, a Turn Arrow block button and an underline link rising in below.

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/hero203?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/hero203.tsx plus the text21 particle type, the button24 Turn Arrow button and the button2 underline link it uses.

Quick start

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

import { Hero203, hero203Demo } from "@/components/beste/block/hero203";

export default function Page() {
  return <Hero203 {...hero203Demo} />;
}

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

import { Hero203 } from "@/components/beste/block/hero203";

export default function Page() {
  return (
    <Hero203
      eyebrow="Halden Type Foundry"
      heading="Every letter, loose."
      description="Drift is a variable grotesk drawn in 9 weights and cut for screens that never sit still."
      buttons={[
        { label: "Try the specimen", href: "/specimen" },
        { label: "License Drift", href: "/license" },
      ]}
    />
  );
}

Props

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

Behavior notes

• The headline is Text21 with its defaults: particles take currentColor at rest and var(--primary) while moving, react within 160px of the cursor, and a slow invisible pointer keeps them moving on touch screens.
• The real heading text stays in the h1 and is made transparent only once the particles are ready, so screen readers, search and the first paint all get the words; the canvas is aria-hidden.
• The particle loop pauses when the headline is offscreen or the tab is hidden. With reduced motion the particles are placed straight into the letters and stay still.
• The section is at least 640px or the viewport minus 78px tall; the headline area grows to fill the space and sits at its bottom.
• The eyebrow fades up on mount, the intro follows at 0.9s and the buttons at 1.1s, leaving time for the particles to land; reduced motion shows them in place.
• The headline sets at 20vw, 14vw from md and caps at 13rem from xl.