16:I[54961,["/_next/static/immutable/chunks/23kzrxojb_1p2.js","/_next/static/immutable/chunks/39h58d1utebdp.js","/_next/static/immutable/chunks/2nrtc1lb04fz1.js","/_next/static/immutable/chunks/21y0r7k6jovn5.js","/_next/static/immutable/chunks/31l88bjo9blmv.js","/_next/static/immutable/chunks/2z8nc0r40hilq.js","/_next/static/immutable/chunks/27fhzxv1uvtm8.js"],"default"] 17:Tac6,'use client'; import { useMemo, useCallback } from 'react'; import SphereStage, { sphereClamp, type SphereState } from './sphere-stage'; import { createOrbit, projectOrbit } from './orbit-math'; export type OrbitProps = { compact?: boolean; paused?: boolean; speed?: number; intensity?: number; rings?: number; strokeWidth?: number; spread?: number; }; const resting: SphereState = { time: 0, tiltX: 0, tiltY: 0, pointerX: 0, pointerY: 0, presence: 0, burst: 0, intensity: 0, small: false, light: false, width: 1, height: 1, radius: 1, }; export default function Orbit({ compact = false, paused = false, speed = 1, intensity = 1, rings = 8, strokeWidth = 0.95, spread = 1, }: OrbitProps) { const full = useMemo(() => createOrbit(rings), [rings]), small = useMemo(() => createOrbit(rings, 36), [rings]); const fallback = useMemo(() => { const geometry = compact ? small : full, data = projectOrbit(geometry, resting, spread); return geometry.paths.map((path) => Array.from({ length: path.length }, (_, j) => { const n = (path.offset + j) * 4; return `${j ? 'L' : 'M'}${data[n].toFixed(5)} ${(-data[n + 1]).toFixed(5)}`; }).join(''), ); }, [compact, full, small, spread]); const render = useCallback( (context: CanvasRenderingContext2D, state: SphereState) => { const geometry = state.small ? small : full, data = projectOrbit(geometry, state, spread), radius = state.radius; context.strokeStyle = state.light ? '#504b46' : '#deddd8'; context.lineWidth = sphereClamp(strokeWidth, 0.3, 2) * (state.small ? 0.85 : 1); context.lineCap = 'round'; context.lineJoin = 'round'; for (const path of geometry.paths) { context.globalAlpha = 0.73; context.beginPath(); for (let j = 0; j < path.length; j++) { const n = (path.offset + j) * 4, x = state.width / 2 + data[n] * radius, y = state.height / 2 - data[n + 1] * radius; if (j === 0) context.moveTo(x, y); else context.lineTo(x, y); } context.stroke(); } }, [full, small, strokeWidth, spread], ); return ( {fallback.map((d, i) => ( ))} ); } 18:Tb02,import { sphereClamp, type SphereState } from './sphere-stage'; export type OrbitRing = { radius: number; phase: number; velocity: number; gap: number; }; export type OrbitPath = { ring: number; offset: number; length: number; start: number; span: number; }; export type OrbitGeometry = { rings: OrbitRing[]; paths: OrbitPath[]; output: Float32Array; }; const TAU = Math.PI * 2; /** Two separated arcs per contour, with constant radii and independent angular speeds. */ export function createOrbit(count = 8, samples = 64): OrbitGeometry { count = Math.round(sphereClamp(count, 4, 12)); samples = Math.round(sphereClamp(samples, 24, 96)); let offset = 0; const rings = Array.from({ length: count }, (_, i) => ({ radius: 0.3 + (0.7 * i) / (count - 1), phase: i * 2.3999632297 + 0.75, velocity: (i % 2 ? -1 : 1) * (0.11 + i * 0.015), gap: 0.1 + 0.025 * (i % 3), })); const paths: OrbitPath[] = []; rings.forEach((ring, i) => { const first = TAU * 0.65, second = TAU * (0.35 - ring.gap), n = Math.ceil(samples * 0.65) + 1, m = Math.ceil(samples * (0.35 - ring.gap)) + 1; paths.push({ ring: i, offset, length: n, start: 0, span: first }); offset += n; paths.push({ ring: i, offset, length: m, start: first + TAU * ring.gap * 0.6, span: second, }); offset += m; }); return { rings, paths, output: new Float32Array(offset * 4) }; } export function projectOrbit(geometry: OrbitGeometry, state: SphereState, spread = 1) { const leanX = state.tiltX, leanY = state.tiltY; for (const path of geometry.paths) { const ring = geometry.rings[path.ring], rx = leanX + 0.035 * Math.sin(state.time * 0.3 + path.ring), ry = leanY + 0.035 * Math.cos(state.time * 0.23 + path.ring), cx = Math.cos(rx), sx = Math.sin(rx), cy = Math.cos(ry), sy = Math.sin(ry); const radius = ring.radius * (1 + state.burst * 0.06 * state.intensity * (0.4 + ring.radius)); for (let j = 0; j < path.length; j++) { const angle = path.start + (path.span * j) / (path.length - 1) + ring.phase + state.time * ring.velocity; const x = Math.cos(angle) * radius, y = Math.sin(angle) * radius, z = 0.025 * Math.sin(angle * 2 + path.ring) * sphereClamp(spread, 0, 2); const x1 = x * cy + z * sy, z1 = -x * sy + z * cy, y1 = y * cx - z1 * sx, z2 = y * sx + z1 * cx, perspective = 3.8 / (3.8 - z2 * 0.2), n = (path.offset + j) * 4; geometry.output[n] = x1 * perspective; geometry.output[n + 1] = y1 * perspective; geometry.output[n + 2] = z2; geometry.output[n + 3] = sphereClamp(0.65 + z2 * 0.25, 0.3, 0.95); } } return geometry.output; } 19:T2815,'use client'; import { useEffect, useRef, type ReactNode } from 'react'; export type SphereState = { time: number; tiltX: number; tiltY: number; pointerX: number; pointerY: number; presence: number; burst: number; intensity: number; small: boolean; light: boolean; width: number; height: number; radius: number; static?: boolean; }; export type SphereRenderer = ( context: CanvasRenderingContext2D, state: SphereState, ) => void; export const sphereClamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, Number.isFinite(value) ? value : min)); export const smoothSphere = (value: number) => { const t = sphereClamp(value, 0, 1); return t * t * t * (t * (t * 6 - 15) + 10); }; /** Shared input, scheduling and canvas ownership; each sculpture owns its geometry. */ export default function SphereStage({ name, label, compact = false, paused = false, speed = 1, intensity = 1, render, children, overlay, }: { name: string; label: string; compact?: boolean; paused?: boolean; speed?: number; intensity?: number; render: SphereRenderer; children: ReactNode; overlay?: ReactNode; }) { const host = useRef(null), canvas = useRef(null), wakeRef = useRef<() => void>(() => {}); const options = useRef({ paused, speed, intensity, render }); options.current = { paused, speed, intensity, render }; useEffect(() => wakeRef.current(), [paused, speed, intensity, render]); useEffect(() => { const root = host.current!, surface = canvas.current!, context = surface.getContext('2d', { alpha: true }); if (!context) return; const reduced = matchMedia('(prefers-reduced-motion: reduce)'); let frame = 0, last = 0, time = 0, visible = true, gone = false, release = 0, impulse = 0; const hand = { x: 0, y: 0, presence: 0 }, wanted = { ...hand }; const state: SphereState = { time: 0, tiltX: 0, tiltY: 0, pointerX: 0, pointerY: 0, presence: 0, burst: 0, intensity: 1, small: compact, light: false, width: 0, height: 0, radius: 1, }; function draw() { if (!state.width || !state.height) return; state.time = reduced.matches ? 0 : time; state.static = options.current.paused || reduced.matches; state.intensity = sphereClamp(options.current.intensity, 0, 1.4) * (state.small ? 0.8 : 1); state.tiltX = hand.y * 0.5 * state.intensity; state.tiltY = hand.x * 0.65 * state.intensity; state.pointerX = hand.x; state.pointerY = hand.y; state.presence = reduced.matches ? 0 : hand.presence; state.light = document.documentElement.dataset.theme === 'light'; context!.clearRect(0, 0, state.width, state.height); options.current.render(context!, state); context!.globalAlpha = 1; root.dataset.ready = 'true'; root.dataset.sceneTime = state.time.toFixed(3); root.dataset.sceneTilt = `${state.tiltX.toFixed(3)},${state.tiltY.toFixed(3)}`; root.dataset.sceneBurst = state.burst.toFixed(3); root.dataset.quality = state.small ? 'compact' : 'full'; } function tick(now: number) { frame = 0; if (gone || !visible || document.hidden) return; if (options.current.paused || reduced.matches) { if (reduced.matches) { hand.x = hand.y = hand.presence = state.burst = impulse = 0; } draw(); return; } const elapsed = (now - last) / 1000; if (state.small && elapsed < 1 / 30) { frame = requestAnimationFrame(tick); return; } const dt = Math.min(0.05, Math.max(0.001, elapsed)), alpha = 1 - Math.exp(-dt * 8); last = now; time += dt * sphereClamp(options.current.speed, 0.25, 2); hand.x += (wanted.x - hand.x) * alpha; hand.y += (wanted.y - hand.y) * alpha; hand.presence += (wanted.presence - hand.presence) * alpha; impulse *= Math.exp(-dt * 1.2); state.burst += (impulse - state.burst) * alpha; draw(); frame = requestAnimationFrame(tick); } function wake() { if (!gone && !frame && visible && !document.hidden) { last = performance.now(); frame = requestAnimationFrame(tick); } } wakeRef.current = wake; function resize() { const box = root.getBoundingClientRect(); state.width = box.width; state.height = box.height; state.small = compact || box.width < 500; state.radius = Math.min(box.width, box.height) * (compact ? 0.4 : 0.35); const density = Math.min(window.devicePixelRatio || 1, state.small ? 1 : 1.5); surface.width = Math.max(1, Math.round(box.width * density)); surface.height = Math.max(1, Math.round(box.height * density)); context!.setTransform(density, 0, 0, density, 0, 0); draw(); wake(); } function move(event: PointerEvent) { if (options.current.paused || reduced.matches) return; clearTimeout(release); const box = root.getBoundingClientRect(); wanted.x = sphereClamp( (event.clientX - box.left - state.width / 2) / state.radius, -1, 1, ); wanted.y = sphereClamp( -(event.clientY - box.top - state.height / 2) / state.radius, -1, 1, ); wanted.presence = 1; wake(); } const rest = () => { wanted.x = wanted.y = wanted.presence = 0; wake(); }; const activate = (event: PointerEvent) => { if (options.current.paused || reduced.matches) return; move(event); impulse = 1; wake(); }; const up = (event: PointerEvent) => { if (event.pointerType !== 'mouse') { clearTimeout(release); release = window.setTimeout(rest, 650); } }; function key(event: KeyboardEvent) { if ( options.current.paused || reduced.matches || !['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', ' '].includes( event.key, ) ) return; event.preventDefault(); clearTimeout(release); if (event.key === ' ') { impulse = 1; } else if (event.key === 'Home') { impulse = 0; rest(); } else { wanted.presence = 1; wanted.x = sphereClamp( wanted.x + (event.key === 'ArrowLeft' ? -0.25 : event.key === 'ArrowRight' ? 0.25 : 0), -1, 1, ); wanted.y = sphereClamp( wanted.y + (event.key === 'ArrowUp' ? 0.25 : event.key === 'ArrowDown' ? -0.25 : 0), -1, 1, ); } wake(); } const visibility = () => { cancelAnimationFrame(frame); frame = 0; wake(); }; const theme = () => draw(); const preference = () => { if (reduced.matches) { wanted.x = wanted.y = wanted.presence = hand.x = hand.y = hand.presence = state.burst = impulse = 0; } visibility(); }; const size = new ResizeObserver(resize), intersection = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; visibility(); }); size.observe(root); intersection.observe(root); root.addEventListener('pointermove', move); root.addEventListener('pointerdown', activate); root.addEventListener('pointerup', up); root.addEventListener('pointerleave', rest); root.addEventListener('pointercancel', rest); root.addEventListener('keydown', key); root.addEventListener('blur', rest); document.addEventListener('visibilitychange', visibility); document.addEventListener('motiqo-theme-change', theme); reduced.addEventListener('change', preference); resize(); return () => { gone = true; cancelAnimationFrame(frame); clearTimeout(release); size.disconnect(); intersection.disconnect(); wakeRef.current = () => {}; root.removeEventListener('pointermove', move); root.removeEventListener('pointerdown', activate); root.removeEventListener('pointerup', up); root.removeEventListener('pointerleave', rest); root.removeEventListener('pointercancel', rest); root.removeEventListener('keydown', key); root.removeEventListener('blur', rest); document.removeEventListener('visibilitychange', visibility); document.removeEventListener('motiqo-theme-change', theme); reduced.removeEventListener('change', preference); surface.width = surface.height = 0; delete root.dataset.ready; }; }, [compact]); const extent = compact ? 1.25 : 1 / 0.7; return (

); } const styles = `.sphere-stage{--sphere-ink:#f3f0ea;position:relative;isolation:isolate;width:100%;height:100%;overflow:hidden;touch-action:pan-y;background:radial-gradient(ellipse at 50% 45%,#171717,#0a0a0a 72%);outline:none}.sphere-stage canvas,.sphere-fallback{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity 600ms cubic-bezier(.22,1,.36,1)}.sphere-stage canvas{opacity:0}.sphere-fallback{color:var(--sphere-ink)}.sphere-stage[data-ready=true] canvas{opacity:1}.sphere-stage[data-ready=true] .sphere-fallback{opacity:0;pointer-events:none}.sphere-stage:focus-visible{outline:1px solid #fff;outline-offset:-5px}html[data-theme=light] .sphere-stage{--sphere-ink:#4a4540;background:radial-gradient(ellipse at 50% 47%,#fff,#f1eee8 74%)}html[data-theme=light] .sphere-stage:focus-visible{outline-color:#302c28}@media(prefers-reduced-motion:reduce){.sphere-stage canvas,.sphere-fallback{transition:none}}`; b:["$","$L16",null,{"initialView":"preview","originalSource":{"orbit":[{"name":"orbit.tsx","code":"$17"},{"name":"orbit-math.ts","code":"$18"},{"name":"sphere-stage.tsx","code":"$19"}]},"initialElement":"orbit","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]