50: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"] 51: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"] 52:T2c0e,"use client" import { useId, useRef, useState } from "react" import type { ComponentProps, PointerEvent } from "react" import { animate, motion, useMotionValue, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" // 320x424 pocket with a 120px dog-ear cut from the top-right corner. const POCKET_PATH = "M12 0H196.69A8 8 0 0 1 202.34 2.34L317.66 117.66A8 8 0 0 1 320 123.31V408A16 16 0 0 1 304 424H16A16 16 0 0 1 0 408V12A12 12 0 0 1 12 0Z" // The dog-ear folded down onto the pocket, mirroring the cut. const FLAP_PATH = "M0 4.83V104A16 16 0 0 0 16 120H115.17A2 2 0 0 0 116.59 116.59L3.41 3.41A2 2 0 0 0 0 4.83Z" // Open along the top and the upper right side, where the flap sits. const STITCH_PATH = "M10 8V414H310V328" // 150x120 image icon; even-odd cuts the sky out of the frame and mountains. const IMAGE_ICON_PATH = "M15.5 0H134.5A15.5 15.5 0 0 1 150 15.5V104.5A15.5 15.5 0 0 1 134.5 120H15.5A15.5 15.5 0 0 1 0 104.5V15.5A15.5 15.5 0 0 1 15.5 0Z" + "M7 95V15.5A8.5 8.5 0 0 1 15.5 7H134.5A8.5 8.5 0 0 1 143 15.5V98L101.03 57.37Q96 52.5 90.45 56.76L59.34 80.63Q53 85.5 46.27 81.17L37.05 75.25Q32 72 27.58 76.06Z" /** Card width the pull distances below are measured against (px). */ const CARD_WIDTH = 240 /** How far a card follows the pointer 1:1 before it starts to resist (px). */ const MAX_PULL = 220 type DragState = { card: number pointerId: number startX: number startY: number startOffset: number angle: number scale: number } // Overshoot shrinks as it grows and never exceeds `dimension`. function rubberBand(overshoot: number, dimension: number) { return (overshoot * dimension * 0.55) / (dimension + 0.55 * overshoot) } // Tracking stays 1:1; only the limits follow the rendered size. function resistPull(offset: number, scale: number) { const maxPull = MAX_PULL * scale if (offset < -maxPull) { return -maxPull - rubberBand(-maxPull - offset, 80 * scale) } // The pocket has a bottom, so pushing a card in barely moves it. if (offset > 0) { return rubberBand(offset, 24 * scale) } return offset } export function JpgCardHolder({ className, onPointerEnter, onPointerLeave, onPointerDown, onClick, ...props }: ComponentProps<"div">) { const grainId = useId() const shouldReduceMotion = useReducedMotion() // Each card's travel along its own tilt: negative is out of the pocket. const backOffset = useMotionValue(0) const frontOffset = useMotionValue(0) const offsets = [backOffset, frontOffset] const [isPeeking, setIsPeeking] = useState(false) const [draggingCard, setDraggingCard] = useState(null) const dragRef = useRef(null) const pointerTypeRef = useRef("") function handleCardPointerDown( card: number, event: PointerEvent ) { // Touch scrolls the page instead; a tap on the root peeks. if (event.pointerType === "touch" || event.button !== 0) return event.currentTarget.setPointerCapture(event.pointerId) // Catches a card that is still springing back. offsets[card].stop() dragRef.current = { card, pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, startOffset: offsets[card].get(), // The tilt lives in the card's `rotate-*` class. angle: (parseFloat(getComputedStyle(event.currentTarget).rotate) || 0) * (Math.PI / 180), // Layout width, so the rotation doesn't inflate it. scale: event.currentTarget.offsetWidth / CARD_WIDTH, } setDraggingCard(card) } function handleCardPointerMove(event: PointerEvent) { const drag = dragRef.current if (!drag || drag.pointerId !== event.pointerId) return // Project the pointer's travel onto the card's tilted axis. const along = (event.clientY - drag.startY) * Math.cos(drag.angle) - (event.clientX - drag.startX) * Math.sin(drag.angle) offsets[drag.card].set(resistPull(drag.startOffset + along, drag.scale)) } function handleCardPointerUp(event: PointerEvent) { const drag = dragRef.current if (!drag || drag.pointerId !== event.pointerId) return dragRef.current = null setDraggingCard(null) animate( offsets[drag.card], 0, shouldReduceMotion ? { duration: 0.15, ease: "easeOut" } : { type: "spring", visualDuration: 0.35, bounce: 0.1 } ) } function getCardProps(card: number) { return { "data-dragging": draggingCard === card || undefined, style: { y: offsets[card] }, onPointerDown: (event: PointerEvent) => handleCardPointerDown(card, event), onPointerMove: handleCardPointerMove, onPointerUp: handleCardPointerUp, onPointerCancel: handleCardPointerUp, } } const foil = ( <> JPG ) return (

{ onPointerEnter?.(event) if (event.pointerType !== "touch") setIsPeeking(true) }} onPointerLeave={(event) => { onPointerLeave?.(event) // Keep peeking while a dragged card is outside the root. if (event.pointerType !== "touch" && !dragRef.current) { setIsPeeking(false) } }} onPointerDown={(event) => { onPointerDown?.(event) pointerTypeRef.current = event.pointerType }} onClick={(event) => { onClick?.(event) if (pointerTypeRef.current === "touch") setIsPeeking((value) => !value) }} {...props} > {/* Every length inside is a spacing step, so this scales with the root. Card radius is `cqw`: lint folds a spacing radius into `rounded-xl`. */}

{/* The outer box drags; the inner card peeks, so the hit area stays put. */}

{/* Static shadows crossfade, so the lift animates only opacity. */} {/* Rotates about the crease: the 1 1 0 axis from the top-left corner. */}

) } 4f:["$","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","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@ncdai","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/components/jpg-card-holder/jpg-card-holder.tsx","content":"$52","type":"registry:component","target":"@components/jpg-card-holder.tsx"}],"className":"h-[70svh] min-h-80"}]]}]