Hero Burin Hatch

Heroes 68

About

A two-column hero section with an animated Canvas 2D copperplate engraving of a sphere whose hatch-line width swells with shadow and vanishes to blank paper in the light, following the pointer as a moving light source.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hero Burin Hatch to your project and fits it to your theme.

Code

How Hero Burin Hatch is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { BurinHatch } from "@/components/ui/hero-burin-hatch";

export default function HeroBurinHatchDemo() {
  return (
    <BurinHatch
      eyebrow="INTRODUCING"
      headline={["Cut the light", "in"]}
      subcopy="An engraved sphere rendered in pure hatch lines — width swells with shadow and vanishes to blank paper in the light."
      primaryCta={{ label: "Get started", href: "#" }}
      secondaryCta={{ label: "Learn more", href: "#" }}
      className="h-screen w-full"
    />
  );
}