50: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"] 51:T2d51,'use client'; import React, { useEffect, useRef } from 'react'; import './BounceCards.css'; export type BounceCardImage = string | { src: string; alt?: string }; export type BounceCardsProps = { images?: BounceCardImage[]; className?: string; style?: React.CSSProperties; containerWidth?: number; containerHeight?: number; cardSize?: number; spread?: number; rotation?: number; arc?: number; animationDelay?: number; animationStagger?: number; bounciness?: number; enableHover?: boolean; pushDistance?: number; hoverScale?: number; borderWidth?: number; borderColor?: string; radius?: number; shadow?: boolean; transformStyles?: string[]; onCardClick?: (index: number) => void; }; type Slot = { x: number; y: number; rotate: number }; type Body = { x: number; y: number; rotate: number; scale: number; vx: number; vy: number; vr: number; vs: number; born: number; }; const PATTERN = [1, 0.5, -0.3, -1, 0.2, 0.75, -0.6, 0.35, -0.85, 0.1]; const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value)); const parseTransform = (value: string | undefined): Slot | null => { if (typeof value !== 'string') return null; const rotate = value.match(/rotate$\s*(-?[\d.]+)deg\s*$/); const translate = value.match(/translate$\s*(-?[\d.]+)px(?:\s*,\s*(-?[\d.]+)px)?\s*$/); return { x: translate ? Number(translate[1]) : 0, y: translate && translate[2] ? Number(translate[2]) : 0, rotate: rotate ? Number(rotate[1]) : 0 }; }; const toCard = (item: BounceCardImage) => typeof item === 'string' ? { src: item, alt: '' } : { src: item?.src, alt: item?.alt ?? '' }; export default function BounceCards({ images = [], className = '', style, containerWidth = 400, containerHeight = 400, cardSize = 200, spread = 85, rotation = 10, arc = 0, animationDelay = 0.5, animationStagger = 0.06, bounciness = 0.6, enableHover = true, pushDistance = 160, hoverScale = 1.06, borderWidth = 5, borderColor = '#ffffff', radius = 25, shadow = true, transformStyles, onCardClick }: BounceCardsProps) { const rootRef = useRef(null); const cardRefs = useRef<(HTMLDivElement | null)[]>([]); const wakeRef = useRef<(() => void) | null>(null); const cards = images.map(toCard); const count = cards.length; const middle = (count - 1) / 2; const reach = Math.max(1, middle); const slots = cards.map((_, i): Slot => { const custom = transformStyles ? parseTransform(transformStyles[i]) : null; if (custom) return custom; const offset = i - middle; return { x: offset * spread, y: arc * (offset / reach) ** 2, rotate: rotation * PATTERN[i % PATTERN.length] }; }); const settings = { slots, cardSize: Math.max(10, cardSize), delay: Math.max(0, animationDelay), stagger: Math.max(0, animationStagger), bounciness: clamp(bounciness, 0, 1), enableHover, pushDistance, hoverScale: clamp(hoverScale, 0.5, 2), clickable: typeof onCardClick === 'function' }; const settingsRef = useRef(settings); settingsRef.current = settings; const clickRef = useRef(onCardClick); clickRef.current = onCardClick; useEffect(() => { const root = rootRef.current; if (!root) return undefined; const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false; const bodies: Body[] = []; const state = { hovered: -1, time: 0, layer: -1 }; let raf = 0; let last = performance.now(); let alive = true; const body = (i: number): Body => { if (!bodies[i]) { const slot = settingsRef.current.slots[i] ?? { x: 0, y: 0, rotate: 0 }; bodies[i] = { x: slot.x, y: slot.y, rotate: slot.rotate, scale: reduce ? 1 : 0, vx: 0, vy: 0, vr: 0, vs: 0, born: state.time }; } return bodies[i]; }; const step = ( value: number, velocity: number, target: number, stiffness: number, damping: number, dt: number ): [number, number] => { const next = velocity + ((target - value) * stiffness - velocity * damping) * dt; return [value + next * dt, next]; }; const frame = (now: number) => { raf = 0; if (!alive) return; const s = settingsRef.current; const dt = Math.min(1 / 30, Math.max(1 / 240, (now - last) / 1000)); last = now; state.time += dt; const hovered = s.enableHover ? state.hovered : -1; const popStiffness = 170; const popDamping = 2 * (1 - 0.85 * s.bounciness) * Math.sqrt(popStiffness); const moveStiffness = 210; const moveDamping = 2 * (reduce ? 1 : 0.72) * Math.sqrt(moveStiffness); const substeps = Math.ceil(dt / (1 / 240)); const h = dt / substeps; let moving = 0; for (let i = 0; i < s.slots.length; i++) { const el = cardRefs.current[i]; if (!el) continue; const card = body(i); const slot = s.slots[i]; const appeared = reduce || state.time - card.born >= s.delay + i * s.stagger; let targetX = slot.x; let targetY = slot.y; let targetRotate = slot.rotate; let targetScale = appeared ? 1 : 0; if (hovered >= 0 && appeared) { if (i === hovered) { targetY = slot.y - s.cardSize * 0.04; targetRotate = 0; targetScale = s.hoverScale; } else { targetX = slot.x + Math.sign(i - hovered) * s.pushDistance; } } for (let k = 0; k < substeps; k++) { [card.x, card.vx] = step(card.x, card.vx, targetX, moveStiffness, moveDamping, h); [card.y, card.vy] = step(card.y, card.vy, targetY, moveStiffness, moveDamping, h); [card.rotate, card.vr] = step(card.rotate, card.vr, targetRotate, moveStiffness, moveDamping, h); if (reduce) { card.scale = targetScale; card.vs = 0; } else { [card.scale, card.vs] = step(card.scale, card.vs, targetScale, popStiffness, popDamping, h); } } moving += Math.abs(card.vx) + Math.abs(card.vy) + Math.abs(card.vr) + Math.abs(card.vs) * 100 + Math.abs(targetX - card.x) + Math.abs(targetY - card.y) + Math.abs(targetRotate - card.rotate) + Math.abs(targetScale - card.scale) * 100 + (appeared ? 0 : 1); el.style.transform = `translate(-50%, -50%) translate3d(${card.x.toFixed(2)}px, ${card.y.toFixed(2)}px, 0) rotate(${card.rotate.toFixed(3)}deg) scale(${Math.max(0, card.scale).toFixed(4)})`; } if (state.layer !== hovered) { state.layer = hovered; cardRefs.current.forEach((el, i) => { if (!el) return; el.style.zIndex = i === hovered ? String(s.slots.length + 1) : String(i + 1); el.toggleAttribute('data-active', i === hovered); }); } if (moving > 0.02) raf = requestAnimationFrame(frame); }; const wake = () => { if (raf || !alive) return; last = performance.now(); raf = requestAnimationFrame(frame); }; wakeRef.current = wake; const pick = (event: MouseEvent): number => { const s = settingsRef.current; const rect = root.getBoundingClientRect(); const px = event.clientX - rect.left - rect.width / 2; const py = event.clientY - rect.top - rect.height / 2; let best = -1; let distance = Infinity; s.slots.forEach((slot, i) => { const gap = Math.abs(px - slot.x); if (gap < distance) { distance = gap; best = i; } }); if (best < 0) return -1; const slot = s.slots[best]; const half = s.cardSize / 2; if (Math.abs(py - slot.y) > half + 12 || distance > half + 12) return -1; if (state.hovered >= 0 && state.hovered !== best) { const current = s.slots[state.hovered]; if (current && Math.abs(px - current.x) - distance < 6) return state.hovered; } return best; }; const onMove = (event: PointerEvent) => { const next = pick(event); if (next !== state.hovered) { state.hovered = next; wake(); } }; const onLeave = () => { if (state.hovered !== -1) { state.hovered = -1; wake(); } }; const onClick = (event: MouseEvent) => { const index = pick(event); if (index < 0) return; const card = bodies[index]; if (card && !reduce) card.vs -= 2.2; wake(); clickRef.current?.(index); }; const onFocus = (event: FocusEvent) => { const index = cardRefs.current.indexOf(event.target as HTMLDivElement); if (index >= 0) { state.hovered = index; wake(); } }; const onKey = (event: KeyboardEvent) => { if (event.key !== 'Enter' && event.key !== ' ') return; const index = cardRefs.current.indexOf(event.target as HTMLDivElement); if (index < 0 || !settingsRef.current.clickable) return; event.preventDefault(); if (bodies[index] && !reduce) bodies[index].vs -= 2.2; wake(); clickRef.current?.(index); }; root.addEventListener('pointermove', onMove); root.addEventListener('pointerdown', onMove); root.addEventListener('pointerleave', onLeave); root.addEventListener('click', onClick); root.addEventListener('focusin', onFocus); root.addEventListener('focusout', onLeave); root.addEventListener('keydown', onKey); wake(); return () => { alive = false; cancelAnimationFrame(raf); wakeRef.current = null; root.removeEventListener('pointermove', onMove); root.removeEventListener('pointerdown', onMove); root.removeEventListener('pointerleave', onLeave); root.removeEventListener('click', onClick); root.removeEventListener('focusin', onFocus); root.removeEventListener('focusout', onLeave); root.removeEventListener('keydown', onKey); }; }, []); useEffect(() => { wakeRef.current?.(); }); return (

{cards.map((card, i) => (

{ cardRefs.current[i] = el; }} className={`bounce-cards__card${settings.clickable ? ' bounce-cards__card--clickable' : ''}`} style={{ zIndex: i + 1 }} {...(settings.clickable ? { role: 'button', tabIndex: 0, 'aria-label': card.alt || `Card ${i + 1}` } : null)} > {card.src && {card.alt}

}

))}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"BounceCards.css","content":".bounce-cards {\n position: relative;\n touch-action: pan-y;\n -webkit-tap-highlight-color: transparent;\n}\n\n.bounce-cards__card {\n position: absolute;\n top: 50%;\n left: 50%;\n width: var(--bounce-cards-size);\n aspect-ratio: 1;\n overflow: hidden;\n border: var(--bounce-cards-border) solid var(--bounce-cards-border-color);\n border-radius: var(--bounce-cards-radius);\n background: var(--bounce-cards-border-color);\n box-shadow: var(--bounce-cards-shadow);\n transform: translate(-50%, -50%) scale(0);\n transition: box-shadow 0.3s ease;\n will-change: transform;\n}\n\n.bounce-cards__card[data-active] {\n box-shadow: var(--bounce-cards-shadow-active);\n}\n\n.bounce-cards__card--clickable {\n cursor: pointer;\n}\n\n.bounce-cards__card--clickable:focus-visible {\n outline: 2px solid var(--bounce-cards-border-color);\n outline-offset: 3px;\n}\n\n.bounce-cards__card img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n pointer-events: none;\n user-select: none;\n}\n","type":"registry:file","target":"@components/BounceCards.css"},{"path":"BounceCards.tsx","content":"$51","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]