); } /* ── Icons ── */ function DownloadIcon() { return ( ); } function HeartIcon({ filled }) { return ( ); } function XIcon() { return ( ); } /* ── Floating Card — ref forwarded so parent can update transform in rAF ── */ const FloatingCard = React.forwardRef(function FloatingCard( { card, onSelect, dragDistRef, cardW, cardH }, ref ) { const [hovered, setHovered] = React.useState(false); return (

{ e.stopPropagation(); if (dragDistRef.current < 10) onSelect(card); }} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ position: 'absolute', left: 0, top: 0, width: cardW + 'px', height: cardH + 'px', transformOrigin: (cardW / 2) + 'px ' + (cardH / 2) + 'px', willChange: 'transform', }} >

{card.title}

); }); /* ── Card Modal ── */ function CardModal({ card, onClose, isFavorited, onToggleFavorite }) { const cardRef = React.useRef(null); const handleMouseMove = (e) => { if (!cardRef.current) return; const rect = cardRef.current.getBoundingClientRect(); const rx = (e.clientY - rect.top - rect.height / 2) / 15; const ry = (rect.left + rect.width / 2 - e.clientX) / 15; cardRef.current.style.transform = `perspective(1000px) rotateX(${rx}deg) rotateY(${ry}deg)`; }; const handleMouseEnter = () => { if (cardRef.current) cardRef.current.style.transition = 'none'; }; const handleMouseLeave = () => { if (cardRef.current) { cardRef.current.style.transition = 'transform 0.5s ease-out'; cardRef.current.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg)'; } }; return (

{ if (e.target === e.currentTarget) onClose(); }} > {/* Close — fixed position, always visible */} {/* Scrollable inner */}

{card.title}

); } /* ── Main Component ── */ function StellarCardGallery() { const [selectedCard, setSelectedCard] = React.useState(null); const [isFavorited, setIsFavorited] = React.useState(false); const [dims, setDims] = React.useState(getResponsiveDims); const dimsRef = React.useRef(dims); React.useLayoutEffect(() => { dimsRef.current = dims; }, [dims]); React.useEffect(() => { let timer; const onResize = () => { clearTimeout(timer); timer = setTimeout(() => { const next = getResponsiveDims(); dimsRef.current = next; setDims(next); }, 80); }; window.addEventListener('resize', onResize); window.addEventListener('orientationchange', onResize); return () => { window.removeEventListener('resize', onResize); window.removeEventListener('orientationchange', onResize); clearTimeout(timer); }; }, []); const cards = [ { id: '1', imageUrl: 'https://i.ibb.co/4ZWcP129/1.png', alt: 'Elegant Invitation', title: 'Elegant Invitation' }, { id: '2', imageUrl: 'https://i.ibb.co/TMbhBRcL/2.png', alt: 'Modern Design', title: 'Modern Design' }, { id: '3', imageUrl: 'https://i.ibb.co/spXBFdSm/3.png', alt: 'Vintage Style', title: 'Vintage Style' }, { id: '4', imageUrl: 'https://i.ibb.co/N2TCN0bC/4.png', alt: 'Minimalist', title: 'Minimalist' }, { id: '5', imageUrl: 'https://i.ibb.co/jZkh6q1M/5.png', alt: 'Floral Design', title: 'Floral Design' }, { id: '6', imageUrl: 'https://i.ibb.co/6cc7mksr/6.png', alt: 'Geometric', title: 'Geometric' }, { id: '7', imageUrl: 'https://i.ibb.co/bjV35jNQ/7.png', alt: 'Luxury Gold', title: 'Luxury Gold' }, { id: '8', imageUrl: 'https://i.ibb.co/PZ7WLs7g/8.png', alt: 'Rustic Style', title: 'Rustic Style' }, { id: '9', imageUrl: 'https://i.ibb.co/qLR5bQRM/9.png', alt: 'Dark Modern', title: 'Dark Modern' }, { id: '10', imageUrl: 'https://i.ibb.co/PdNhw3K/10.png', alt: 'Colorful Party', title: 'Colorful Party' }, { id: '11', imageUrl: 'https://i.ibb.co/zWpN1nqJ/11.png', alt: 'Geometric', title: 'Geometric' }, { id: '12', imageUrl: 'https://i.ibb.co/fVYnCXgR/12.png', alt: 'Luxury Gold', title: 'Luxury Gold' }, { id: '13', imageUrl: 'https://i.ibb.co/1G6jZWcZ/13.png', alt: 'Rustic Style', title: 'Rustic Style' }, { id: '14', imageUrl: 'https://i.ibb.co/xKG7m905/14.png', alt: 'Dark Modern', title: 'Dark Modern' }, { id: '15', imageUrl: 'https://i.ibb.co/7dJzR3xK/15.png', alt: 'Colorful Party', title: 'Colorful Party' }, { id: '16', imageUrl: 'https://i.ibb.co/NdJ1csXB/16.png', alt: 'Elegant Script', title: 'Elegant Script' }, { id: '17', imageUrl: 'https://i.ibb.co/8L2Sdt5Q/17.png', alt: 'Watercolor Art', title: 'Watercolor Art' }, { id: '18', imageUrl: 'https://i.ibb.co/mC1zxJYq/18.png', alt: 'Botanical', title: 'Botanical' }, { id: '19', imageUrl: 'https://i.ibb.co/wryzsKs4/20.png', alt: 'Art Deco', title: 'Art Deco' }, { id: '20', imageUrl: 'https://i.ibb.co/1fvnxL3L/19.png', alt: 'Marble Luxury', title: 'Marble Luxury' }, ]; /* Golden-ratio sphere positions (unit sphere × radius layers) */ const cardPositions = React.useMemo(() => { const n = cards.length, phi = (1 + Math.sqrt(5)) / 2; return cards.map((_, i) => { const y = 1 - (i / (n - 1)) * 2; const r = Math.sqrt(Math.max(0, 1 - y * y)); const theta = (2 * Math.PI * i) / phi; const R = 12 + (i % 3) * 4; // radii: 12, 14, 16 return { x: Math.cos(theta) * r * R, y: y * R, z: Math.sin(theta) * r * R }; }); }, []); /* Refs — all updated directly in rAF to avoid 60fps React re-renders */ const cardRefs = React.useRef([]); const rotRef = React.useRef({ x: getResponsiveDims().rotX0, y: 0 }); const isDragging = React.useRef(false); const inputRef = React.useRef({ x: 0, y: 0 }); const dragDistRef = React.useRef(0); const rafRef = React.useRef(null); const dragLayerRef = React.useRef(null); /* Position update — reads dimsRef so it never stales */ const updatePositions = React.useCallback(() => { const { CARD_W, CARD_H, SCALE, FOV } = dimsRef.current; const { x: rotX, y: rotY } = rotRef.current; const cosX = Math.cos(rotX * Math.PI / 180), sinX = Math.sin(rotX * Math.PI / 180); const cosY = Math.cos(rotY * Math.PI / 180), sinY = Math.sin(rotY * Math.PI / 180); const projected = cardPositions.map((pos, i) => { /* Rotate around X then Y */ const y1 = pos.y * cosX - pos.z * sinX; const z1 = pos.y * sinX + pos.z * cosX; const x2 = pos.x * cosY + z1 * sinY; const z2 = -pos.x * sinY + z1 * cosY; /* Perspective projection */ const depth = z2 * SCALE; const p = FOV / (FOV + depth); // scale: >1 = closer, <1 = farther const sx = x2 * SCALE * p; const sy = -y1 * SCALE * p; // negate Y: 3D up = CSS up return { sx, sy, p, depth, i }; }); /* Sort back-to-front so closer cards sit on top */ projected.sort((a, b) => a.depth - b.depth); projected.forEach(({ sx, sy, p, i }, zOrder) => { const el = cardRefs.current[i]; if (!el) return; /* transformOrigin is at card center, so translate by half-card before scale */ el.style.transform = `translate(${sx - CARD_W / 2}px, ${sy - CARD_H / 2}px) scale(${p})`; el.style.zIndex = zOrder + 1; }); }, [cardPositions]); /* Auto-rotate rAF loop */ React.useEffect(() => { let last = 0; const tick = (t) => { if (!isDragging.current) { rotRef.current.y += Math.min(t - last, 50) * 0.018; } last = t; updatePositions(); rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafRef.current); }, [updatePositions]); /* Native touch — needs { passive: false } to call preventDefault (blocks page scroll) */ React.useEffect(() => { const el = dragLayerRef.current; if (!el) return; const onTouchStart = (e) => { if (e.touches.length > 1) return; isDragging.current = true; dragDistRef.current = 0; inputRef.current = { x: e.touches[0].clientX, y: e.touches[0].clientY }; }; const onTouchMove = (e) => { if (!isDragging.current || e.touches.length > 1) return; e.preventDefault(); const dx = e.touches[0].clientX - inputRef.current.x; const dy = e.touches[0].clientY - inputRef.current.y; dragDistRef.current += Math.sqrt(dx * dx + dy * dy); rotRef.current.y += dx * 0.5; rotRef.current.x = Math.max(-80, Math.min(80, rotRef.current.x - dy * 0.35)); inputRef.current = { x: e.touches[0].clientX, y: e.touches[0].clientY }; }; const onTouchEnd = () => { isDragging.current = false; }; el.addEventListener('touchstart', onTouchStart, { passive: true }); el.addEventListener('touchmove', onTouchMove, { passive: false }); el.addEventListener('touchend', onTouchEnd, { passive: true }); return () => { el.removeEventListener('touchstart', onTouchStart); el.removeEventListener('touchmove', onTouchMove); el.removeEventListener('touchend', onTouchEnd); }; }, []); /* Mouse controls (desktop) */ const onMouseDown = (e) => { isDragging.current = true; dragDistRef.current = 0; inputRef.current = { x: e.clientX, y: e.clientY }; }; const onMouseMove = (e) => { if (!isDragging.current) return; const dx = e.clientX - inputRef.current.x, dy = e.clientY - inputRef.current.y; dragDistRef.current += Math.sqrt(dx * dx + dy * dy); rotRef.current.y += dx * 0.4; rotRef.current.x = Math.max(-80, Math.min(80, rotRef.current.x - dy * 0.3)); inputRef.current = { x: e.clientX, y: e.clientY }; }; const stopDrag = () => { isDragging.current = false; }; return (

{/* Interaction + card layer */}

{/* Galaxy origin — shifted down on mobile to clear nav + title overlay */}

{cards.map((card, i) => ( { cardRefs.current[i] = el; }} onSelect={setSelectedCard} dragDistRef={dragDistRef} cardW={dims.CARD_W} cardH={dims.CARD_H} /> ))}

{/* HUD hint */}

{dims.mobile ? 'Arrastra para rotar · Toca para ver' : 'Arrastra para rotar · Click en una tarjeta para verla'}

{/* Modal */} {selectedCard && ( { setSelectedCard(null); setIsFavorited(false); }} isFavorited={isFavorited} onToggleFavorite={() => setIsFavorited(v => !v)} /> )}

); }