Hero Globe — React Hero Section
Drop-in split hero: copy on the left, the dot-matrix cobe planet (the globe behind vercel.com) glowing on the right.
Usage
import { HeroGlobe } from "@/components/HeroGlobe";
export function Landing() {
return (
<section style={{ height: "max(640px, 100svh)" }}>
<HeroGlobe
title="Your next big idea."
subtitle="Replace this with your own story."
primaryCta={{ label: "Get started", href: "/start" }}
secondaryCta={null}
interactive
{...{
interactive: true,
title: "Make something memorable.",
subtitle: "Your story. Your words. A little atmosphere from us."
}}
/>
</section>
);
}Implementation notes & API
Purpose: drop-in hero section — a full first screen with real, selectable DOM text (split layout) over the cobe dot-matrix globe (MIT, the globe behind vercel.com). Copy it, ship it. Mount: give the parent an explicit height (e.g. height: 100dvh or a min-height); the shell fills it and clamps its own type with container queries. Props: eyebrow, title (\n breaks lines), subtitle, primaryCta, secondaryCta, scheme ("dark" | "light"), spin (rad/s, 0 holds the authored view), mapSamples, baseColor/markerColor/glowColor (0-1 rgb tuples), markers ([lat, lng, size]), globeProps (escape hatch merged into cobe update()). Interaction: the globe auto-rotates via a rAF loop driving cobe.update(); text and CTAs are plain DOM (WCAG AA scrim, screen-reader readable). Guardrails: requires the cobe peer (npm install cobe); the globe loads client-side only (SSR renders an inert canvas); prefers-reduced-motion renders one static frame; no texture or network assets — the dot matrix is procedural.
| Property | Type | Notes / default |
|---|---|---|
title / subtitle | ReactNode | Your content; named heroes include example copy |
eyebrow | string | Optional short label |
primaryCta / secondaryCta | string | HeroCta | null | { label, href } or { label, onClick }; null hides the action |
children | ReactNode | Replaces the entire default content stack |
interactive | boolean | false in the library; enabled in this preview |
scheme | "dark" | "light" | dark |
className / style | string / CSSProperties | Applied to the hero section |
fallback | ReactNode | Content shown if the background renderer is unavailable |