51: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"] 52: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"] 53:Ta9d,.depth-carousel { position: relative; width: 100%; height: 100%; min-height: 320px; display: flex; align-items: center; justify-content: center; perspective: var(--dc-perspective, 1400px); perspective-origin: 50% 50%; touch-action: pan-y; outline: none; user-select: none; -webkit-user-select: none; cursor: grab; } .depth-carousel:active { cursor: grabbing; } .depth-carousel:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 4px; border-radius: 12px; } .depth-carousel__stage { position: absolute; inset: 0; transform-style: preserve-3d; } .depth-carousel__card { position: absolute; top: 50%; left: 50%; transform-origin: center center; overflow: hidden; background: #0b0d12; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.65), 0 8px 20px -10px rgba(0, 0, 0, 0.5); will-change: transform, opacity, filter; cursor: pointer; transform: translate(-50%, -50%); } .depth-carousel__img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; } .depth-carousel__tint { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: multiply; } .depth-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3000; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(18, 20, 26, 0.55); backdrop-filter: blur(8px); color: #fff; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .depth-carousel__arrow:hover { background: rgba(28, 31, 40, 0.85); border-color: rgba(255, 255, 255, 0.4); } .depth-carousel__arrow:active { transform: translateY(-50%) scale(0.94); } .depth-carousel__arrow--prev { left: 16px; } .depth-carousel__arrow--next { right: 16px; } .depth-carousel__dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(14, 16, 22, 0.4); backdrop-filter: blur(6px); } .depth-carousel__dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 999px; background: rgba(255, 255, 255, 0.32); cursor: pointer; transition: width 0.25s ease, background 0.25s ease; } .depth-carousel__dot.is-active { width: 20px; background: #fff; } @media (prefers-reduced-motion: reduce) { .depth-carousel__card { will-change: auto; } .depth-carousel__arrow, .depth-carousel__dot { transition: none; } } 54:T334f,'use client'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import gsap from 'gsap'; import './DepthCarousel.css'; const DEFAULT_ITEMS = [ { image: 'https://picsum.photos/seed/depth1/800/1000', alt: 'Slide 1' }, { image: 'https://picsum.photos/seed/depth2/800/1000', alt: 'Slide 2' }, { image: 'https://picsum.photos/seed/depth3/800/1000', alt: 'Slide 3' }, { image: 'https://picsum.photos/seed/depth4/800/1000', alt: 'Slide 4' }, { image: 'https://picsum.photos/seed/depth5/800/1000', alt: 'Slide 5' }, { image: 'https://picsum.photos/seed/depth6/800/1000', alt: 'Slide 6' } ]; const clamp = (v, min, max) => Math.min(Math.max(v, min), max); const normalizeItem = it => (typeof it === 'string' ? { image: it, alt: '' } : it); const DepthCarousel = ({ items = DEFAULT_ITEMS, cardWidth = 300, cardHeight = 380, radius = 18, tint = '#05060a', depth = 220, spread = 90, tilt = 22, tiltDirection = 'right', perspective = 1400, visibleCards = 4, falloff = 0.2, blur = 6, duration = 700, ease = 'power3.out', autoplay = false, autoplayDelay = 3200, loop = true, showControls = true, showIndicators = true, onChange, className = '' }) => { const data = useMemo(() => (Array.isArray(items) ? items : []).map(normalizeItem), [items]); const count = data.length; const rootRef = useRef(null); const stageRef = useRef(null); const cardRefs = useRef([]); const overlayRefs = useRef([]); const posRef = useRef(0); const focusRef = useRef(0); const tweenRef = useRef(null); const scaleRef = useRef(1); const cfgRef = useRef({}); const onChangeRef = useRef(onChange); const dragRef = useRef(null); const wheelTimerRef = useRef(null); const autoTimerRef = useRef(null); const reducedRef = useRef(false); const [active, setActive] = useState(0); onChangeRef.current = onChange; cfgRef.current = { count, depth, spread, tilt, tiltDirection, visibleCards, falloff, blur, duration, ease, loop, cardWidth, autoplayDelay }; const layout = useCallback(pos => { const cfg = cfgRef.current; const n = cfg.count; if (!n) return; const dir = cfg.tiltDirection === 'left' ? -1 : 1; const sc = scaleRef.current; for (let i = 0; i < n; i++) { const el = cardRefs.current[i]; if (!el) continue; let d = i - pos; if (cfg.loop && n > 1) { d = ((d % n) + n) % n; if (d > n / 2) d -= n; } const back = Math.max(0, d); const az = Math.abs(d); const shown = az <= cfg.visibleCards + 0.5; const tz = -cfg.depth * d; const tx = dir * cfg.spread * d; const ry = dir * cfg.tilt * clamp(d, 0, 1); let opacity = d < 0 ? Math.max(0, 1 + d) : 1; if (!shown) opacity = 0; const brightness = Math.max(0.15, 1 - back * cfg.falloff); const blurPx = cfg.blur > 0 ? Math.min(cfg.blur, (back / Math.max(1, cfg.visibleCards)) * cfg.blur) : 0; const zi = Math.round(2000 - d * 20); el.style.transform = `translate(-50%, -50%) scale(${sc}) translateX(${tx.toFixed(2)}px) translateZ(${tz.toFixed(2)}px) rotateY(${ry.toFixed(3)}deg)`; el.style.opacity = opacity.toFixed(3); el.style.filter = `brightness(${brightness.toFixed(3)}) blur(${blurPx.toFixed(2)}px)`; el.style.zIndex = String(zi); el.style.pointerEvents = shown && opacity > 0.05 ? 'auto' : 'none'; const ov = overlayRefs.current[i]; if (ov) ov.style.opacity = clamp(back * cfg.falloff * 1.25, 0, 0.86).toFixed(3); } }, []); const notify = useCallback( idx => { setActive(idx); onChangeRef.current?.(idx, data[idx]); }, [data] ); const tweenTo = useCallback( (target, animate) => { tweenRef.current?.kill(); const cfg = cfgRef.current; const proxy = { p: posRef.current }; const dur = animate && !reducedRef.current ? cfg.duration / 1000 : 0; tweenRef.current = gsap.to(proxy, { p: target, duration: dur, ease: cfg.ease, onUpdate: () => { posRef.current = proxy.p; layout(proxy.p); }, onComplete: () => { const n = cfg.count; if (n > 0) posRef.current = ((posRef.current % n) + n) % n; layout(posRef.current); } }); }, [layout] ); const setFocus = useCallback( (rawIndex, animate = true) => { const cfg = cfgRef.current; const n = cfg.count; if (!n) return; const idx = cfg.loop ? ((rawIndex % n) + n) % n : clamp(rawIndex, 0, n - 1); let delta = idx - posRef.current; if (cfg.loop && n > 1) { delta = ((delta % n) + n) % n; if (delta > n / 2) delta -= n; } tweenTo(posRef.current + delta, animate); if (idx !== focusRef.current) { focusRef.current = idx; notify(idx); } }, [tweenTo, notify] ); const navigateBy = useCallback(step => setFocus(focusRef.current + step, true), [setFocus]); useEffect(() => { const root = rootRef.current; if (!root) return; const ro = new ResizeObserver(entries => { const w = entries[0].contentRect.width; const cfg = cfgRef.current; const needed = cfg.cardWidth + Math.abs(cfg.spread) * 2 + 120; scaleRef.current = clamp(w / needed, 0.4, 1); layout(posRef.current); }); ro.observe(root); return () => ro.disconnect(); }, [layout]); useEffect(() => { const el = rootRef.current; if (!el) return; const onWheel = e => { const cfg = cfgRef.current; if (cfg.count < 2) return; e.preventDefault(); tweenRef.current?.kill(); const raw = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY; const delta = e.deltaMode === 1 ? raw * 24 : raw; const step = clamp(delta / (cfg.cardWidth * 0.9), -0.6, 0.6); posRef.current += step; layout(posRef.current); if (wheelTimerRef.current) clearTimeout(wheelTimerRef.current); wheelTimerRef.current = setTimeout(() => setFocus(Math.round(posRef.current), true), 130); }; el.addEventListener('wheel', onWheel, { passive: false }); return () => { el.removeEventListener('wheel', onWheel); if (wheelTimerRef.current) clearTimeout(wheelTimerRef.current); }; }, [layout, setFocus]); const onPointerDown = useCallback(e => { const cfg = cfgRef.current; if (cfg.count < 2) return; tweenRef.current?.kill(); dragRef.current = { x: e.clientX, startPos: posRef.current, lastX: e.clientX, lastT: performance.now(), v: 0, moved: false, id: e.pointerId }; }, []); const onPointerMove = useCallback( e => { const drag = dragRef.current; if (!drag) return; const cfg = cfgRef.current; const stepPx = Math.max(cfg.cardWidth * 0.55 * scaleRef.current, 40); const dx = e.clientX - drag.x; if (!drag.moved && Math.abs(dx) > 4) { drag.moved = true; rootRef.current?.setPointerCapture(drag.id); } if (!drag.moved) return; const now = performance.now(); const dt = Math.max(now - drag.lastT, 1); drag.v = (e.clientX - drag.lastX) / dt; drag.lastX = e.clientX; drag.lastT = now; posRef.current = drag.startPos - dx / stepPx; layout(posRef.current); }, [layout] ); const onPointerEnd = useCallback(() => { const drag = dragRef.current; if (!drag) return; dragRef.current = null; if (!drag.moved) return; const cfg = cfgRef.current; const stepPx = Math.max(cfg.cardWidth * 0.55 * scaleRef.current, 40); const projected = posRef.current - (drag.v * 180) / stepPx; setFocus(Math.round(projected), true); }, [setFocus]); const onKeyDown = useCallback( e => { if (e.key === 'ArrowLeft') { e.preventDefault(); navigateBy(-1); } else if (e.key === 'ArrowRight') { e.preventDefault(); navigateBy(1); } }, [navigateBy] ); const onCardClick = useCallback( index => { if (dragRef.current?.moved) return; setFocus(index, true); }, [setFocus] ); useEffect(() => { reducedRef.current = typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (!autoplay || reducedRef.current || count < 2) return; const root = rootRef.current; let hovered = false; let focused = false; const stop = () => { if (autoTimerRef.current) clearInterval(autoTimerRef.current); autoTimerRef.current = null; }; const start = () => { stop(); autoTimerRef.current = window.setInterval( () => { if (!hovered && !focused) navigateBy(1); }, Math.max(cfgRef.current.autoplayDelay, 600) ); }; const onEnter = () => { hovered = true; }; const onLeave = () => { hovered = false; }; const onFocusIn = () => { focused = true; }; const onFocusOut = () => { focused = false; }; root?.addEventListener('mouseenter', onEnter); root?.addEventListener('mouseleave', onLeave); root?.addEventListener('focusin', onFocusIn); root?.addEventListener('focusout', onFocusOut); start(); return () => { stop(); root?.removeEventListener('mouseenter', onEnter); root?.removeEventListener('mouseleave', onLeave); root?.removeEventListener('focusin', onFocusIn); root?.removeEventListener('focusout', onFocusOut); }; }, [autoplay, autoplayDelay, count, navigateBy]); useEffect(() => { layout(posRef.current); }, [layout, depth, spread, tilt, tiltDirection, visibleCards, falloff, blur, cardWidth, cardHeight, radius, count]); useEffect( () => () => { tweenRef.current?.kill(); if (wheelTimerRef.current) clearTimeout(wheelTimerRef.current); if (autoTimerRef.current) clearInterval(autoTimerRef.current); }, [] ); return (

{data.map((item, i) => (

(cardRefs.current[i] = el)} style={{ width: cardWidth, height: cardHeight, borderRadius: radius }} aria-roledescription="slide" aria-label={`${i + 1} of ${count}`} aria-hidden={active !== i} onClick={() => onCardClick(i)} > {item.alt

(overlayRefs.current[i] = el)} style={{ background: tint }} />

))}

{showControls && count > 1 && ( <> )} {showIndicators && count > 1 && (

{data.map((_, i) => (

)}

); }; export default DepthCarousel; 50:["$","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","gsap@^3.13.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","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":"gsap@^3.13.0"}]]}]}]]}],["$","$L51",null,{"namespace":"@react-bits","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"DepthCarousel.css","content":"$53","type":"registry:file","target":"@components/DepthCarousel.css"},{"path":"DepthCarousel.jsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]