Hero234: Letterpress Hero

A print-shop hero where a Letterpress WebGL sheet presses the headline into cotton paper one word at a time under a raking light that follows the cursor, then slides away and sets the next sheet in a new ink and arrangement, framed by an eyebrow and a ruled row with an intro, a Turn Arrow 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/hero234?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/hero234.tsx plus the letterpress component and the button24 and button2 buttons it uses.

Quick start

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

import { Hero234, hero234Demo } from "@/components/beste/block/hero234";

export default function Page() {
  return <Hero234 {...hero234Demo} />;
}

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

import { Hero234 } from "@/components/beste/block/hero234";

export default function Page() {
  return (
    <Hero234
      eyebrow="Linden & Vale Press"
      heading="Words you can feel with a fingertip."
      description="A small letterpress shop printing wedding suites and calling cards on cotton stock."
      buttons={[
        { label: "Start a print job", href: "https://beste.co" },
        { label: "See the type cases", href: "/type" },
      ]}
      press={{
        lines: ["Words you", "can feel with", "a fingertip."],
        paperColor: "var(--background)",
        inkColors: ["var(--foreground)", "var(--primary)", "var(--muted-foreground)"],
        arrangements: ["left", "stagger", "center"],
        area: { top: 0.16, right: 0.06, bottom: 0.3, left: 0.06 },
      }}
    />
  );
}

Props

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

Behavior notes

• The sheet sets press.lines; when those are missing it sets [heading], and with neither the press is skipped. Keep heading in sync with lines, since only heading reaches screen readers.
• The press fills the section and sets type in the section's serif font at text-7xl, md:text-9xl and lg:text-[11rem]. The demo's area keeps the bottom 30% clear for the ruled row.
• Each sheet cycles through inkColors and arrangements ("left", "center" or "stagger"), pressing a word every interval seconds and resting hold seconds before sliding away.
• The section background is set inline to press.paperColor (falling back to var(--background)) and the copy uses text-foreground and text-muted-foreground. The demo paper and inks are theme tokens, so the sheet recolors with the theme; pass hex values to pin a fixed stock.
• The press pauses offscreen and in hidden tabs. With reduced motion the composition is drawn finished and the copy appears without rising; without WebGL the lines render as plain text in the first ink.