MenuClose

Hero Contour — React Hero Section

A sunlit topographic print. Seed your own landscape and let the paper ridges rise around your pointer.

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

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