Hero204: Contour Terrain Hero

A full-height expedition hero over the contour-terrain component, a hill-shaded survey map with drifting contour lines tilted back into the distance. The eyebrow, a large headline and a side column with the intro and 2 Turn Arrow buttons sit in a background-colored haze across the top of the map.

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

Base UI flavor

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

This installs the block to components/beste/block/hero204.tsx plus the contour-terrain background and the button24 button it uses.

Quick start

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

import { Hero204, hero204Demo } from "@/components/beste/block/hero204";

export default function Page() {
  return <Hero204 {...hero204Demo} />;
}

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

import { Hero204 } from "@/components/beste/block/hero204";

export default function Page() {
  return (
    <Hero204
      eyebrow="Northline Expeditions"
      heading="Read the ground before you walk it."
      description="Small-party treks across the Wind River and Brooks ranges. 8 travelers per route, never more."
      buttons={[
        { label: "Plan an expedition", href: "/plan" },
        { label: "See the routes", href: "/routes" },
      ]}
      terrain={{
        inkColor: "var(--foreground)",
        paperColor: "var(--background)",
        accentColor: "var(--primary)",
        lines: 22,
        indexLines: true,
        tilt: 0.35,
      }}
    />
  );
}

Props

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

Behavior notes

• A bg-gradient-to-b from-background haze covers the top 60% of the section so the copy reads cleanly while the map stays visible below it.
• Large bottom padding (pb-72, md:pb-96) keeps the lower part of the section clear for the terrain.
• ContourTerrain renders in WebGL, swells its lines around the cursor, pauses through an IntersectionObserver and on hidden tabs, and holds a still frame under prefers-reduced-motion.
• If the WebGL program fails, the component shows a repeating radial CSS contour pattern tinted with inkColor.
• With theme variables as ink, paper and accent, as in the demo, the map follows light and dark mode.
• With reduced motion the copy renders in place; otherwise it rises 18px with delays up to 0.4s.