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:T2f37,'use client'; import { useEffect, useRef, useState } from 'react'; import { useKineticCanvas } from './kinetic-canvas'; import { kineticClamp, kineticMix, kineticSmooth, turbineGear, turbineDemo, turbineCrowns, turbineShiftPulse, } from './kinetic-math'; export type IrisTurbineProps = { speed?: number; maxSpeed?: number; redlineThreshold?: number; bladeCount?: number; cruiseColor?: string; ignitionColor?: string; autoDemo?: boolean; interactive?: boolean; showTelemetry?: boolean; paused?: boolean; compact?: boolean; className?: string; }; export default function IrisTurbine({ speed, maxSpeed = 210, redlineThreshold = 55, bladeCount = 24, cruiseColor = '#9b8cff', ignitionColor = '#ffbf69', autoDemo = true, interactive = true, showTelemetry = false, paused = false, compact = false, className = '', }: IrisTurbineProps) { const number = useRef(null), gearLabel = useRef(null), held = useRef(false), manual = useRef(false), sliderDrive = useRef(false), target = useRef(9), state = useRef({ speed: 9, velocity: 0, rotation: 0, time: 0, gear: 1, pulse: 0, shiftAge: 10, }), [setting, setSetting] = useState(9); const { host, canvas, invalidate } = useKineticCanvas( ({ g, w, h, dt, still }) => { const s = state.current, limit = kineticClamp(maxSpeed, 30, 400), external = speed !== undefined; if (!still) { s.time += dt; if (held.current && interactive && !external) { manual.current = true; target.current = Math.min(limit, target.current + dt * 65); } else if (manual.current && !sliderDrive.current) target.current = Math.max(0, target.current - dt * 14); } const desired = external ? kineticClamp(speed, 0, limit) : still ? s.time === 0 ? 88 : s.speed : autoDemo && !manual.current ? turbineDemo(s.time, limit) : target.current; if (still) s.speed = desired; else { s.velocity += (desired - s.speed) * dt * 24; s.velocity *= Math.exp(-dt * 9); s.speed = kineticClamp(s.speed + s.velocity * dt, 0, limit); s.rotation += dt * (0.045 + s.speed * 0.0028); } const gear = turbineGear(s.speed); if (gear > s.gear && !still) s.shiftAge = 0; s.gear = gear; s.shiftAge += dt; s.pulse = turbineShiftPulse(s.shiftAge); if (number.current) number.current.textContent = String(Math.round(s.speed)); if (gearLabel.current) gearLabel.current.textContent = String(gear); const hot = kineticSmooth(redlineThreshold, redlineThreshold + 10, s.speed), rgb = (hex: string, fallback: string) => (/^#[\da-f]{6}$/i.test(hex) ? hex : fallback) .slice(1) .match(/../g)! .map((channel) => parseInt(channel, 16)), cool = rgb(cruiseColor, '#9b8cff'), warm = rgb(ignitionColor, '#ffbf69'), red = Math.round(kineticMix(cool[0], warm[0], hot)), green = Math.round(kineticMix(cool[1], warm[1], hot)), blue = Math.round(kineticMix(cool[2], warm[2], hot)), color = `${red},${green},${blue}`; const tipColor = `rgb(${[red, green, blue].map((c) => Math.round(kineticMix(c, 255, 0.82))).join(',')})`; host.current?.style.setProperty('--turbine-color', `rgb(${color})`); host.current!.dataset.speed = s.speed.toFixed(1); const r = Math.min(w, h) * 0.36, count = Math.round(kineticClamp(bladeCount, 12, 48)); g.fillStyle = '#000'; g.fillRect(0, 0, w, h); g.save(); g.translate(w / 2, h / 2); g.rotate(s.rotation); g.globalCompositeOperation = 'lighter'; for (const crown of turbineCrowns(still && s.time === 0 ? 2.1 : s.time).sort( (a, b) => b.phase - a.phase, )) { if (crown.opacity < 0.001) continue; const inner = r * 0.47, outer = r * crown.radius * (1 + s.pulse * 0.025), span = outer - inner, twist = crown.twist; g.save(); g.rotate(crown.phase * 0.21); g.globalAlpha = crown.opacity; for (let i = 0; i < count; i++) { g.save(); g.rotate((i * Math.PI * 2) / count); const step = (Math.PI * 2) / count; const tipX = Math.cos(twist) * outer, tipY = Math.sin(twist) * outer; g.beginPath(); g.moveTo(inner, 0); g.bezierCurveTo( inner + span * 0.2, -span * 0.36, tipX - span * 0.12, tipY - span * 0.46, tipX, tipY, ); g.bezierCurveTo( tipX - span * 0.35, tipY - span * 0.06, inner + span * 0.16, inner * step * 0.7 + span * 0.05, Math.cos(step * 0.7) * inner, Math.sin(step * 0.7) * inner, ); g.bezierCurveTo(inner * 1.13, r * 0.035, inner * 1.04, r * 0.025, inner, 0); const fill = g.createRadialGradient(0, 0, inner, 0, 0, outer); fill.addColorStop(0, `rgba(${color},0)`); fill.addColorStop( 0.5, `rgba(${color},${0.06 + crown.phase * 0.1 + (s.speed / limit) * 0.12})`, ); fill.addColorStop(0.85, `rgba(${color},.22)`); fill.addColorStop(1, `rgba(${color},.08)`); g.fillStyle = fill; g.fill(); const edge = g.createLinearGradient(inner, 0, tipX, tipY); edge.addColorStop(0, `rgba(${color},.16)`); edge.addColorStop(0.6, `rgba(${color},.95)`); edge.addColorStop(1, tipColor); g.strokeStyle = edge; g.lineWidth = Math.max(0.65, r / 200); g.shadowColor = `rgb(${color})`; g.shadowBlur = 3 + (s.speed / limit) * 8 + s.pulse * 8; g.stroke(); g.shadowBlur = 0; // A soft secondary vein gives the curved blade a folded, petal-like body. g.beginPath(); g.moveTo(inner, 0); g.bezierCurveTo( inner + span * 0.25, -span * 0.05, tipX - span * 0.36, tipY - span * 0.27, tipX, tipY, ); g.strokeStyle = `rgba(${color},.24)`; g.lineWidth = Math.max(0.4, r / 330); g.stroke(); g.fillStyle = tipColor; g.beginPath(); g.arc(tipX, tipY, Math.max(0.7, r * 0.0055), 0, Math.PI * 2); g.fill(); g.globalAlpha = crown.opacity * 0.45; g.beginPath(); g.arc(inner, 0, r * 0.004, 0, Math.PI * 2); g.fill(); g.globalAlpha = crown.opacity; g.restore(); } g.restore(); } g.restore(); }, paused, compact, ); useEffect(() => { if (autoDemo) { manual.current = false; sliderDrive.current = false; } }, [autoDemo]); function accelerate() { if ( !interactive || paused || speed !== undefined || matchMedia('(prefers-reduced-motion: reduce)').matches ) return; if (!held.current) target.current = state.current.speed; held.current = true; manual.current = true; sliderDrive.current = false; } const release = () => { held.current = false; }; useEffect(() => { const release = () => { held.current = false; }; const visibility = () => { if (document.hidden) release(); }; window.addEventListener('blur', release); document.addEventListener('visibilitychange', visibility); return () => { window.removeEventListener('blur', release); document.removeEventListener('visibilitychange', visibility); }; }, []); return (

{ if (!interactive || paused || e.target instanceof HTMLInputElement) return; accelerate(); e.currentTarget.setPointerCapture(e.pointerId); }} onPointerUp={release} onPointerCancel={release} onLostPointerCapture={release} onBlur={release} onKeyDown={(e) => { if (e.key === ' ' && interactive && !paused) { e.preventDefault(); accelerate(); } if (['ArrowUp', 'ArrowDown'].includes(e.key) && interactive && !paused) { e.preventDefault(); if (!manual.current) target.current = state.current.speed; manual.current = true; sliderDrive.current = false; target.current = kineticClamp( target.current + (e.key === 'ArrowUp' ? 10 : -10), 0, maxSpeed, ); invalidate(); } }} onKeyUp={(e) => { if (e.key === ' ') release(); }} onWheel={(e) => { if (!interactive || paused || speed !== undefined) return; if (!manual.current) target.current = state.current.speed; manual.current = true; sliderDrive.current = false; target.current = kineticClamp(target.current - e.deltaY * 0.12, 0, maxSpeed); invalidate(); }} >

); } const styles = `.mq-turbine{position:relative;width:100%;height:100%;min-height:220px;background:#000;overflow:hidden;container-type:size;outline:none;touch-action:pan-y}.mq-turbine:focus-visible{outline:1px solid var(--turbine-color,#93c5fd);outline-offset:-6px}.mq-turbine>canvas{position:absolute;width:100%;height:100%;inset:0}.mq-turbine-readout{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;color:#f8fafc}.mq-turbine-readout strong{font-size:clamp(28px,10cqmin,64px);font-weight:250;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.06em}.mq-turbine-readout>span:not(.mq-turbine-gear){font-size:clamp(7px,1.8cqmin,10px);font-weight:400;line-height:1.5;letter-spacing:.15em;color:#64748b;margin-top:9px}.mq-turbine-gear{width:clamp(17px,5cqmin,28px);height:clamp(17px,5cqmin,28px);border:1px solid color-mix(in srgb,var(--turbine-color,#93c5fd) 50%,transparent);border-radius:50%;display:grid;place-items:center;color:var(--turbine-color,#93c5fd);font-size:clamp(8px,2cqmin,11px);margin-top:16px;transition:color .4s,border-color .4s}.mq-turbine-telemetry{position:absolute;top:8%;width:100%;text-align:center;color:#94a3b8;font-size:10px;letter-spacing:.04em}.mq-turbine-telemetry span{margin-left:15px}.mq-turbine-slider{position:absolute;bottom:6%;left:30%;right:30%}.mq-turbine-slider input{width:100%;accent-color:var(--turbine-color,#93c5fd)}.mq-turbine-sr{position:absolute;clip-path:inset(50%);width:1px;height:1px}`; 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":{"iris-turbine":[{"name":"iris-turbine.tsx","code":"$17"},{"name":"kinetic-canvas.ts","code":"$18"},{"name":"kinetic-math.ts","code":"$19"},{"name":"effect-runtime.ts","code":"$1a"}]},"initialElement":"iris-turbine","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]