4b: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"] 4c:T259d,'use client'; import { useCallback, useEffect, useRef, useState, type CSSProperties, type KeyboardEvent, } from 'react'; // --------------------------------------------------------------------------- // Props // --------------------------------------------------------------------------- // // items Gallery entries — image src, alt, and optional caption // cardWidth Card width in px // cardHeight Card height in px // cornerRadius Border radius in px // autoplay Auto-advance slides (pauses on hover/focus) // showCaption Show caption on the focused card // className Styles for the outer shell // type GalleryItem = { image: { src: string; alt?: string }; caption?: string; }; type CoverflowGalleryProps = { items?: GalleryItem[]; cardWidth?: number; cardHeight?: number; cornerRadius?: number; autoplay?: boolean; showCaption?: boolean; className?: string; }; // --------------------------------------------------------------------------- // Defaults // --------------------------------------------------------------------------- const DEFAULT_ITEMS: GalleryItem[] = [ { image: { src: 'https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=800&q=80', alt: 'Minimal office workspace', }, caption: 'Studio\nLight\nCalm', }, { image: { src: 'https://images.unsplash.com/photo-1487958449943-2429e8be8625?auto=format&fit=crop&w=800&q=80', alt: 'Modern concrete building', }, caption: 'Form\nConcrete\nLine', }, { image: { src: 'https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=800&q=80', alt: 'Architectural interior detail', }, caption: 'Space\nSteel\nFocus', }, { image: { src: 'https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=800&q=80', alt: 'Bright living room interior', }, caption: 'Home\nWarm\nOpen', }, { image: { src: 'https://images.unsplash.com/photo-1486325212027-8081e485255e?auto=format&fit=crop&w=800&q=80', alt: 'Curved glass tower', }, caption: 'Curve\nMotion\nDepth', }, ]; const PERSPECTIVE = 1600; const SCALE_STEP = 0.16; const MAX_VISIBLE = 2; const DEPTH = 240; const MOVE_MS = 600; const AUTOPLAY_MS = 2500; const INACTIVE_DIM = 0.4; const YAW_TILT = 12; const ROLL_TILT = 8; const SPREAD = 8; export default function CoverflowGallery({ items = DEFAULT_ITEMS, cardWidth = 400, cardHeight = 400, cornerRadius = 12, autoplay = false, showCaption = true, className = '', }: CoverflowGalleryProps) { const deck = items.length ? items : DEFAULT_ITEMS; const total = deck.length; const [focusedIndex, setFocusedIndex] = useState(0); const [isPaused, setIsPaused] = useState(false); const inputLockedRef = useRef(false); const releaseLockLater = useCallback(() => { inputLockedRef.current = true; window.setTimeout(() => { inputLockedRef.current = false; }, Math.max(50, MOVE_MS)); }, []); const advance = useCallback( (direction: number) => { if (inputLockedRef.current || total < 2) return; releaseLockLater(); setFocusedIndex((current) => (((current + direction) % total) + total) % total); }, [releaseLockLater, total] ); const jumpToIndex = useCallback( (index: number) => { if (inputLockedRef.current) return; releaseLockLater(); setFocusedIndex(index); }, [releaseLockLater] ); const focusCard = useCallback( (index: number) => { if (inputLockedRef.current || autoplay) return; releaseLockLater(); setFocusedIndex((current) => index === current ? (current + 1) % total : index ); }, [autoplay, releaseLockLater, total] ); useEffect(() => { setFocusedIndex((current) => Math.max(0, Math.min(total - 1, current))); }, [total]); useEffect(() => { if (!autoplay || isPaused || total < 2) return; const id = window.setInterval(() => advance(1), AUTOPLAY_MS); return () => window.clearInterval(id); }, [advance, autoplay, isPaused, total]); const onKeyDown = useCallback( (event: KeyboardEvent) => { if (event.key === 'ArrowRight') { event.preventDefault(); advance(1); } else if (event.key === 'ArrowLeft') { event.preventDefault(); advance(-1); } }, [advance] ); const transitionCss = `transform ${MOVE_MS}ms cubic-bezier(0.22, 1, 0.36, 1), opacity ${MOVE_MS}ms cubic-bezier(0.22, 1, 0.36, 1)`; const rootStyle: CSSProperties = { position: 'relative', width: '100%', minWidth: 320, minHeight: 360, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', perspective: `${PERSPECTIVE}px`, overflow: 'hidden', outline: 'none', }; return (

setIsPaused(true)} onMouseLeave={() => setIsPaused(false)} onFocus={() => setIsPaused(true)} onBlur={() => setIsPaused(false)} >

{deck.map((entry, index) => { let offset = index - focusedIndex; if (offset > total / 2) offset -= total; if (offset < -total / 2) offset += total; const distance = Math.abs(offset); const isVisible = distance <= MAX_VISIBLE; const isFocused = offset === 0; const scale = Math.max(0.4, 1 - distance * SCALE_STEP); const translateX = offset * SPREAD * 30; const translateZ = -distance * DEPTH; const rotateY = -offset * YAW_TILT; const rotateZ = offset * ROLL_TILT; const cardStyle: CSSProperties = { position: 'absolute', left: '50%', top: '50%', width: cardWidth, height: cardHeight, borderRadius: cornerRadius, overflow: 'hidden', transformStyle: 'preserve-3d', transformOrigin: 'center center', transform: `translate(-50%, -50%) translateX(${translateX}px) translateZ(${translateZ}px) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg) scale(${scale})`, transition: transitionCss, opacity: isVisible ? 1 : 0, cursor: autoplay || isFocused ? 'default' : 'pointer', pointerEvents: isVisible && !autoplay ? 'auto' : 'none', backgroundColor: '#171717', }; return (

focusCard(index)} aria-label={entry.caption || entry.image.alt} aria-hidden={!isVisible} > {entry.image.alt

{showCaption && entry.caption && isFocused && ( <>

{entry.caption}

)}

); })}

{deck.map((entry, index) => (

); } 4a:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4b",null,{"files":[{"path":"components/gallery/CoverflowGallery.tsx","content":"$4c","type":"registry:component","target":"@components/gallery/CoverflowGallery.tsx"}],"className":"h-[70svh] min-h-80"}]]}]