Hero258: Star Trails Hero

A full-bleed night hero over a StarTrails WebGL long exposure where colored stars sweep arcs around a pole above the frame, the exposure building over the first seconds, above ridges and a forest line that shift with the cursor, with a light headline, an intro, an Arrow Pill and an underline link rising in 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/hero258?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/hero258.tsx plus the star-trails background and the button23 and button2 buttons it uses.

Quick start

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

import { Hero258, hero258Demo } from "@/components/beste/block/hero258";

export default function Page() {
  return <Hero258 {...hero258Demo} />;
}

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

import { Hero258 } from "@/components/beste/block/hero258";

export default function Page() {
  return (
    <Hero258
      eyebrow="Kelda Lodge, a dark-sky retreat"
      heading="Stay up for the sky."
      description="12 cabins, no street lights for 40 miles and a guide on the terrace every clear night."
      buttons={[
        { label: "Check clear nights", href: "https://beste.co" },
        { label: "See the cabins", href: "/cabins" },
      ]}
      sky={{
        skyColor: "#03050b",
        horizonColor: "#b0643a",
        landColor: "#010203",
        poleX: 0.66,
        poleY: -0.12,
        silhouette: "forest",
      }}
    />
  );
}

Props

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

type Silhouette = "forest" | "ridges" | "none";

Behavior notes

• The section is at least 640px tall and otherwise fills the viewport minus 78px. The copy sits at the bottom through mt-auto, over a black gradient on the lower 66%.
• The night sky is a fixed art ground, so it stays dark in both themes and the copy uses plain white ink (text-white, text-white/70) with a light Arrow Pill to stay readable on it.
• A negative poleY puts the pole above the frame, so the demo shows long arcs instead of full circles. silhouette picks the land line: "forest", "ridges" or "none".
• Passing sky.progress (a number or anything with a get(), such as a scroll MotionValue) drives the exposure from outside instead of by time.
• A CSS gradient of the same night shows while the canvas warms up and stays as the fallback without WebGL. The sky pauses offscreen and in hidden tabs.
• Copy rises in with delays from 0.3s to 0.6s. With reduced motion it appears in place and the sky draws a still frame.