{accentLine &&

} {shimmer && } {children}

); } // One-shot shimmer sweep — used on cards updating fresh data. function Shimmer() { return (

); } // Inject keyframes once. if (typeof document !== 'undefined' && !document.getElementById('c-anims')) { const s = document.createElement('style'); s.id = 'c-anims'; s.textContent = ` @keyframes shimmer-sweep { 0% { transform: translateX(-60%); } 100% { transform: translateX(60%); } } @keyframes c-fade-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes c-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes c-slide-down { from { transform: translateY(-20px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes c-pop { from { transform: scale(0.98); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes c-pulse { 0%,100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.4); opacity: 0; } } @keyframes c-pulse-strong { 0% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } @keyframes c-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes c-spin { to { transform: rotate(360deg); } } @keyframes c-bounce-x { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } } @keyframes c-flash { 0%, 100% { opacity: 0; } 50% { opacity: 0.5; } } @keyframes c-fall { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } } /* One-shot reveals use both backwards+forwards fill so the from-state applies during delay and the to-state sticks after. Easing is ease-out (no overshoot) for a calm, non-bouncy feel. */ [style*="c-fade-in"], [style*="c-slide-up"], [style*="c-slide-down"], [style*="c-pop"], [style*="c-bar-grow"], [style*="c-fall"] { animation-fill-mode: both !important; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important; } .c-stagger > * { animation: c-fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } .c-stagger > *:nth-child(1) { animation-delay: 0.02s; } .c-stagger > *:nth-child(2) { animation-delay: 0.07s; } .c-stagger > *:nth-child(3) { animation-delay: 0.12s; } .c-stagger > *:nth-child(4) { animation-delay: 0.17s; } .c-stagger > *:nth-child(5) { animation-delay: 0.22s; } .c-stagger > *:nth-child(6) { animation-delay: 0.27s; } .c-stagger > *:nth-child(7) { animation-delay: 0.32s; } .c-stagger > *:nth-child(8) { animation-delay: 0.37s; } .c-stagger > *:nth-child(9) { animation-delay: 0.42s; } .c-stagger > *:nth-child(10) { animation-delay: 0.47s; } `; document.head.appendChild(s); } // ───────────────────────────────────────────────────────────── // Hooks // ───────────────────────────────────────────────────────────── // Tween a value toward target over a duration. Re-runs on target change. function useTween(target, ms = 600) { const [v, setV] = React.useState(target); const startV = React.useRef(target); React.useEffect(() => { const from = v; startV.current = from; const t0 = performance.now(); let raf; const loop = (t) => { const k = Math.min(1, (t - t0) / ms); const e = 1 - Math.pow(1 - k, 3); setV(from + (target - from) * e); if (k < 1) raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, [target]); return v; } // Pull-to-refresh hook. Returns props to spread on a scroll container, // plus state for the indicator. function usePullToRefresh(onRefresh) { const [pull, setPull] = React.useState(0); // 0..1+ where >1 is committed const [refreshing, setRefreshing] = React.useState(false); const startY = React.useRef(null); const containerRef = React.useRef(null); const onTouchStart = (e) => { if (!containerRef.current) return; if (containerRef.current.scrollTop > 0) return; startY.current = e.touches ? e.touches[0].clientY : e.clientY; }; const onTouchMove = (e) => { if (startY.current == null || refreshing) return; const y = e.touches ? e.touches[0].clientY : e.clientY; const dy = Math.max(0, y - startY.current); if (dy > 0 && containerRef.current.scrollTop <= 0) { e.preventDefault?.(); setPull(Math.min(1.3, dy / 100)); } }; const onTouchEnd = async () => { if (startY.current == null) return; startY.current = null; if (pull >= 1) { setRefreshing(true); setPull(1); await onRefresh?.(); setRefreshing(false); setPull(0); } else { setPull(0); } }; return { bind: { ref: containerRef, onTouchStart, onTouchMove, onTouchEnd, onMouseDown: onTouchStart, onMouseMove: (e) => e.buttons && onTouchMove(e), onMouseUp: onTouchEnd, onMouseLeave: onTouchEnd, }, pull, refreshing, }; } // Swipe-to-dismiss for list items. Returns transform style + handlers + dismissed state. function useSwipeDismiss(threshold = 100, onDismiss) { const [dx, setDx] = React.useState(0); const [dismissed, setDismissed] = React.useState(false); const startX = React.useRef(null); const onStart = (e) => { const x = e.touches ? e.touches[0].clientX : e.clientX; startX.current = x; }; const onMove = (e) => { if (startX.current == null) return; const x = e.touches ? e.touches[0].clientX : e.clientX; const d = x - startX.current; if (d < 0) setDx(d); }; const onEnd = () => { if (startX.current == null) return; startX.current = null; if (dx < -threshold) { setDx(-360); setDismissed(true); setTimeout(() => onDismiss?.(), 250); } else { setDx(0); } }; return { bind: { onTouchStart: onStart, onTouchMove: onMove, onTouchEnd: onEnd, onMouseDown: onStart, onMouseMove: (e) => e.buttons && onMove(e), onMouseUp: onEnd, onMouseLeave: onEnd, style: { transform: `translateX(${dx}px)`, opacity: 1 - Math.min(0.7, Math.abs(dx) / 300), transition: startX.current ? 'none' : 'transform .25s, opacity .25s', }, }, dismissed, dx, }; } // ───────────────────────────────────────────────────────────── // Aurora — animated background gradient. Intensity 0..1.5 // ───────────────────────────────────────────────────────────── function Aurora({ intensity = 1 }) { if (intensity <= 0) return null; const a = Math.min(1, intensity); return (

); } Object.assign(window, { CarTopdownModel, CarSideModel, HanoiMap, POI, GlassC, Shimmer, Aurora, useTween, usePullToRefresh, useSwipeDismiss, CAR_VARIANTS, });