Hero Eclipse — React Hero Section
An astronomical instrument in warm copper. Move the pointer to shift the eclipse and rotate its engraved dial.

Starting live preview
Usage
import { HeroEclipse } from "@/components/HeroEclipse";
export function Hero() {
return <HeroEclipse title={"A rare\nalignment."} interactive primaryCta={{ label: "Explore", href: "/work" }}
{...{
title: "A rare\nalignment.",
subtitle: "For ideas that only come around once. Make this moment yours.",
interactive: true,
color: "#e9ad73",
background: "#171916",
parallax: 0.7
}}
/>;
}Implementation notes & API
Original SVG/CSS artwork. No WebGPU, canvas, external images or animation library. Pointer motion settles and sleeps; reduced-motion and touch retain static artwork. Example copy is replaceable; CTA links and buttons remain native. Set interactive to enable motion. Mobile reflows the illustration below the text.
| 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 |
className / style | string / CSSProperties | Applied to the hero section |
View source on GitHubFree for commercial projects · MIT