Hero247: Type Window Hero

A pinned hero where a giant word is cut out of the page surface by the type-window component as a window onto a full-bleed photo, and scrolling flies the camera into one letter on an exponential zoom until the landscape fills the frame; then a headline, an intro, an Arrow Pill and an underline link settle in over a scrim at the lower left.

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

Base UI flavor

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

This installs the block to components/beste/block/hero247.tsx plus the type-window component and the button23 and button2 buttons it uses.

Quick start

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

import { Hero247, hero247Demo } from "@/components/beste/block/hero247";

export default function Page() {
  return <Hero247 {...hero247Demo} />;
}

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

import { Hero247 } from "@/components/beste/block/hero247";

export default function Page() {
  return (
    <Hero247
      eyebrow="Tessel Peak, guided expeditions since 1998"
      heading="Go past the edge of the map."
      description="Small-group treks through the Dolomites, Patagonia and the Lofoten coast."
      buttons={[
        { label: "Plan an expedition", href: "/plan" },
        { label: "See the routes", href: "/routes" },
      ]}
      typeWindow={{
        word: "Horizon",
        imageSrc: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=2400&q=80",
        imageAlt: "A mountain valley and lake at first light",
        surface: "background",
        fontWeight: 800,
        fit: 0.9,
        depth: 0.5,
      }}
    />
  );
}

Props

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

Behavior notes

• The section is 260svh tall with a sticky stage; scroll progress from 0.04 to 0.7 drives the flight from 0 to 1 with autoplay forced off. The camera flies into the middle letter unless letter is set.
• The word is drawn as glyph outlines on a canvas at device resolution each frame, and the photo moves toward the camera more slowly than the word for depth.
• The eyebrow hides once progress passes 0.1 and returns below 0.05; the scrim and copy appear above 0.72 and leave below 0.64. The gaps keep either state from flickering at its threshold.
• surface: "foreground" cuts the word from a dark surface and switches the eyebrow to text-background/70; the closing copy sits on the photo, so it stays white over a black scrim in every theme.
• The window only renders when typeWindow is set; with interactive on, the photo drifts gently with the pointer.
• With reduced motion the section is one screen tall, the window shows fully open at progress 1, the eyebrow is dropped and the copy is shown at once.