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:T2028,'use client'; import { useRef, type CSSProperties } from 'react'; import { useKineticCanvas } from './kinetic-canvas'; import { kineticClamp, kineticMix, lotusPose, lotusCycle, lotusFormation, seededKinetic, } from './kinetic-math'; export type LotusColors = { inner: string; middle: string; outer: string }; const palettes: Record = { aurora: { inner: '#9f71d6', middle: '#e0a6d1', outer: '#fff0d5' }, glacier: { inner: '#a5b4fc', middle: '#ddd6fe', outer: '#f5f3ff' }, ember: { inner: '#be567d', middle: '#e9a578', outer: '#fff0ce' }, }; export type SacredLotusProps = { progress?: number; duration?: number; petalCount?: number; layerCount?: number; statusText?: string; colorScheme?: string | LotusColors; interactive?: boolean; paused?: boolean; compact?: boolean; className?: string; }; export default function SacredLotus({ progress, duration = 10, petalCount = 12, layerCount = 3, statusText = 'Loading...', colorScheme = 'aurora', interactive = true, paused = false, compact = false, className = '', }: SacredLotusProps) { const label = useRef(null), pointer = useRef(0), openness = useRef(0), elapsed = useRef(0), rotation = useRef(0); const { host, canvas } = useKineticCanvas( ({ g, w, h, dt, still }) => { if (!still) { elapsed.current += dt; rotation.current += dt; } const pct = progress === undefined ? still ? 56 : lotusCycle(elapsed.current, duration * 2) : kineticClamp(progress, 0, 100); if (label.current) { label.current.textContent = `${Math.round(pct)}%`; label.current.parentElement?.setAttribute( 'aria-valuenow', String(Math.round(pct)), ); } openness.current += (pointer.current - openness.current) * (dt ? 1 - Math.exp(-dt * 5) : 1); const pose = lotusPose(pct), formation = lotusFormation(pct), radius = Math.min(w * 0.38, h * 0.32), count = Math.round(kineticClamp(petalCount, 6, 24)), layers = Math.round(kineticClamp(layerCount, 1, 5)); const colors = typeof colorScheme === 'string' ? (palettes[colorScheme] ?? palettes.aurora) : colorScheme; const safe = (hex: string, fallback: string) => /^#[\da-f]{6}$/i.test(hex) ? hex : fallback; const a = safe(colors.inner, palettes.aurora.inner), b = safe(colors.middle, palettes.aurora.middle), c = safe(colors.outer, palettes.aurora.outer); g.fillStyle = '#000'; g.fillRect(0, 0, w, h); g.save(); g.translate(w / 2, h / 2); g.globalCompositeOperation = 'lighter'; // Each seeded point converges on an orbital node before the lines appear. const random = seededKinetic(418); for (let i = 0; i < count * layers * 2; i++) { const angle = random() * Math.PI * 2, distance = Math.sqrt(random()) * radius * 1.12, layer = i % layers, petal = Math.floor(i / layers), targetAngle = (petal / (count * 2)) * Math.PI * 2 + (layer * Math.PI) / count, targetRadius = radius * (0.35 + (0.65 * layer) / Math.max(1, layers - 1)) * pose.radius, x = kineticMix( Math.cos(angle) * distance, Math.cos(targetAngle) * targetRadius, formation.gather, ), y = kineticMix( Math.sin(angle) * distance, Math.sin(targetAngle) * targetRadius, formation.gather, ); g.globalAlpha = formation.dust * (0.3 + random() * 0.65); g.fillStyle = '#e8f5ff'; g.beginPath(); g.arc(x, y, 0.45 + random() * 0.35, 0, Math.PI * 2); g.fill(); } g.globalAlpha = formation.petals; g.save(); for (let layer = layers - 1; layer >= 0; layer--) { const ratio = layers === 1 ? 1 : 0.5 + (0.5 * layer) / (layers - 1), r = radius * ratio * pose.radius; const turn = (still ? 2 : rotation.current) * (0.035 + layer * 0.012) * (layer % 2 ? -1 : 1) + (layer * Math.PI) / count; for (let i = 0; i < count; i++) { g.save(); g.rotate((i * Math.PI * 2) / count + turn); const belly = r * pose.spread * (1 + openness.current * 0.18), round = r * 0.18 * pose.roundness; g.beginPath(); g.moveTo(0, 0); g.bezierCurveTo( r * 0.2, -belly * 0.85, r * 0.72, -belly * 1.2, r - round, -round * 0.8, ); g.bezierCurveTo( r + round * 0.13, -round * 0.4, r + round * 0.13, round * 0.4, r - round, round * 0.8, ); g.bezierCurveTo(r * 0.72, belly * 1.2, r * 0.2, belly * 0.85, 0, 0); const fill = g.createRadialGradient(0, 0, 0, 0, 0, r); fill.addColorStop(0, a + '20'); fill.addColorStop(0.55, b + '16'); fill.addColorStop(1, c + '24'); g.fillStyle = fill; g.fill(); const stroke = g.createLinearGradient(0, 0, r, 0); stroke.addColorStop(0, a + 'a0'); stroke.addColorStop(0.5, b + 'c0'); stroke.addColorStop(0.78, c); stroke.addColorStop(0.9, '#fff4e6'); stroke.addColorStop(1, '#fffaf2'); g.strokeStyle = stroke; g.lineWidth = Math.max(0.7, radius / 160) * 1.15; g.shadowColor = layer === 0 ? a : c; g.shadowBlur = 7; g.stroke(); g.shadowBlur = 0; if (layer === layers - 1 || layer === 0) { g.beginPath(); g.arc( r + radius * 0.045, 0, Math.max(0.65, radius * 0.006), 0, Math.PI * 2, ); g.fillStyle = '#dff6ff'; g.fill(); } g.restore(); } } g.restore(); const halo = pose.roundness; g.globalAlpha = halo * 0.8; g.strokeStyle = c; g.shadowColor = b; g.shadowBlur = 10; g.lineWidth = 1.25; g.beginPath(); g.arc(0, 0, radius * pose.radius, 0, Math.PI * 2); g.stroke(); g.globalAlpha = formation.petals; g.shadowBlur = 0; const flare = g.createRadialGradient(0, 0, 0, 0, 0, radius * 0.13); flare.addColorStop(0, '#fff'); flare.addColorStop(0.1, '#ddd6feaf'); flare.addColorStop(0.4, a + '35'); flare.addColorStop(1, a + '00'); g.fillStyle = flare; g.beginPath(); g.arc(0, 0, radius * 0.13, 0, Math.PI * 2); g.fill(); g.restore(); }, paused, compact, ); return (

{ if (interactive && !paused) pointer.current = 1; }} onPointerLeave={() => (pointer.current = 0)} style={{ '--lotus-edge': '#ffffff24' } as CSSProperties} >

); } const styles = `.mq-lotus{position:relative;width:100%;height:100%;min-height:220px;background:#000;border:1px solid var(--lotus-edge);border-radius:24px;overflow:hidden;container-type:size}.mq-lotus canvas{position:absolute;inset:0;display:block;width:100%;height:100%}.mq-lotus>p{position:absolute;top:9%;left:0;right:0;margin:0;text-align:center;font-size:clamp(10px,2.4cqmin,14px);font-weight:400;line-height:1.5;color:#a1a1aa;letter-spacing:.04em}.mq-lotus-progress{position:absolute;bottom:9%;left:0;right:0;text-align:center;color:#d4d4d8;font-size:clamp(10px,2.4cqmin,14px);font-variant-numeric:tabular-nums;letter-spacing:.05em}`; 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":{"sacred-lotus":[{"name":"sacred-lotus.tsx","code":"$17"},{"name":"kinetic-canvas.ts","code":"$18"},{"name":"kinetic-math.ts","code":"$19"},{"name":"effect-runtime.ts","code":"$1a"}]},"initialElement":"sacred-lotus","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]