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:T6be4,'use client'; // Component created by Dominik Koch // https://x.com/dominikkoch import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react'; const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect; const cx = (...parts) => parts.filter(Boolean).join(' '); const SAMPLES = 720; const FRONT_GROW = 0.3; const BACK_SHRINK = 0.45; const BACK_DIM = 0.55; const INTRO_SPREAD = 1.3; const INTRO_FADE = 0.45; const DRAG_THRESHOLD = 5; function generateEllipsePath(cx, cy, rx, ry) { return `M ${cx - rx} ${cy} A ${rx} ${ry} 0 1 0 ${cx + rx} ${cy} A ${rx} ${ry} 0 1 0 ${cx - rx} ${cy}`; } function generateCirclePath(cx, cy, r) { return generateEllipsePath(cx, cy, r, r); } function generateSquarePath(cx, cy, size) { const h = size / 2; return `M ${cx - h} ${cy - h} L ${cx + h} ${cy - h} L ${cx + h} ${cy + h} L ${cx - h} ${cy + h} Z`; } function generateRectanglePath(cx, cy, w, h) { const hw = w / 2; const hh = h / 2; return `M ${cx - hw} ${cy - hh} L ${cx + hw} ${cy - hh} L ${cx + hw} ${cy + hh} L ${cx - hw} ${cy + hh} Z`; } function generateTrianglePath(cx, cy, size) { const height = (size * Math.sqrt(3)) / 2; const hs = size / 2; return `M ${cx} ${cy - height / 1.5} L ${cx + hs} ${cy + height / 3} L ${cx - hs} ${cy + height / 3} Z`; } function generateStarPath(cx, cy, outerR, innerR, points) { const step = Math.PI / points; let path = ''; for (let i = 0; i < 2 * points; i++) { const r = i % 2 === 0 ? outerR : innerR; const angle = i * step - Math.PI / 2; const x = cx + r * Math.cos(angle); const y = cy + r * Math.sin(angle); path += i === 0 ? `M ${x} ${y}` : ` L ${x} ${y}`; } return path + ' Z'; } function generateHeartPath(cx, cy, size) { const s = size / 30; return `M ${cx} ${cy + 12 * s} C ${cx - 20 * s} ${cy - 5 * s}, ${cx - 12 * s} ${cy - 18 * s}, ${cx} ${cy - 8 * s} C ${cx + 12 * s} ${cy - 18 * s}, ${cx + 20 * s} ${cy - 5 * s}, ${cx} ${cy + 12 * s}`; } function generateInfinityPath(cx, cy, w, h) { const hw = w / 2; const hh = h / 2; return `M ${cx} ${cy} C ${cx + hw * 0.5} ${cy - hh}, ${cx + hw} ${cy - hh}, ${cx + hw} ${cy} C ${cx + hw} ${cy + hh}, ${cx + hw * 0.5} ${cy + hh}, ${cx} ${cy} C ${cx - hw * 0.5} ${cy + hh}, ${cx - hw} ${cy + hh}, ${cx - hw} ${cy} C ${cx - hw} ${cy - hh}, ${cx - hw * 0.5} ${cy - hh}, ${cx} ${cy}`; } function generateWavePath(cx, cy, w, amplitude, waves) { const pts = []; const segs = waves * 20; const hw = w / 2; for (let i = 0; i <= segs; i++) { const x = cx - hw + (w * i) / segs; const y = cy + Math.sin((i / segs) * waves * 2 * Math.PI) * amplitude; pts.push(i === 0 ? `M ${x} ${y}` : `L ${x} ${y}`); } for (let i = segs; i >= 0; i--) { const x = cx - hw + (w * i) / segs; const y = cy - Math.sin((i / segs) * waves * 2 * Math.PI) * amplitude; pts.push(`L ${x} ${y}`); } return pts.join(' ') + ' Z'; } const clamp = (value, min, max) => Math.min(max, Math.max(min, value)); const toCssLength = value => (typeof value === 'number' ? `${value}px` : value); const wrapSigned = value => value - Math.round(value); const cubicBezier = (x1, y1, x2, y2) => { const sample = (a1, a2, t) => ((1 - 3 * a2 + 3 * a1) * t + (3 * a2 - 6 * a1)) * t * t + 3 * a1 * t; const slope = (a1, a2, t) => 3 * (1 - 3 * a2 + 3 * a1) * t * t + 2 * (3 * a2 - 6 * a1) * t + 3 * a1; return x => { if (x <= 0 || x >= 1) return x; let t = x; for (let i = 0; i < 8; i++) { const s = slope(x1, x2, t); if (Math.abs(s) < 1e-6) break; t = clamp(t - (sample(x1, x2, t) - x) / s, 0, 1); } return sample(y1, y2, t); }; }; const EASINGS = { linear: t => t, easeIn: cubicBezier(0.42, 0, 1, 1), easeOut: cubicBezier(0, 0, 0.58, 1), easeInOut: cubicBezier(0.42, 0, 0.58, 1) }; const easeOutQuint = t => 1 - Math.pow(1 - t, 5); const estimateAspect = ({ shape, radiusX, radiusY, radius, itemSize }) => { const wide = shape === 'ellipse' || shape === 'rectangle' || shape === 'infinity' || shape === 'wave'; const w = (wide ? radiusX : radius) * 2 + itemSize * 1.6; const h = (wide ? radiusY : radius) * 2 + itemSize * 1.6; return w > 0 && h > 0 ? w / h : 1; }; const createEngine = (root, config, setAspect) => { const query = typeof window.matchMedia === 'function' ? window.matchMedia('(prefers-reduced-motion: reduce)') : null; const st = { lut: null, length: 0, front: 0, yMid: 0, yHalf: 1, bbox: [0, 0, 1, 1], width: 0, height: 0, scale: 0, size: 0, items: [], strokes: [], lap: 0, manual: 0, glide: 0, speed: 1, drag: null, seek: null, hovered: false, hoverIndex: -1, suppressUntil: 0, introStart: -1, introDone: !config.current.intro, visible: typeof IntersectionObserver === 'undefined', reduced: !!query?.matches, raf: 0, last: 0, destroyed: false }; st.speed = st.reduced || config.current.paused ? 0 : 1; const collect = () => { st.items = Array.from(root.querySelectorAll('[data-orbit-item]')).map(el => ({ el, t: '', o: '', z: '' })); st.strokes = Array.from(root.querySelectorAll('[data-orbit-stroke]')); }; const build = () => { const cfg = config.current; const path = root.querySelector('[data-orbit-path]'); let length = 0; try { length = path ? path.getTotalLength() : 0; } catch { length = 0; } if (!path || !length || !isFinite(length)) { st.lut = null; return; } const lut = new Float32Array(SAMPLES * 2); const angle = (cfg.rotation * Math.PI) / 180; const cos = Math.cos(angle); const sin = Math.sin(angle); const origin = cfg.baseWidth / 2; let x0 = Infinity; let x1 = -Infinity; let y0 = Infinity; let y1 = -Infinity; let front = 0; for (let i = 0; i < SAMPLES; i++) { const point = path.getPointAtLength((i / SAMPLES) * length); const dx = point.x - origin; const dy = point.y - origin; const x = origin + dx * cos - dy * sin; const y = origin + dx * sin + dy * cos; lut[i * 2] = x; lut[i * 2 + 1] = y; x0 = Math.min(x0, x); x1 = Math.max(x1, x); y0 = Math.min(y0, y); y1 = Math.max(y1, y); if (y > lut[front * 2 + 1] + 1e-6) front = i; } st.lut = lut; st.length = length; st.front = front / SAMPLES; st.yMid = (y0 + y1) / 2; st.yHalf = Math.max(1e-3, (y1 - y0) / 2); const depth = clamp(cfg.depth, 0, 1); const margin = (cfg.itemSize / 2) * (1 + depth * FRONT_GROW) * Math.max(1, cfg.hoverScale) + 2; st.bbox = [x0 - margin, y0 - margin, x1 + margin, y1 + margin]; setAspect((x1 - x0 + margin * 2) / (y1 - y0 + margin * 2)); }; const layout = () => { const cfg = config.current; st.width = root.clientWidth; st.height = root.clientHeight; if (!st.lut) return; const [bx0, by0, bx1, by1] = st.bbox; const scale = Math.min(st.width / (bx1 - bx0), st.height / (by1 - by0)); st.scale = scale > 0 && isFinite(scale) ? scale : 0; st.size = cfg.itemSize * st.scale; for (const it of st.items) { it.el.style.width = `${st.size}px`; it.el.style.height = `${st.size}px`; } if (!st.scale) return; const vw = st.width / st.scale; const vh = st.height / st.scale; const cx = (bx0 + bx1) / 2; const cy = (by0 + by1) / 2; root.querySelectorAll('[data-orbit-svg]').forEach(svg => { svg.setAttribute('viewBox', `${cx - vw / 2} ${cy - vh / 2} ${vw} ${vh}`); }); const clip = root.querySelector('[data-orbit-clip]'); if (clip) { clip.setAttribute('x', String(cx - vw)); clip.setAttribute('y', String(st.yMid)); clip.setAttribute('width', String(vw * 2)); clip.setAttribute('height', String(vh * 2)); } for (const stroke of st.strokes) { stroke.style.strokeWidth = String(cfg.pathWidth / st.scale); } applyDash(1); }; const applyDash = reveal => { const cfg = config.current; const dash = cfg.pathDash > 0 && st.scale ? cfg.pathDash / st.scale : 0; for (const stroke of st.strokes) { if (reveal < 1 && !dash) { stroke.style.strokeDasharray = `${st.length} ${st.length}`; stroke.style.strokeDashoffset = String(st.length * (1 - reveal)); stroke.style.opacity = ''; } else { stroke.style.strokeDasharray = dash ? `${dash} ${dash * 1.6}` : ''; stroke.style.strokeDashoffset = ''; stroke.style.opacity = reveal < 1 ? String(reveal) : ''; } } }; const sample = u => { const f = (((u % 1) + 1) % 1) * SAMPLES; const i0 = Math.floor(f) % SAMPLES; const i1 = (i0 + 1) % SAMPLES; const t = f - Math.floor(f); const lut = st.lut; return [lut[i0 * 2] + (lut[i1 * 2] - lut[i0 * 2]) * t, lut[i0 * 2 + 1] + (lut[i1 * 2 + 1] - lut[i0 * 2 + 1]) * t]; }; const heading = u => { const a = sample(u - 2 / SAMPLES); const b = sample(u + 2 / SAMPLES); return (Math.atan2(b[1] - a[1], b[0] - a[0]) * 180) / Math.PI; }; const progress = () => { const cfg = config.current; const ease = EASINGS[cfg.easing] || EASINGS.linear; const whole = Math.floor(st.lap); return (whole + ease(st.lap - whole)) * (cfg.direction === 'reverse' ? -1 : 1) + st.manual; }; const offsetOf = (index, count) => { const cfg = config.current; if (cfg.fill) return index / Math.max(1, count); return (-index * cfg.itemSize * 1.3) / Math.max(1, st.length); }; const write = (it, key, prop, value) => { if (it[key] !== value) { it[key] = value; it.el.style[prop] = value; } }; const render = now => { const cfg = config.current; if (!st.lut || !st.scale) return; const p = progress(); const count = st.items.length; const depth = clamp(cfg.depth, 0, 1); const [bx0, by0, bx1, by1] = st.bbox; const cx = (bx0 + bx1) / 2; const cy = (by0 + by1) / 2; const half = st.size / 2; const introRunning = st.introStart >= 0; const elapsed = introRunning ? (now - st.introStart) / 1000 : 0; const spread = introRunning ? easeOutQuint(clamp(elapsed / INTRO_SPREAD, 0, 1)) : 1; const appear = introRunning ? clamp(elapsed / INTRO_FADE, 0, 1) : 1; for (let i = 0; i < count; i++) { const it = st.items[i]; let u = p + offsetOf(i, count); if (introRunning) u = st.front + wrapSigned(u - st.front) * spread; const [x, y] = sample(u); const d = clamp((y - st.yMid) / st.yHalf, -1, 1); const w = (d + 1) / 2; let scale = 1 + depth * (FRONT_GROW * w - BACK_SHRINK * (1 - w)); let opacity = 1 - depth * BACK_DIM * (1 - w); if (introRunning) { scale *= 0.7 + 0.3 * appear; opacity *= appear * appear * (3 - 2 * appear); } const sx = (x - cx) * st.scale + st.width / 2 - half; const sy = (y - cy) * st.scale + st.height / 2 - half; const rot = cfg.alignToPath ? heading(u) : 0; let z = depth > 0 ? (d <= 0 ? 10 + Math.round((d + 1) * 80) : 110 + Math.round(d * 80)) : 1; if (i === st.hoverIndex) z += 200; write( it, 't', 'transform', `translate3d(${sx.toFixed(2)}px, ${sy.toFixed(2)}px, 0px)${rot ? ` rotate(${rot.toFixed(2)}deg)` : ''} scale(${scale.toFixed(4)})` ); write(it, 'o', 'opacity', opacity > 0.999 ? '' : opacity.toFixed(3)); write(it, 'z', 'zIndex', String(z)); } if (introRunning) applyDash(easeOutQuint(clamp(elapsed / INTRO_SPREAD, 0, 1))); }; const frame = now => { st.raf = 0; if (st.destroyed) return; const cfg = config.current; const dt = st.last ? clamp((now - st.last) / 1000, 0, 0.1) : 0; st.last = now; let busy = false; if (st.lut && st.scale && st.introStart === -1 && !st.introDone && st.visible) { if (cfg.intro && !st.reduced) { st.introStart = now; } else { st.introDone = true; } root.removeAttribute('data-intro'); } if (st.introStart >= 0) { if ((now - st.introStart) / 1000 >= INTRO_SPREAD) { st.introStart = -2; st.introDone = true; applyDash(1); } else { busy = true; } } const want = cfg.paused || st.reduced ? 0 : st.hovered ? clamp(cfg.hoverSpeed, 0, 1) : 1; if (st.speed !== want) { st.speed += (want - st.speed) * (1 - Math.exp(-dt / 0.35)); if (Math.abs(st.speed - want) < 0.002) st.speed = want; busy = true; } if (st.speed > 0 && cfg.duration > 0) { st.lap += (dt * st.speed) / cfg.duration; busy = true; } if (st.drag?.active) { busy = true; } else if (st.seek) { st.seek.t = Math.min(1, st.seek.t + dt / st.seek.dur); const e = st.seek.t < 0.5 ? 4 * st.seek.t ** 3 : 1 - Math.pow(-2 * st.seek.t + 2, 3) / 2; st.manual = st.seek.from + st.seek.delta * e; if (st.seek.t >= 1) st.seek = null; busy = true; } else if (st.glide) { st.manual += st.glide * dt; st.glide *= Math.exp(-dt / 0.7); if (Math.abs(st.glide) < 0.0004) st.glide = 0; busy = true; } render(now); const whole = Math.floor(st.lap); if (whole) st.lap -= whole; if (!st.drag && !st.seek) st.manual -= Math.floor(st.manual); if (busy && st.visible && !st.destroyed) st.raf = requestAnimationFrame(frame); }; const wake = () => { if (st.raf || st.destroyed || !st.visible) return; st.last = 0; st.raf = requestAnimationFrame(frame); }; const local = e => { const r = root.getBoundingClientRect(); const k = root.offsetWidth ? r.width / root.offsetWidth || 1 : 1; return [(e.clientX - r.left) / k, (e.clientY - r.top) / k]; }; const dragRate = () => { if (!st.lut || !st.scale) return 0; const a = sample(st.front - 3 / SAMPLES); const b = sample(st.front + 3 / SAMPLES); const along = ((b[0] - a[0]) / (6 / SAMPLES)) * st.scale; const floor = st.length * st.scale * 0.35; return Math.abs(along) < floor ? Math.sign(along || 1) * floor : along; }; const itemIndex = target => { const el = target instanceof Element ? target.closest('[data-orbit-item]') : null; return el && root.contains(el) ? Number(el.getAttribute('data-orbit-item')) : -1; }; const bringToFront = index => { if (!st.lut || index < 0) return; const u = progress() + offsetOf(index, st.items.length); const delta = wrapSigned(st.front - u); st.glide = 0; st.seek = { from: st.manual, delta, t: 0, dur: 0.45 + Math.abs(delta) * 1.4 }; wake(); }; const onEnter = () => { st.hovered = true; wake(); }; const onLeave = () => { st.hovered = false; st.hoverIndex = -1; wake(); }; const onOver = e => { const index = itemIndex(e.target); if (index !== st.hoverIndex) { st.hoverIndex = index; if (st.lut) render(performance.now()); } }; const onDown = e => { const cfg = config.current; if (!cfg.draggable || (e.pointerType === 'mouse' && e.button !== 0)) return; if (e.target instanceof Element && e.target.closest('[data-orbit-center]')) return; const [x, y] = local(e); st.drag = { id: e.pointerId, x, y, active: false, samples: [], rate: dragRate(), anchor: 0, manual: 0 }; }; const onMove = e => { const d = st.drag; if (!d || e.pointerId !== d.id) return; const [x, y] = local(e); const along = x - d.x; if (!d.active) { if (Math.abs(along) < DRAG_THRESHOLD) return; if (Math.abs(y - d.y) > Math.abs(along)) { st.drag = null; return; } d.active = true; d.anchor = along; d.manual = st.manual; st.seek = null; st.glide = 0; try { root.setPointerCapture(e.pointerId); } catch {} root.setAttribute('data-dragging', ''); } if (d.rate) st.manual = d.manual + (along - d.anchor) / d.rate; const now = performance.now(); d.samples.push([now, along]); while (d.samples.length > 2 && now - d.samples[0][0] > 100) d.samples.shift(); wake(); }; const endDrag = (e, cancelled) => { const d = st.drag; if (!d || e.pointerId !== d.id) return; st.drag = null; if (!d.active) return; root.removeAttribute('data-dragging'); try { root.releasePointerCapture(e.pointerId); } catch {} const now = performance.now(); st.suppressUntil = now + 400; const s = d.samples; if (!cancelled && s.length > 1 && d.rate) { const [t0, a0] = s[0]; const [t1, a1] = s[s.length - 1]; if (t1 > t0 && now - t1 < 80) st.glide = clamp((((a1 - a0) / (t1 - t0)) * 1000) / d.rate, -3, 3); } wake(); }; const onUp = e => endDrag(e, false); const onCancel = e => endDrag(e, true); const activate = index => { const cfg = config.current; if (index < 0) return; if (cfg.clickToFront) bringToFront(index); cfg.onItemClick?.(index, cfg.sources[index]); }; const onClick = e => { if (performance.now() < st.suppressUntil) { e.preventDefault(); e.stopPropagation(); st.suppressUntil = 0; return; } activate(itemIndex(e.target)); }; const onKey = e => { if (e.key !== 'Enter' && e.key !== ' ') return; const index = itemIndex(e.target); if (index < 0) return; e.preventDefault(); activate(index); }; const onFocus = e => { const index = itemIndex(e.target); if (index >= 0 && config.current.clickToFront && e.target instanceof Element && e.target.matches(':focus-visible')) bringToFront(index); }; const onMotion = () => { st.reduced = !!query?.matches; wake(); }; root.addEventListener('pointerenter', onEnter); root.addEventListener('pointerleave', onLeave); root.addEventListener('pointerover', onOver); root.addEventListener('pointerdown', onDown); root.addEventListener('pointermove', onMove); root.addEventListener('pointerup', onUp); root.addEventListener('pointercancel', onCancel); root.addEventListener('lostpointercapture', onCancel); root.addEventListener('click', onClick); root.addEventListener('keydown', onKey); root.addEventListener('focusin', onFocus); query?.addEventListener?.('change', onMotion); let resizeObserver = null; if (typeof ResizeObserver !== 'undefined') { resizeObserver = new ResizeObserver(() => { layout(); render(performance.now()); wake(); }); resizeObserver.observe(root); } let intersection = null; if (typeof IntersectionObserver !== 'undefined') { intersection = new IntersectionObserver( entries => { st.visible = entries[entries.length - 1].isIntersecting; if (st.visible) wake(); }, { threshold: 0.05 } ); intersection.observe(root); } const onVisibility = () => { if (!document.hidden) wake(); }; document.addEventListener('visibilitychange', onVisibility); window.addEventListener('resize', wake); const refresh = () => { collect(); build(); layout(); render(performance.now()); wake(); }; const destroy = () => { st.destroyed = true; if (st.raf) cancelAnimationFrame(st.raf); root.removeEventListener('pointerenter', onEnter); root.removeEventListener('pointerleave', onLeave); root.removeEventListener('pointerover', onOver); root.removeEventListener('pointerdown', onDown); root.removeEventListener('pointermove', onMove); root.removeEventListener('pointerup', onUp); root.removeEventListener('pointercancel', onCancel); root.removeEventListener('lostpointercapture', onCancel); root.removeEventListener('click', onClick); root.removeEventListener('keydown', onKey); root.removeEventListener('focusin', onFocus); query?.removeEventListener?.('change', onMotion); document.removeEventListener('visibilitychange', onVisibility); window.removeEventListener('resize', wake); resizeObserver?.disconnect(); intersection?.disconnect(); }; return { refresh, wake, destroy }; }; export default function OrbitImages({ images = [], altPrefix = 'Orbiting image', shape = 'ellipse', customPath, baseWidth = 1400, radiusX = 700, radiusY = 170, radius = 300, starPoints = 5, starInnerRatio = 0.5, rotation = -8, duration = 40, itemSize = 64, direction = 'normal', fill = true, width = '100%', height = 'auto', className = '', showPath = false, pathColor = 'rgba(128,128,128,0.35)', pathWidth = 2, pathDash = 0, easing = 'linear', paused = false, depth = 0.5, itemRadius = 12, shadow = 0.3, hoverScale = 1.08, hoverSpeed = 0.3, draggable = true, clickToFront = true, onItemClick, alignToPath = false, intro = true, centerContent }) { const rootRef = useRef(null); const engineRef = useRef(null); const clipId = useId().replace(/:/g, ''); const [introPending] = useState(intro); const [measuredAspect, setAspect] = useState(null); const center = baseWidth / 2; const path = useMemo(() => { switch (shape) { case 'circle': return generateCirclePath(center, center, radius); case 'ellipse': return generateEllipsePath(center, center, radiusX, radiusY); case 'square': return generateSquarePath(center, center, radius * 2); case 'rectangle': return generateRectanglePath(center, center, radiusX * 2, radiusY * 2); case 'triangle': return generateTrianglePath(center, center, radius * 2); case 'star': return generateStarPath(center, center, radius, radius * starInnerRatio, starPoints); case 'heart': return generateHeartPath(center, center, radius * 2); case 'infinity': return generateInfinityPath(center, center, radiusX * 2, radiusY * 2); case 'wave': return generateWavePath(center, center, radiusX * 2, radiusY, 3); case 'custom': return customPath || generateCirclePath(center, center, radius); default: return generateEllipsePath(center, center, radiusX, radiusY); } }, [shape, customPath, center, radiusX, radiusY, radius, starPoints, starInnerRatio]); const items = useMemo( () => images.map((image, index) => typeof image === 'string' ? { src: image, alt: `${altPrefix} ${index + 1}` } : { src: image.src, alt: image.alt ?? `${altPrefix} ${index + 1}` } ), [images, altPrefix] ); const interactive = !!onItemClick; const config = useRef(null); config.current = { baseWidth, rotation, duration, itemSize, direction, fill, pathWidth, pathDash, easing, paused, depth, hoverScale, hoverSpeed, draggable, clickToFront, onItemClick, alignToPath, intro, sources: items.map(item => item.src) }; useIsomorphicLayoutEffect(() => { const engine = createEngine(rootRef.current, config, setAspect); engineRef.current = engine; return () => { engine.destroy(); engineRef.current = null; }; }, []); useIsomorphicLayoutEffect(() => { engineRef.current?.refresh(); }, [ path, rotation, baseWidth, itemSize, depth, hoverScale, items.length, showPath, pathWidth, pathDash, measuredAspect, height ]); useEffect(() => { engineRef.current?.wake(); }); const aspect = measuredAspect ?? estimateAspect({ shape, radiusX, radiusY, radius, itemSize }); const autoHeight = height === 'auto' || height === undefined; const layered = depth > 0 && !!centerContent; return (

{showPath && layered && ( )} {items.map((item, index) => (

))} {centerContent && (

{centerContent}

)}

); } 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":"OrbitImages/OrbitImages.jsx","content":"$51","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]