Orbit Hero

When to use

• Space, travel, climate or data products where a live globe earns its weight
• A launch page that can afford a WebGL scene for its first impression

When not to use

• Pages that must be light on low-end phones — the Earth is a live WebGL render
• Light-themed sites; the block is built for a dark sky

Installation

Add Orbit Hero with the shadcn CLI — it writes the files into components/blocx/ and installs what they import — or copy it in by hand.

Requires React 19 · Next.js (it loads its fonts with next/font) · motion.

pnpm dlx shadcn@latest add "https://www.pinui.xyz/r/blocx/orbit-hero.json"

Usage

import OrbitHero from "@/components/blocx/OrbitHero";

export default function Page() {
  return <OrbitHero />;
}

API reference

OrbitHero

Takes no props — drop it in as it is.

The headline, nav links and button label are written in OrbitHero.tsx; the Earth's textures are the images in /blocx/orbit-hero, loaded by orbit-globe.ts.

Accessibility

• The globe is aria-hidden; the section is labelled by its headline
• The bracket nav marks the current link with aria-current, and the mobile menu reports aria-expanded
• Escape closes the mobile menu

Motion

• The headline blurs in word by word while the Earth turns slowly at the bottom edge
• The bracket marks glide between nav links on one shared spring

Responsive behavior

• The bracket nav becomes a menu button and sheet on small screens
• The globe is sized to the viewport so it always crests the bottom edge