Hero215: Warp Drive Hero

A dark full-height hero over the warp-field background, a Canvas 2D starfield streaming from a vanishing point that leans toward the cursor; hovering or focusing the primary Arrow Pill eases the stars into hyperspace streaks with a tunnel glow, beside a large light headline, an intro 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/hero215?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/hero215.tsx plus the warp-field background and the button23 and button2 buttons it uses.

Quick start

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

import { Hero215, hero215Demo } from "@/components/beste/block/hero215";

export default function Page() {
  return <Hero215 {...hero215Demo} />;
}

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

import { Hero215 } from "@/components/beste/block/hero215";

export default function Page() {
  return (
    <Hero215
      eyebrow="Orbital flights from Kiruna, Sweden"
      heading="Leave the sky behind."
      description="Six passengers, three quiet orbits and a sunrise every 90 minutes."
      buttons={[
        { label: "Reserve a seat", href: "/reserve" },
        { label: "See the flight plan", href: "/flight-plan" },
      ]}
      stars={{
        spaceColor: "#04050a",
        starColor: "#ffffff",
        glowColor: "#96afff",
        density: 0.5,
        streaks: 0.5,
        horizon: 0.42,
        follow: 0.4,
      }}
    />
  );
}

Props

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

Behavior notes

• Pointer enter or keyboard focus on the first button sets warp to 1 and leaving or blurring sets it back to 0; the field eases between the two, so rapid toggling never jumps.
• The section background and the bottom gradient both use stars.spaceColor (default #04050a), so the page behind the canvas and the scrim always match the space color.
• Copy is fixed white on the dark field and does not follow the theme.
• The starfield adapts its star count to the device, pauses offscreen and holds a still field for reduced motion.
• The eyebrow, headline and the intro column rise in on mount at 0.1s, 0.25s and 0.45s; reduced motion shows them in place.
• The section is at least 640px or the viewport minus 78px tall, with the copy pushed to the bottom.