Card footer cutout background

52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T16c4,"use client" import { useId, useState } from "react" import Image from "next/image" import { ArrowRight } from "lucide-react" import { motion, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" const PATH_IDLE = "M670 0H0V91C0 102.046 8.9543 111 20 111H518.641C526.216 111 533.14 106.721 536.529 99.9469L570.988 31.0531C574.377 24.2789 581.301 20 588.875 20H650C661.046 20 670 11.0457 670 0Z" const PATH_HOVER = "M670 0H0V91C0 102.046 8.9543 111 20 111H518.641C526.216 111 533.14 111 536.529 111L570.988 111C574.377 111 581.301 111 588.875 111H650C661.046 111 670 102.046 670 91Z" const SURFACE = "#f0eee9" /** drop-shadow follows painted alpha (organic cutout); box-shadow only follows the border box. */ const SILHOUETTE_SHADOW = "drop-shadow(0px 0px 0px rgba(0,0,0,0.06)) drop-shadow(0px 1px 2px -1px rgba(0,0,0,0.06)) drop-shadow(0px 2px 4px 0px rgba(0,0,0,0.04))" const SILHOUETTE_SHADOW_HOVER = "drop-shadow(0px 0px 0px rgba(0,0,0,0.08)) drop-shadow(0px 2px 4px -1px rgba(0,0,0,0.08)) drop-shadow(0px 4px 8px 0px rgba(0,0,0,0.06))" interface OrganicCardSmallProps { image: string imageAlt?: string category: string date: string title: string href?: string className?: string /** Card body + band fill (defaults to stone) */ surfaceColor?: string } export function OrganicCardSmall({ image, imageAlt = "Card image", category, date, title, href = "#", className, surfaceColor = SURFACE, }: OrganicCardSmallProps) { const reduceMotion = useReducedMotion() const cutoutTitleId = useId() const [pointerOver, setPointerOver] = useState(false) const [focused, setFocused] = useState(false) /** Cutout + arrow read as “active” for pointer hover or keyboard focus (not only one). */ const interactiveActive = pointerOver || focused const pathTransition = reduceMotion ? { duration: 0.12, ease: [0.23, 1, 0.32, 1] as const } : { type: "spring" as const, duration: 0.38, bounce: 0 } return ( setFocused(false)} onFocus={() => setFocused(true)} onMouseEnter={() => setPointerOver(true)} onMouseLeave={() => setPointerOver(false)} transition={{ type: "spring", duration: 0.28, bounce: 0 }} whileTap={reduceMotion ? undefined : { scale: 0.98 }} > {/* Shadow on this shell only — filter drop-shadow follows opaque pixels (incl. cutout curve), not a rounded rect */}

{category} {" — "} {date}

{title}

) } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L52",null,{"namespace":"@cult-ui","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/ui/organic-card-small.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]