"use client"; /* eslint-disable @next/next/no-img-element -- portable registry components do not depend on next/image */ import type { HTMLAttributes } from "react"; import { useState } from "react"; import { motion, useReducedMotion } from "motion/react"; type ApertureRevealCardProps = HTMLAttributes & { src: string; alt: string; width: number; height: number; title: string; description: string; href: string; linkLabel?: string; reducedMotion?: boolean; }; export function ApertureRevealCard({ src, alt, width, height, title, description, href, linkLabel = "Open case study", reducedMotion, className = "", onMouseEnter, onMouseLeave, onFocusCapture, onBlurCapture, ...props }: ApertureRevealCardProps) { const systemReducedMotion = useReducedMotion(); const reduceMotion = Boolean(reducedMotion || systemReducedMotion); const [revealed, setRevealed] = useState(false); const closed = reduceMotion ? { opacity: 0 } : { clipPath: "circle(0% at 82% 18%)", opacity: 0 }; const open = reduceMotion ? { opacity: 1 } : { clipPath: "circle(125% at 82% 18%)", opacity: 1 }; return (

{ setRevealed(true); onMouseEnter?.(event); }} onMouseLeave={(event) => { setRevealed(false); onMouseLeave?.(event); }} onFocusCapture={(event) => { setRevealed(true); onFocusCapture?.(event); }} onBlurCapture={(event) => { if (!event.currentTarget.contains(event.relatedTarget)) setRevealed(false); onBlurCapture?.(event); }} className={"group relative isolate min-h-80 overflow-hidden rounded-[1.75rem] bg-[#101412] text-white " + className} {...props} > {alt}

); }

Moving a 60-component library to a registry

Moving a 60-component library to a registry