Riso Registration

"use client";

import { RisoRegistrationBackground } from "@/components/ui/riso-registration";

export default function RisoRegistrationDemo() {
  return (
    <div className="relative w-full overflow-hidden rounded-2xl">
      <RisoRegistrationBackground
        className="absolute inset-0"
        density={1}
        intensity={1}
        speed={1}
        safeArea={{ x: 0.06, y: 0.24, w: 0.6, h: 0.52 }}
      />

      <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">
          Two plates, never quite in register.
        </h2>
        <p className="max-w-sm text-sm text-white/75">
          Halftone ink plates drift toward and past alignment on independent
          cycles. Your headline sits in a safe area that stays crisp.
        </p>
      </div>
    </div>
  );
}