Copperplate Hatch

"use client";

import { CopperplateHatch } from "@/components/ui/copperplate-hatch";

export default function CopperplateHatchDemo() {
  return (
    <div className="relative w-full overflow-hidden rounded-2xl">
      <CopperplateHatch
        className="absolute inset-0"
        density={1}
        intensity={1}
        speed={1}
        interactive
        safeArea={{ x: 0.06, y: 0.22, w: 0.58, h: 0.56 }}
      />

      <div className="relative flex min-h-[420px] flex-col items-start justify-center gap-4 px-10">
        <span className="font-mono text-[11px] uppercase tracking-[0.18em] text-white/70">
          Ambient background
        </span>
        <h2 className="max-w-md text-4xl font-semibold tracking-tight text-white">
          Shading built from strokes, not gradients.
        </h2>
        <p className="max-w-sm text-sm text-white/75">
          Crosshatched ink layers accumulate tone around the pointer and thin to
          blank paper behind your headline — like a hand-worked engraving plate.
        </p>
      </div>
    </div>
  );
}