MenuClose

Hero Eclipse — React Hero Section

An astronomical instrument in warm copper. Move the pointer to shift the eclipse and rotate its engraved dial.

View source
PreviewReact
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.

PropertyTypeNotes / default
title / subtitleReactNodeYour content; named heroes include example copy
eyebrowstringOptional short label
primaryCta / secondaryCtastring | HeroCta | null{ label, href } or { label, onClick }; null hides the action
childrenReactNodeReplaces the entire default content stack
interactivebooleanfalse in the library; enabled in this preview
className / stylestring / CSSPropertiesApplied to the hero section
View source on GitHubFree for commercial projects · MIT