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:T2aef,'use client'; import { useEffect, useMemo, useRef } from 'react'; import { createHaloPoints, haloOrder, haloClamp, projectHalo, type HaloPoint, type HaloState, } from './halo-math'; export type HaloProps = { compact?: boolean; paused?: boolean; speed?: number; intensity?: number; count?: number; dotSize?: number; className?: string; }; export default function Halo({ compact = false, paused = false, speed = 1, intensity = 1, count = 480, dotSize = 1, className = '', }: HaloProps) { const host = useRef(null), canvas = useRef(null), wakeRef = useRef<() => void>(() => {}); const options = useRef({ paused, speed, intensity, count, dotSize }); options.current = { paused, speed, intensity, count, dotSize }; const fallback = useMemo(() => { const points = createHaloPoints(compact ? Math.min(count, 280) : count), data = new Float32Array(points.length * 5); return projectHalo( points, { time: 0, order: 0, tiltX: 0, tiltY: 0, pointerX: 0, pointerY: 0, presence: 0, intensity: 0, }, data, ); }, [count, compact]); useEffect(() => wakeRef.current(), [paused, speed, intensity, count, dotSize]); 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, width = 0, height = 0, radius = 1, visible = true, small = compact, gone = false, release = 0; let points: HaloPoint[] = [], projected = new Float32Array(), held = false, order = 0; const hand = { x: 0, y: 0, presence: 0 }, wanted = { ...hand }; const state: HaloState = { time: 0, order: 0, tiltX: 0, tiltY: 0, pointerX: 0, pointerY: 0, presence: 0, intensity: 1, }; function draw() { if (!width || !height) return; const desiredCount = Math.round( haloClamp( small ? Math.min(options.current.count, 280) : options.current.count, 160, 1000, ), ); if (points.length !== desiredCount) { points = createHaloPoints(desiredCount); projected = new Float32Array(points.length * 5); } state.time = reduced.matches ? 0 : time; state.order = reduced.matches ? 0 : order; state.intensity = haloClamp(options.current.intensity, 0, 1.4) * (small ? 0.8 : 1); state.tiltX = hand.y * 0.48 * 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; projectHalo(points, state, projected); context!.clearRect(0, 0, width, height); const light = document.documentElement.dataset.theme === 'light'; context!.fillStyle = light ? '#4a4540' : '#f3f0ea'; // Back and front hemispheres are composited in depth order. for (let side = 0; side < 2; side++) for (let i = 0; i < points.length; i++) { const n = i * 5; if ((projected[n + 2] >= 0 ? 1 : 0) !== side) continue; context!.globalAlpha = projected[n + 4]; context!.beginPath(); context!.arc( width / 2 + projected[n] * radius, height / 2 - projected[n + 1] * radius, projected[n + 3] * haloClamp(options.current.dotSize, 0.5, 2.5) * (small ? 0.95 : 1.4), 0, Math.PI * 2, ); context!.fill(); } context!.globalAlpha = 1; root.dataset.ready = 'true'; root.dataset.haloOrder = state.order.toFixed(4); root.dataset.haloTime = state.time.toFixed(3); root.dataset.pointCount = String(points.length); root.dataset.haloTilt = `${state.tiltX.toFixed(3)},${state.tiltY.toFixed(3)}`; } 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 = 0; } draw(); return; } const elapsed = (now - last) / 1000; if (small && elapsed < 1 / 30) { frame = requestAnimationFrame(tick); return; } const dt = Math.min(0.05, Math.max(0.001, elapsed)), alpha = 1 - Math.exp(-dt * 9); last = now; time += dt * haloClamp(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; order += ((held ? 1 : haloOrder(time)) - order) * (1 - Math.exp(-dt * 7)); 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(); width = box.width; height = box.height; small = compact || width < 500; radius = Math.min(width, height) * (compact ? 0.4 : 0.35); const density = Math.min(window.devicePixelRatio || 1, small ? 1 : 1.5); surface.width = Math.max(1, Math.round(width * density)); surface.height = Math.max(1, Math.round(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 = haloClamp((event.clientX - box.left - width / 2) / radius, -1, 1); wanted.y = haloClamp(-(event.clientY - box.top - height / 2) / radius, -1, 1); wanted.presence = 1; wake(); } const rest = () => { wanted.x = wanted.y = wanted.presence = 0; 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 === ' ') { held = !held; } else if (event.key === 'Home') { held = false; rest(); } else { wanted.presence = 1; wanted.x = haloClamp( wanted.x + (event.key === 'ArrowLeft' ? -0.25 : event.key === 'ArrowRight' ? 0.25 : 0), -1, 1, ); wanted.y = haloClamp( 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) { held = false; wanted.x = wanted.y = wanted.presence = hand.x = hand.y = hand.presence = 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', move); 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', move); 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 = `.halo{--halo-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}.halo canvas,.halo-fallback{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity 600ms cubic-bezier(.22,1,.36,1)}.halo canvas{opacity:0}.halo-fallback{fill:var(--halo-ink)}.halo[data-ready=true] canvas{opacity:1}.halo[data-ready=true] .halo-fallback{opacity:0;pointer-events:none}.halo:focus-visible{outline:1px solid #fff;outline-offset:-5px}html[data-theme=light] .halo{--halo-ink:#4a4540;background:radial-gradient(ellipse at 50% 47%,#fff,#f1eee8 74%)}html[data-theme=light] .halo:focus-visible{outline-color:#302c28}@media(prefers-reduced-motion:reduce){.halo canvas,.halo-fallback{transition:none}}`; 18:Tcb9,export type HaloPoint = { latitude: number; longitude: number; orderedLatitude: number; orderedLongitude: number; phase: number; }; export type HaloState = { time: number; order: number; tiltX: number; tiltY: number; pointerX: number; pointerY: number; presence: number; intensity: number; }; export const haloClamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, Number.isFinite(value) ? value : min)); const TAU = Math.PI * 2; const smooth = (value: number) => { const t = haloClamp(value, 0, 1); return t * t * t * (t * (t * 6 - 15) + 10); }; /** A quiet cloud, then an ordered globe, with fifth-order transitions between them. */ export function haloOrder(time: number) { const phase = ((time % 24) + 24) % 24; return phase < 8 ? 0 : phase < 12 ? smooth((phase - 8) / 4) : phase < 17 ? 1 : phase < 22 ? 1 - smooth((phase - 17) / 5) : 0; } /** Fixed seed keeps server fallback, canvas and exported examples reproducible. */ export function createHaloPoints(count = 480): HaloPoint[] { const length = Math.round(haloClamp(count, 160, 1000)), columns = 24, rows = Math.ceil(length / columns); let seed = 0x4d6f7469; const random = () => { seed ^= seed << 13; seed ^= seed >>> 17; seed ^= seed << 5; return (seed >>> 0) / 4294967296; }; return Array.from({ length }, (_, i) => ({ latitude: 0.025 + random() * (Math.PI - 0.05), longitude: random() * TAU, orderedLatitude: ((Math.floor(i / columns) + 0.5) / rows) * Math.PI, orderedLongitude: ((i % columns) / columns) * TAU, phase: random() * TAU, })); } /** Real spherical coordinates and two camera axes; reusable output avoids per-frame arrays. */ export function projectHalo( points: HaloPoint[], state: HaloState, output: Float32Array, ) { const rx = 0.12 + Math.sin(state.time * 0.1) * 0.28 + state.tiltX, ry = state.time * 0.13 + state.tiltY; const cx = Math.cos(rx), sx = Math.sin(rx), cy = Math.cos(ry), sy = Math.sin(ry), order = haloClamp(state.order, 0, 1); points.forEach((p, i) => { const latitude = p.latitude + (p.orderedLatitude - p.latitude) * order; const difference = Math.atan2( Math.sin(p.orderedLongitude - p.longitude), Math.cos(p.orderedLongitude - p.longitude), ); const longitude = p.longitude + difference * order; const sin = Math.sin(latitude), x = Math.cos(longitude) * sin, y = Math.cos(latitude), z = Math.sin(longitude) * sin; const x1 = x * cy + z * sy, z1 = -x * sy + z * cy, y1 = y * cx - z1 * sx, z2 = y * sx + z1 * cx; const distance = (x1 - state.pointerX) ** 2 + (y1 - state.pointerY) ** 2; const wake = Math.exp(-distance * 5) * state.presence * state.intensity; const radius = 1 + wake * 0.055 * Math.sin(state.time * 3.5 + p.phase); const perspective = 3.8 / (3.8 - z2 * 0.25), depth = (z2 + 1) * 0.5, index = i * 5; output[index] = x1 * radius * perspective; output[index + 1] = y1 * radius * perspective; output[index + 2] = z2; output[index + 3] = 0.7 + depth * 0.6; output[index + 4] = 0.3 + depth * 0.7; }); return output; } b:["$","$L16",null,{"initialView":"preview","originalSource":{"halo":[{"name":"halo.tsx","code":"$17"},{"name":"halo-math.ts","code":"$18"}]},"initialElement":"halo","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]