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:T256c,'use client'; import { useCallback, useMemo, useRef, useState, type CSSProperties } from 'react'; import SphereStage, { sphereClamp, type SphereState } from './sphere-stage'; import { auraRisk, nextAuraScore, createAura, projectAura } from './aura-math'; export type AuraProps = { score?: number; onScoreChange?: (score: number) => void; compact?: boolean; paused?: boolean; speed?: number; intensity?: number; waves?: number; density?: 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 Aura({ score, onScoreChange, compact = false, paused = false, speed = 1, intensity = 1, waves = 1, density = 1, }: AuraProps) { const [localScore, setLocalScore] = useState(4.12), goal = sphereClamp(score ?? localScore, 0, 5), risk = auraRisk(goal); const number = useRef(null), level = useRef(null), readout = useRef(null); const display = useRef({ score: goal, time: 0, color: [...risk.color] }); const full = useMemo(() => createAura(false, density), [density]), small = useMemo(() => createAura(true, density), [density]); const fallback = useMemo(() => { const geometry = compact ? small : full, data = projectAura(geometry, resting, waves, goal); return Array.from( { length: geometry.rows }, (_, row) => Array.from({ length: geometry.columns }, (_, col) => { const n = (row * geometry.columns + col) * 6; return `${col ? 'L' : 'M'}${data[n].toFixed(5)} ${(-data[n + 1]).toFixed(5)}`; }).join('') + 'Z', ); }, [compact, full, small, waves, goal]); const render = useCallback( (context: CanvasRenderingContext2D, state: SphereState) => { const current = display.current, dt = Math.max(0.001, Math.min(0.05, state.time - current.time)), alpha = state.static ? 1 : 1 - Math.exp(-dt * 7); current.time = state.time; current.score += (goal - current.score) * alpha; if (Math.abs(current.score - goal) < 0.005) current.score = goal; for (let i = 0; i < 3; i++) current.color[i] += (risk.color[i] - current.color[i]) * alpha; const color = current.color.map((value) => Math.round(value * (state.light ? 0.6 : 1)), ), css = `rgb(${color.join(',')})`; if (number.current) number.current.textContent = current.score.toFixed(2); if (level.current) level.current.textContent = auraRisk(current.score).label; readout.current?.style.setProperty('--aura-color', css); readout.current?.style.setProperty( '--aura-value-size', `${state.radius * 0.38}px`, ); if (readout.current) { readout.current.dataset.score = current.score.toFixed(2); readout.current.dataset.particles = String( (state.small ? small : full).rows * (state.small ? small : full).columns, ); } const geometry = state.small ? small : full, data = projectAura(geometry, state, waves, current.score), r = state.radius, cx = state.width / 2, cy = state.height / 2; context.strokeStyle = css; context.fillStyle = css; context.lineWidth = state.small ? 0.35 : 0.45; context.globalAlpha = state.light ? 0.15 : 0.1; for (let row = 0; row < geometry.rows; row++) { context.beginPath(); for (let col = 0; col <= geometry.columns; col++) { const n = (row * geometry.columns + (col % geometry.columns)) * 6, x = cx + data[n] * r, y = cy - data[n + 1] * r; if (col === 0) context.moveTo(x, y); else context.lineTo(x, y); } context.stroke(); } // Continuous luminous strands collect at the silhouette's travelling wave crests. context.globalAlpha = state.light ? 0.38 : 0.48; context.lineWidth = state.small ? 0.65 : 0.85; context.shadowColor = css; context.shadowBlur = state.light ? 0 : 6; context.beginPath(); for (let row = 0; row < geometry.rows; row++) for (let col = 0; col < geometry.columns; col++) { const n = (row * geometry.columns + col) * 6, m = (row * geometry.columns + ((col + 1) % geometry.columns)) * 6; if (data[n + 5] < 0.86 || data[m + 5] < 0.86) continue; context.moveTo(cx + data[n] * r, cy - data[n + 1] * r); context.lineTo(cx + data[m] * r, cy - data[m + 1] * r); } context.stroke(); context.shadowBlur = 0; // Rim-weighted particles reveal the moving crests while leaving the score readable. for (let side = 0; side < 2; side++) for (let i = 0; i < data.length / 6; i += 2) { const n = i * 6; if ((data[n + 2] >= 0 ? 1 : 0) !== side) continue; context.globalAlpha = Math.min(1, data[n + 3] * (state.light ? 1.35 : 1)); context.beginPath(); context.arc( cx + data[n] * r, cy - data[n + 1] * r, data[n + 4] * (state.small ? 0.8 : 1.2), 0, Math.PI * 2, ); context.fill(); } }, [full, small, goal, risk.label, waves], ); const change = (value: number) => { if (paused) return; value = Math.round(sphereClamp(value, 0, 5) * 100) / 100; if (score === undefined) setLocalScore(value); onScoreChange?.(value); }; const content = ( <> ); const overlay = (

Score {compact ? (

{content}

) : ( )} Score {goal.toFixed(2)} out of 5. Risk: {risk.label}.

); return ( {fallback.map((d, i) => ( ))} ); } const styles = `.sphere-aura .aura-readout{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;--aura-value-size:64px}.aura-label{display:block;font-family:inherit;font-size:11px;line-height:1.5;color:#92929b;margin-bottom:6px;letter-spacing:.02em}.aura-score{appearance:none;display:flex;flex-direction:column;align-items:center;gap:10px;border:0;border-radius:14px;padding:7px 14px;background:transparent;color:#f5f5f8;cursor:pointer}.aura-score:disabled{opacity:1;cursor:default}.aura-score:focus-visible{outline:1px solid #fff;outline-offset:4px}.aura-value{font-family:inherit;font-size:var(--aura-value-size);font-weight:300;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}.aura-risk{white-space:nowrap;font-size:11px;line-height:1.5;color:#99999f}.aura-risk>span{color:var(--aura-color)}.is-compact .aura-label{font-size:9px;margin-bottom:2px}.is-compact .aura-score{gap:7px;cursor:inherit;padding:4px}.is-compact .aura-risk{font-size:9px}.aura-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}html[data-theme=light] .aura-score{color:#25232a}html[data-theme=light] .aura-label,html[data-theme=light] .aura-risk{color:#69656e}html[data-theme=light] .aura-score:focus-visible{outline-color:#25232a}`; 18:Te05,import { sphereClamp, smoothSphere, type SphereState } from './sphere-stage'; export type AuraRisk = { label: string; color: [number, number, number] }; export type AuraGeometry = { rows: number; columns: number; output: Float32Array }; export const auraPresets = [4.12, 3.2, 2.88, 1.65, 0.49]; /** Illustrative 0–5 score: higher score corresponds to lower risk. */ export function auraRisk(score: number): AuraRisk { score = sphereClamp(score, 0, 5); return score > 3.75 ? { label: 'Very low', color: [73, 151, 255] } : score > 3 ? { label: 'Low', color: [75, 210, 138] } : score > 2 ? { label: 'Medium', color: [247, 185, 73] } : score > 1 ? { label: 'High', color: [250, 118, 68] } : { label: 'Very high', color: [241, 65, 91] }; } export function nextAuraScore(score: number) { const i = auraPresets.findIndex((value) => Math.abs(value - score) < 0.03); return auraPresets[(i + 1) % auraPresets.length]; } export function createAura(small = false, density = 1): AuraGeometry { density = sphereClamp(density, 0.5, 1.2); const rows = Math.round((small ? 24 : 40) * density), columns = small ? 96 : 144; return { rows, columns, output: new Float32Array(rows * columns * 6) }; } /** Advected spherical harmonics form a moving, continuous membrane rather than a rigid globe. */ export function projectAura( geometry: AuraGeometry, state: SphereState, waves = 1, score = 4.12, ) { const amplitude = sphereClamp(waves, 0, 1.8), t = state.time, rx = 0.22 + state.tiltX, ry = t * 0.13 + state.tiltY, cx = Math.cos(rx), sx = Math.sin(rx), cy = Math.cos(ry), sy = Math.sin(ry); const volatility = 1 + (5 - sphereClamp(score, 0, 5)) * 0.055; for (let row = 0; row < geometry.rows; row++) { const latitude = 0.035 + ((row + 0.5) / geometry.rows) * (Math.PI - 0.07), sl = Math.sin(latitude), cl = Math.cos(latitude); for (let col = 0; col < geometry.columns; col++) { const longitude = (col / geometry.columns) * Math.PI * 2; const flow = longitude + 0.18 * Math.sin(latitude * 3 + t * 0.55), ripple = 0.12 * Math.sin(flow * 3 + t * 0.8 + latitude) * sl + 0.07 * Math.sin(latitude * 5 - t * 0.95 + Math.sin(flow * 2)) + 0.035 * Math.cos(flow * 7 + latitude * 6 - t * 1.4); const radius = 1 + amplitude * volatility * ripple + state.burst * 0.065 * state.intensity * Math.sin(latitude * 4 - t * 2); const x = Math.cos(flow) * sl * radius, y = cl * radius, z = Math.sin(flow) * sl * radius; const x1 = x * cy + z * sy, z1 = -x * sy + z * cy, y1 = y * cx - z1 * sx, z2 = y * sx + z1 * cx; const wake = state.presence * state.intensity * 0.035 * Math.exp(-((x1 - state.pointerX) ** 2 + (y1 - state.pointerY) ** 2) * 6) * Math.sin(flow * 4 + t * 3); const perspective = 3.8 / (3.8 - z2 * 0.2), px = x1 * perspective * (1 + wake), py = y1 * perspective * (1 + wake), distance = Math.hypot(px, py), rim = Math.max(0, 1 - Math.abs(z2) / radius); const n = (row * geometry.columns + col) * 6; geometry.output[n] = px; geometry.output[n + 1] = py; geometry.output[n + 2] = z2; geometry.output[n + 3] = (0.04 + rim ** 3 * 0.72) * (0.12 + 0.88 * smoothSphere((distance - 0.28) / 0.65)); geometry.output[n + 4] = 0.22 + rim * 0.38; geometry.output[n + 5] = rim; } } 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":{"aura":[{"name":"aura.tsx","code":"$17"},{"name":"aura-math.ts","code":"$18"},{"name":"sphere-stage.tsx","code":"$19"}]},"initialElement":"aura","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]