Hero267: Planet Horizon Hero

A centered hero over the orb-gradient component: a huge gradient planet sits mostly below the frame so only its lit top arc shows, like a horizon seen from orbit, with its atmosphere glowing up into the page background behind the copy.

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

Base UI flavor

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

This installs the block to components/beste/block/hero267.tsx plus the orb-gradient background and the button23 button it uses.

Quick start

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

import { Hero267, hero267Demo } from "@/components/beste/block/hero267";

export default function Page() {
  return <Hero267 {...hero267Demo} />;
}

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

import { Hero267 } from "@/components/beste/block/hero267";

export default function Page() {
  return (
    <Hero267
      eyebrow="Halo Radio, broadcasting live from Reykjavík"
      heading="Music for the edge of the world."
      description="Round-the-clock ambient radio with night sets from Hania Rani and Jon Hopkins."
      button={{ label: "Tune in now", href: "/listen" }}
      orb={{
        colors: ["#0b1a5c", "#2f3fe0", "#7a3cff", "#e04fd0", "#ff7aa8", "#35d6c8"],
        baseColor: "var(--background)",
        size: 2.8,
        positionY: 1.92,
        lightAngle: 90,
      }}
    />
  );
}

Props

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

Behavior notes

• The horizon comes from the orb's own props: size: 2.8 with positionY: 1.92 puts the planet's top edge near the middle of the frame, and lightAngle: 90 lights it from above so the rim and the atmosphere glow along the arc. Adjust positionY to raise or lower the horizon.
• The copy sits in the upper half with bottom padding of 46svh, so it stays above the arc on tall and short screens.
• Text and the button use theme tokens (foreground, primary), and the demo baseColor is var(--background), so the space around the planet follows light and dark mode while the planet colors stay fixed. The section background follows orb.baseColor (or var(--background)) so nothing flashes before the canvas draws.
• On load the planet rises softly into place over 2.4 seconds while the copy rises in after it.
• With interactive on, the light and the turn of the planet lean toward the cursor.
• The component pauses through an IntersectionObserver and on hidden tabs and respects prefers-reduced-motion; the copy then renders without its rise.
• The section fills at least max(640px, 100svh - 78px).