4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T2f85,"use client"; import { Dithering, type DitheringProps } from "@paper-design/shaders-react"; import { motion, useMotionValue, useReducedMotion, useSpring } from "motion/react"; import { useCallback, useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; export type DitherCreditCardColors = { accent?: string; background?: string; details?: string; foreground?: string; }; export type DitherCreditCardContent = { brandName?: string; cardNumber?: string; cardholder?: string; }; export type DitherCreditCardDither = { offsetX?: number; offsetY?: number; rotation?: number; scale?: number; shape?: DitheringProps["shape"]; size?: number; speed?: number; type?: DitheringProps["type"]; }; export type DitherCreditCardPhysicsMode = "tilt" | "magnetic" | "zero-gravity"; export type DitherCreditCardSpring = { bounce?: number; damping?: number; mass?: number; stiffness?: number; visualDuration?: number; }; export type DitherCreditCardPhysics = { glare?: number; lift?: number; magnetism?: number; mode?: DitherCreditCardPhysicsMode; perspective?: number; scale?: number; spring?: DitherCreditCardSpring; tilt?: number; }; export type DitherCreditCardProps = { ariaLabel?: string; className?: string; colors?: DitherCreditCardColors; content?: DitherCreditCardContent; dither?: DitherCreditCardDither; interactive?: boolean; physics?: DitherCreditCardPhysics; /** @deprecated Use `interactive` to enable or disable the complete physics system. */ tilt?: boolean; }; const CARD_DOTS = ["dot-1", "dot-2", "dot-3", "dot-4"]; const DEFAULT_PHYSICS = { glare: 0.28, lift: 8, magnetism: 14, mode: "tilt", perspective: 1200, scale: 1, spring: { bounce: 0.08, visualDuration: 0.32, }, tilt: 7, } satisfies Required; const DEFAULT_COLORS = { accent: "#ffc831", background: "#faa200", details: "#5f5f5f", foreground: "#ffffff", } satisfies Required; const DEFAULT_CONTENT = { brandName: "Skecher-ui", cardNumber: "4325 2535", cardholder: "@roohbuilds", } satisfies Required; const DEFAULT_DITHER = { offsetX: 0.6, offsetY: 0.46, rotation: 8, scale: 2.52, shape: "wave", size: 2, speed: 0.26, type: "8x8", } satisfies Required; const SHADER_STYLE = { width: "100%", height: "100%" } as const; function resolveSpring(spring: DitherCreditCardSpring) { if (spring.visualDuration !== undefined || spring.bounce !== undefined) { return { bounce: spring.bounce ?? 0, visualDuration: spring.visualDuration ?? 0.32, }; } return { damping: spring.damping ?? 22, mass: spring.mass ?? 0.8, stiffness: spring.stiffness ?? 180, }; } function useFinePointer() { const [hasFinePointer, setHasFinePointer] = useState(false); useEffect(() => { const query = window.matchMedia("(hover: hover) and (pointer: fine)"); const updatePointer = () => setHasFinePointer(query.matches); updatePointer(); query.addEventListener("change", updatePointer); return () => query.removeEventListener("change", updatePointer); }, []); return hasFinePointer; } function SkecherMark({ accent, foreground }: { accent: string; foreground: string }) { return ( ); } function VisaMark({ color }: { color: string }) { return ( ); } export function DitherCreditCard({ ariaLabel, className, colors, content, dither, interactive = true, physics, tilt = true, }: DitherCreditCardProps) { const shouldReduceMotion = useReducedMotion(); const hasFinePointer = useFinePointer(); const [isHovered, setIsHovered] = useState(false); const pointerBoundsRef = useRef(null); const rotateXTarget = useMotionValue(0); const rotateYTarget = useMotionValue(0); const xTarget = useMotionValue(0); const yTarget = useMotionValue(0); const scaleTarget = useMotionValue(1); const glareXTarget = useMotionValue(0); const glareYTarget = useMotionValue(0); const glareOpacityTarget = useMotionValue(0); const resolvedColors = { ...DEFAULT_COLORS, ...colors }; const resolvedContent = { ...DEFAULT_CONTENT, ...content }; const resolvedDither = { ...DEFAULT_DITHER, ...dither }; const resolvedPhysics = { ...DEFAULT_PHYSICS, ...physics, spring: { ...DEFAULT_PHYSICS.spring, ...physics?.spring }, }; const spring = resolveSpring(resolvedPhysics.spring); const rotateX = useSpring(rotateXTarget, spring); const rotateY = useSpring(rotateYTarget, spring); const x = useSpring(xTarget, spring); const y = useSpring(yTarget, spring); const scale = useSpring(scaleTarget, spring); const glareX = useSpring(glareXTarget, spring); const glareY = useSpring(glareYTarget, spring); const glareOpacity = useSpring(glareOpacityTarget, { bounce: 0, visualDuration: 0.2, }); const physicsEnabled = interactive && tilt && hasFinePointer && !shouldReduceMotion; const lastFourDigits = resolvedContent.cardNumber.replace(/\D/g, "").slice(-4); const resolvedAriaLabel = ariaLabel ?? `${resolvedContent.brandName} Visa card${lastFourDigits ? ` ending in ${lastFourDigits}` : ""}`; const resetPhysics = useCallback(() => { pointerBoundsRef.current = null; rotateXTarget.set(0); rotateYTarget.set(0); xTarget.set(0); yTarget.set(0); scaleTarget.set(1); glareXTarget.set(0); glareYTarget.set(0); glareOpacityTarget.set(0); }, [ glareOpacityTarget, glareXTarget, glareYTarget, rotateXTarget, rotateYTarget, scaleTarget, xTarget, yTarget, ]); useEffect(() => { if (!physicsEnabled) { setIsHovered(false); resetPhysics(); } }, [physicsEnabled, resetPhysics]); const handlePointerMove = useCallback( (event: React.PointerEvent) => { if (!physicsEnabled || event.pointerType !== "mouse") return; const bounds = pointerBoundsRef.current ?? event.currentTarget.getBoundingClientRect(); pointerBoundsRef.current = bounds; const normalizedX = Math.max( -1, Math.min(1, ((event.clientX - bounds.left) / bounds.width) * 2 - 1), ); const normalizedY = Math.max( -1, Math.min(1, ((event.clientY - bounds.top) / bounds.height) * 2 - 1), ); const mode = resolvedPhysics.mode; const rotationFactor = mode === "magnetic" ? 0.45 : 1; const magnetismFactor = mode === "tilt" ? 0 : mode === "zero-gravity" ? 1.35 : 1; const liftFactor = mode === "zero-gravity" ? 1.45 : 1; rotateXTarget.set(normalizedY * resolvedPhysics.tilt * -rotationFactor); rotateYTarget.set(normalizedX * resolvedPhysics.tilt * rotationFactor); xTarget.set(normalizedX * resolvedPhysics.magnetism * magnetismFactor); yTarget.set( normalizedY * resolvedPhysics.magnetism * magnetismFactor - resolvedPhysics.lift * liftFactor, ); glareXTarget.set(normalizedX * 88); glareYTarget.set(normalizedY * 56); }, [ glareXTarget, glareYTarget, physicsEnabled, resolvedPhysics.lift, resolvedPhysics.magnetism, resolvedPhysics.mode, resolvedPhysics.tilt, rotateXTarget, rotateYTarget, xTarget, yTarget, ], ); return ( { if (physicsEnabled && event.pointerType === "mouse") { pointerBoundsRef.current = event.currentTarget.getBoundingClientRect(); setIsHovered(true); const liftFactor = resolvedPhysics.mode === "zero-gravity" ? 1.45 : 1; yTarget.set(resolvedPhysics.lift * -liftFactor); scaleTarget.set(resolvedPhysics.scale); glareOpacityTarget.set(resolvedPhysics.glare); } }} onPointerLeave={() => { setIsHovered(false); resetPhysics(); }} onPointerMove={handlePointerMove} style={{ backgroundColor: resolvedColors.background, rotateX, rotateY, scale, transformPerspective: resolvedPhysics.perspective, willChange: isHovered ? "transform" : "auto", x, y, }} > ); } 4c:["$","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","@paper-design/shaders-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40paper-design%2Fshaders-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":"@paper-design/shaders-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"}]]}]}]]}],["$","$L4d",null,{"namespace":"@skecher-ui","registryDependencies":[]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ui-components/dither-credit-card.tsx","content":"$4f","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]