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:T2e23,'use client'; import { useMemo, useRef } from 'react'; import { useKineticCanvas } from './kinetic-canvas'; import { kineticClamp, orbitRadius, seededKinetic, agentBlink } from './kinetic-math'; export type AgentMood = 'idle' | 'happy' | 'listening' | 'sleepy'; export type OrbitAgentProps = { agentMood?: AgentMood; ringCount?: number; orbitSpeed?: number; accentColor?: string; onAgentClick?: (mood: AgentMood) => void; interactive?: boolean; paused?: boolean; compact?: boolean; className?: string; }; export default function OrbitAgent({ agentMood = 'idle', ringCount = 5, orbitSpeed = 1, accentColor = '#c4b5fd', onAgentClick, interactive = true, paused = false, compact = false, className = '', }: OrbitAgentProps) { const mood = agentMood; const state = useRef({ time: 2, faceTime: 0, x: 0, y: 0, tx: 0, ty: 0, hover: 0, hoverTo: 0, ring: 0, ringV: 0, jump: 0, jumpV: 0, squash: 0, squashV: 0, age: 10, }), stars = useMemo(() => { const r = seededKinetic(307); return Array.from({ length: 23 }, () => ({ x: r(), y: r(), size: r(), phase: r() * Math.PI * 2, })); }, []); const { host, canvas, invalidate } = useKineticCanvas( ({ g, w, h, dt, still }) => { const s = state.current; if (!still) { s.time += dt * kineticClamp(orbitSpeed, 0.1, 3); s.age += dt; s.faceTime += dt; const ease = 1 - Math.exp(-dt * 7); s.x += (s.tx - s.x) * ease; s.y += (s.ty - s.y) * ease; s.hover += (s.hoverTo - s.hover) * ease; for (const [pos, vel, k, d] of [ ['ring', 'ringV', 70, 12], ['jump', 'jumpV', 95, 11], ['squash', 'squashV', 130, 13], ] as const) { s[vel] += (-s[pos] * k - s[vel] * d) * dt; s[pos] += s[vel] * dt; } } const accent = /^#[\da-f]{6}$/i.test(accentColor) ? accentColor : '#c4b5fd', unit = Math.min(w, h), body = unit * 0.16, time = still ? 2 : s.time, flash = still ? 0 : Math.exp(-s.age * 3), joy = mood === 'happy' ? 1 : still ? 0 : Math.sin(Math.PI * kineticClamp(s.age / 0.9, 0, 1)) ** 2; g.fillStyle = '#0b0d14'; g.fillRect(0, 0, w, h); for (let i = 0; i < stars.length; i++) { const star = stars[i], x = star.x * w, y = star.y * h, alpha = 0.15 + (0.5 + 0.5 * Math.sin(time * 0.65 + star.phase)) * 0.45; g.globalAlpha = alpha; g.fillStyle = i % 3 === 0 ? accent : '#eef2ff'; const r = 0.45 + star.size * 0.7; g.beginPath(); g.arc(x, y, r, 0, Math.PI * 2); g.fill(); if (i % 5 === 0) { g.strokeStyle = accent; g.lineWidth = 0.6; g.beginPath(); g.moveTo(x - r * 3, y); g.lineTo(x + r * 3, y); g.moveTo(x, y - r * 3); g.lineTo(x, y + r * 3); g.stroke(); } } g.globalAlpha = 1; g.save(); g.translate(w / 2, h / 2); g.globalCompositeOperation = 'lighter'; const count = Math.round(kineticClamp(ringCount, 3, 8)); for (let layer = 0; layer < count; layer++) { const radius = unit * (0.235 + layer * 0.024) * (1 + s.ring * 0.09), rotation = time * (0.035 + layer * 0.008) * (layer % 2 ? -1 : 1), speed = time * (1 + s.hover * 0.15); g.save(); g.rotate(rotation); g.scale(1, 0.89 + layer * 0.025); g.beginPath(); const point = (index: number) => { const a = (index / 96) * Math.PI * 2, r = radius * orbitRadius(a, speed, layer); return [Math.cos(a) * r, Math.sin(a) * r]; }; const start = point(0); g.moveTo(start[0], start[1]); for (let i = 0; i < 96; i++) { const a = point(i - 1), b = point(i), c = point(i + 1), d = point(i + 2); g.bezierCurveTo( b[0] + (c[0] - a[0]) / 6, b[1] + (c[1] - a[1]) / 6, c[0] - (d[0] - b[0]) / 6, c[1] - (d[1] - b[1]) / 6, c[0], c[1], ); } g.closePath(); g.globalAlpha = Math.min( 1, 0.16 + ((count - layer) / count) * 0.48 + flash * 0.65, ); g.strokeStyle = layer % 2 ? accent : '#e8ecff'; g.lineWidth = Math.max(0.55, unit / 850); g.shadowColor = accent; g.shadowBlur = flash * 7; g.stroke(); g.shadowBlur = 0; g.globalAlpha = 1; const a = time * 0.12 + layer * 1.1, r = radius * orbitRadius(a, speed, layer); g.beginPath(); g.arc(Math.cos(a) * r, Math.sin(a) * r, unit * 0.0022, 0, Math.PI * 2); g.fillStyle = '#fff'; g.globalAlpha = 0.55 + flash * 0.4; g.fill(); g.globalAlpha = 1; g.restore(); } if (s.age < 1.5 && !still) for (let i = 0; i < 14; i++) { const a = (i / 14) * Math.PI * 2 + 0.2, r = body * (1.3 + s.age * 3.2), x = Math.cos(a) * r, y = Math.sin(a) * r, size = unit * 0.007 * (1 - s.age / 1.5), tail = 1 - s.age / 1.5; g.globalAlpha = tail; g.strokeStyle = i % 2 ? accent : '#fff'; g.lineWidth = 1; g.beginPath(); g.moveTo(x - size, y); g.lineTo(x + size, y); g.moveTo(x, y - size); g.lineTo(x, y + size); g.stroke(); } g.globalAlpha = 1; g.globalCompositeOperation = 'source-over'; const float = Math.sin(time * 1.15) * body * 0.045, tilt = (interactive ? s.x * 0.12 : 0) + Math.sin(time * 0.65) * 0.025; g.translate((interactive ? s.x : 0) * body * 0.12, float + s.jump * body * 0.5); g.rotate(tilt); g.scale(1 + s.squash * 0.09, 1 - s.squash * 0.12); g.save(); // The pearlescent shell turns independently; gaze and expression stay upright. g.rotate(time * 0.12); const gradient = g.createLinearGradient(-body, -body, body, body); gradient.addColorStop(0, '#74adff'); gradient.addColorStop(0.4, '#b2e7ff'); gradient.addColorStop(0.72, '#f8c8f7'); gradient.addColorStop(1, '#b29aee'); // A smooth scalloped silhouette, with gently breathing, unequal lobes. const outline = (index: number) => { const a = (index / 96) * Math.PI * 2; const r = body * (1 + 0.036 * Math.cos(a * 10 + Math.sin(time * 0.5) * 0.3) + 0.024 * Math.sin(a * 3 - time * 0.25)); return [Math.cos(a) * r, Math.sin(a) * r]; }; g.beginPath(); const start = outline(0); g.moveTo(start[0], start[1]); for (let i = 0; i < 96; i++) { const a = outline(i - 1), b = outline(i), c = outline(i + 1), d = outline(i + 2); g.bezierCurveTo( b[0] + (c[0] - a[0]) / 6, b[1] + (c[1] - a[1]) / 6, c[0] - (d[0] - b[0]) / 6, c[1] - (d[1] - b[1]) / 6, c[0], c[1], ); } g.closePath(); g.fillStyle = gradient; g.shadowColor = '#b6b4ff'; g.shadowBlur = body * 0.32; g.fill(); g.shadowBlur = 0; g.save(); g.clip(); for (const [x, y, color] of [ [-0.55, 0.4, '#c3ffff'], [0.6, -0.4, '#ffd5f6'], [-0.3, -0.55, '#67a9ff'], ] as const) { const light = g.createRadialGradient( body * x, body * y, 0, body * x, body * y, body * 1.2, ); light.addColorStop(0, color); light.addColorStop(1, color + '00'); g.fillStyle = light; g.fillRect(-body * 1.1, -body * 1.1, body * 2.2, body * 2.2); } const pearl = g.createRadialGradient(0, 0, body * 0.55, 0, 0, body * 1.04); pearl.addColorStop(0, '#ffffff00'); pearl.addColorStop(0.75, '#fff2ff22'); pearl.addColorStop(1, '#fff1ffb0'); g.fillStyle = pearl; g.fillRect(-body * 1.1, -body * 1.1, body * 2.2, body * 2.2); g.restore(); g.strokeStyle = '#f2ddffbd'; g.lineWidth = body * 0.045; g.stroke(); g.strokeStyle = '#ffffff80'; g.lineWidth = body * 0.012; g.stroke(); g.restore(); g.translate(s.x * body * 0.075, s.y * body * 0.065); const eyeY = -body * 0.11, eyeX = body * 0.235, blink = still ? 1 : agentBlink(s.faceTime); g.strokeStyle = '#26112f'; g.fillStyle = '#26112f'; g.lineWidth = body * 0.055; g.lineCap = 'round'; for (const side of [-1, 1]) { const x = eyeX * side; g.beginPath(); g.ellipse( x, eyeY + body * 0.035 * (1 - blink), body * 0.16 * (1 + joy * 0.04), body * 0.265 * blink * (mood === 'sleepy' ? 0.42 : 1 - joy * 0.09), -0.12, 0, Math.PI * 2, ); g.fill(); } for (const side of [-1, 1]) { const blush = g.createRadialGradient( side * body * 0.4, body * 0.16, 0, side * body * 0.4, body * 0.16, body * 0.15, ); blush.addColorStop(0, accent + '80'); blush.addColorStop(1, accent + '00'); g.fillStyle = blush; g.beginPath(); g.ellipse( side * body * 0.4, body * 0.16, body * 0.15, body * 0.1, 0, 0, Math.PI * 2, ); g.fill(); } if (mood === 'listening') for (let i = 0; i < 3; i++) { g.fillStyle = accent; g.globalAlpha = 0.4 + 0.5 * Math.sin(time * 3 + i); g.beginPath(); g.arc((i - 1) * body * 0.2, -body * 1.35, body * 0.035, 0, Math.PI * 2); g.fill(); } g.globalAlpha = 1; g.restore(); }, paused, compact, ); const activate = () => { if (!interactive || paused) return; onAgentClick?.(mood); const s = state.current; s.age = 0; s.ringV += 3.8; s.jumpV -= 3.8; s.squashV += 4.5; invalidate(); }; return (

{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (!e.repeat) activate(); } }} onPointerMove={(e) => { if (!interactive || paused) return; const r = e.currentTarget.getBoundingClientRect(); const s = state.current; s.tx = kineticClamp(((e.clientX - r.left) / r.width) * 2 - 1, -1, 1); s.ty = kineticClamp(((e.clientY - r.top) / r.height) * 2 - 1, -1, 1); s.hoverTo = 1; }} onPointerLeave={() => { const s = state.current; s.tx = s.ty = s.hoverTo = 0; }} >

); } const styles = `.mq-orbit-agent{position:relative;width:100%;height:100%;min-height:220px;overflow:hidden;background:#0b0d14;outline:none;touch-action:manipulation}.mq-orbit-agent[role=button]{cursor:pointer}.mq-orbit-agent:focus-visible{outline:1px solid #c4b5fd;outline-offset:-6px}.mq-orbit-agent>canvas{position:absolute;inset:0;display:block;width:100%;height:100%}`; 18:T72e,'use client'; import { useEffect, useRef } from 'react'; import { effectRuntime } from './effect-runtime'; export type KineticFrame = { g: CanvasRenderingContext2D; w: number; h: number; time: number; dt: number; still: boolean; }; /** Shared visibility, DPR, pause and resource ownership for the three 2D studies. */ export function useKineticCanvas( render: (frame: KineticFrame) => void, paused: boolean, compact: boolean, ) { const host = useRef(null), canvas = useRef(null), latest = useRef({ render, paused }), sync = useRef<() => void>(() => {}); latest.current = { render, paused }; useEffect(() => { const el = host.current!, surface = canvas.current!, g = surface.getContext('2d'); if (!g) { el.dataset.failed = 'true'; return; } const reduced = matchMedia('(prefers-reduced-motion: reduce)'); const clock = effectRuntime( el, surface, (time, dt) => { const w = el.clientWidth, h = el.clientHeight; if (!w || !h) return false; g.setTransform(surface.width / w, 0, 0, surface.height / h, 0, 0); g.globalCompositeOperation = 'source-over'; g.globalAlpha = 1; g.shadowBlur = 0; g.clearRect(0, 0, w, h); latest.current.render({ g, w, h, time, dt, still: latest.current.paused || reduced.matches, }); }, () => latest.current.paused, undefined, compact, ); sync.current = clock.invalidate; return () => { sync.current = () => {}; clock.dispose(); surface.width = surface.height = 0; }; }, [compact]); useEffect(() => sync.current()); return { host, canvas, invalidate: () => sync.current() }; } 19:Tf9c,export const kineticClamp = (v: number, a: number, b: number) => Math.max(a, Math.min(b, Number.isFinite(v) ? v : a)); export const kineticMix = (a: number, b: number, t: number) => a + (b - a) * t; export const kineticSmooth = (a: number, b: number, v: number) => { const t = kineticClamp((v - a) / (b - a), 0, 1); return t * t * (3 - 2 * t); }; export function lotusPose(progress: number) { const p = kineticClamp(progress, 0, 100) / 100, open = kineticSmooth(0.1, 0.5, p), round = kineticSmooth(0.8, 1, p); return { spread: kineticMix(0.025, 0.245, open), radius: kineticMix(0.72, 1, open) * (1 - round * 0.035), roundness: round, open, }; } /** Round-trip cycling reaches 100 without a discontinuity back to the first pose. */ export const lotusCycle = (elapsed: number, duration: number) => 50 - 50 * Math.cos((Math.PI * 2 * elapsed) / Math.max(2, duration)); export function lotusFormation(progress: number) { return { gather: kineticSmooth(0, 12, progress), petals: kineticSmooth(5, 18, progress), dust: 1 - kineticSmooth(9, 20, progress), }; } /** Two overlapping generations: a new crown grows as the older one dissolves. */ export function turbineCrowns(time: number) { return [0, 0.5].map((offset) => { const phase = (((time / 5.6 + offset) % 1) + 1) % 1; return { phase, radius: kineticMix(0.56, 1.13, phase), opacity: kineticSmooth(0, 0.18, phase) * (1 - kineticSmooth(0.68, 1, phase)), twist: kineticMix(0.48, 0.08, kineticSmooth(0.05, 0.85, phase)), }; }); } /** A C1 envelope: gear changes begin and end at zero, without a radius/glow step. */ export const turbineShiftPulse = (age: number) => age >= 0 && age < 0.75 ? Math.sin((Math.PI * age) / 0.75) ** 2 : 0; export function agentBlink(time: number) { const cycle = Math.floor(time / 7.3), phase = time - cycle * 7.3; const lid = (start: number) => kineticSmooth(start, start + 0.09, phase) * (1 - kineticSmooth(start + 0.11, start + 0.28, phase)); return 1 - 0.95 * Math.max(lid(4.15), cycle % 3 === 1 ? lid(4.59) : 0); } /** Overscan the far edge, where the perspective frustum is widest. */ export function terrainCoverage(aspect: number, cameraZ: number, fov = 43) { return Math.max( 1, (Math.tan((fov * Math.PI) / 360) * (cameraZ + 19) * aspect * 1.18) / 18, ); } export const turbineGear = (speed: number) => speed <= 25 ? 1 : speed <= 50 ? 2 : speed <= 85 ? 3 : speed <= 125 ? 4 : speed <= 160 ? 5 : 6; export function turbineDemo(time: number, maxSpeed = 210) { const t = ((time % 24) + 24) % 24; const keys = [ [0, 9], [2, 18], [5, 46], [9, 104], [13, 169], [16, 188], [20, 136], [22, 136], [24, 9], ]; const i = keys.findIndex( (k, j) => j < keys.length - 1 && t >= k[0] && t < keys[j + 1][0], ); const a = keys[Math.max(0, i)], b = keys[Math.max(0, i) + 1]; return Math.min(maxSpeed, kineticMix(a[1], b[1], kineticSmooth(a[0], b[0], t))); } export function seededKinetic(seed: number) { let state = seed | 0; return () => { state = (Math.imul(state, 1664525) + 1013904223) | 0; return (state >>> 0) / 4294967296; }; } export function orbitRadius(angle: number, time: number, layer: number) { return ( 1 + Math.sin(angle * 3 + time * 0.42 + layer * 1.3) * (0.045 + layer * 0.009) + Math.cos(angle * 2 - time * 0.28 + layer) * 0.06 + Math.sin(angle * 5 + time * 0.16) * 0.018 ); } export function terrainSeeds(lines: number, points: number) { const l = Math.round(kineticClamp(lines, 16, 120)), n = Math.round(kineticClamp(points, 40, 320)), data = new Float32Array(l * n * 3); for (let z = 0; z < l; z++) for (let x = 0; x < n; x++) { const i = (z * n + x) * 3; data[i] = (x / (n - 1) - 0.5) * 36; data[i + 1] = 0; data[i + 2] = (z / (l - 1)) * 32 - 16; } return data; } 1a:T8b2,/** A demand-driven clock shared by the standalone optical effects. */ export function effectRuntime( host: HTMLElement, canvas: HTMLCanvasElement, render: (time: number, dt: number) => void | boolean, paused: () => boolean, resize?: (width: number, height: number, dpr: number) => void, compact = false, ) { let frame = 0, disposed = false, visible = true, last = 0, time = 2.5, dirty = true; const reduced = matchMedia('(prefers-reduced-motion: reduce)'); function tick(now: number) { frame = 0; if (disposed || !visible || document.hidden) return; const still = paused() || reduced.matches; const dt = Math.min((now - (last || now)) / 1000, 0.04); last = now; if (!still) time += dt; if (dirty || !still) { dirty = false; if (render(time, still ? 0 : dt) !== false) host.dataset.ready = 'true'; } if (!still) frame = requestAnimationFrame(tick); } function invalidate() { dirty = true; if (!disposed && !frame && visible && !document.hidden) frame = requestAnimationFrame(tick); } const ro = new ResizeObserver(() => { const w = Math.max(1, host.clientWidth), h = Math.max(1, host.clientHeight), dpr = Math.min(devicePixelRatio || 1, compact ? 1.5 : 2); canvas.width = Math.round(w * dpr); canvas.height = Math.round(h * dpr); resize?.(w, h, dpr); invalidate(); }); ro.observe(host); const io = new IntersectionObserver((entries) => { visible = entries[0].isIntersecting; last = 0; if (visible) invalidate(); else { cancelAnimationFrame(frame); frame = 0; } }); io.observe(host); function visibility() { last = 0; if (document.hidden) { cancelAnimationFrame(frame); frame = 0; } else invalidate(); } document.addEventListener('visibilitychange', visibility); reduced.addEventListener('change', invalidate); invalidate(); return { invalidate, dispose() { disposed = true; cancelAnimationFrame(frame); ro.disconnect(); io.disconnect(); document.removeEventListener('visibilitychange', visibility); reduced.removeEventListener('change', invalidate); }, }; } b:["$","$L16",null,{"initialView":"preview","originalSource":{"orbit-agent":[{"name":"orbit-agent.tsx","code":"$17"},{"name":"kinetic-canvas.ts","code":"$18"},{"name":"kinetic-math.ts","code":"$19"},{"name":"effect-runtime.ts","code":"$1a"}]},"initialElement":"orbit-agent","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]