Hero208: Northern Lights Hero

A full-height night hero over the aurora-sky component: folding aurora curtains, a starfield and 2 mountain ridges fade in over 2.4s, with a semibold headline over the ridges and a ruled row below that pairs the intro with an Arrow Pill 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/hero208?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/hero208.tsx plus the aurora-sky background and the button23 and button2 buttons it uses.

Quick start

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

import { Hero208, hero208Demo } from "@/components/beste/block/hero208";

export default function Page() {
  return <Hero208 {...hero208Demo} />;
}

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

import { Hero208 } from "@/components/beste/block/hero208";

export default function Page() {
  return (
    <Hero208
      eyebrow="Kaamos Fell Lodge, Finnish Lapland"
      heading="Some nights the sky rehearses in green."
      description="Twelve glass-roofed cabins on a quiet fell above the Arctic Circle, with a resident astronomer and a wood sauna."
      buttons={[
        { label: "Reserve a glass cabin", href: "/reserve" },
        { label: "Read tonight's sky report", href: "/sky" },
      ]}
      sky={{
        skyColor: "#020409",
        lowColor: "#33ff94",
        highColor: "#2e80ff",
        curtains: 4,
        mountains: true,
        mountainColor: "#010204",
      }}
    />
  );
}

Props

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

Behavior notes

• The section is a fixed night palette (black ground, white text) regardless of the theme, because the aurora is only readable on a dark sky, with a gradient to black over the bottom half behind the copy. The Arrow Pill uses the white light tone for the same reason.
• AuroraSky renders in WebGL, leans its curtains with the cursor like wind, pauses through an IntersectionObserver and on hidden tabs, and holds a still sky under prefers-reduced-motion.
• Without WebGL, the component falls back to a CSS radial and linear gradient built from lowColor, highColor, skyColor and horizonColor.
• With reduced motion the sky and the copy appear without their fade and rise; otherwise the copy rises 24px with delays from 0.3s to 0.7s.
• The section fills at least max(640px, 100svh - 78px) and pins the copy to the bottom with mt-auto.
• Only the first button gets the pill; pass one button for a single CTA or more for extra underline links.