Hero Contour — React Hero Section
A sunlit topographic print. Seed your own landscape and let the paper ridges rise around your pointer.

Starting live preview
Usage
import { HeroContour } from "@/components/HeroContour";
export function Hero() {
return <HeroContour title={"Find your\nown way."} interactive primaryCta={{ label: "Explore", href: "/work" }}
{...{
title: "Find your\nown way.",
subtitle: "A different perspective changes everything. Step off the familiar path.",
interactive: true,
color: "#ed5b31",
background: "#eeeade",
seed: 17,
relief: 1
}}
/>;
}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