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:T1795,'use client'; import { useEffect, useId, useRef } from 'react'; import { chargeClamp, chargeHex } from './charge-math'; import { createChargeScene, type ChargeOptions } from './charge-scene'; export type ChargeProps = { percentage?: number; statusText?: string; flowSpeed?: number; particleCount?: number; primaryColor?: string; secondaryColor?: string; animateCount?: boolean; compact?: boolean; paused?: boolean; className?: string; }; /** A plasma inlet feeding two ascending currents around a luminous battery orb. */ export default function Charge({ percentage = 46, statusText = 'Quick Charge', flowSpeed = 1, particleCount = 240, primaryColor = '#00e5ff', secondaryColor = '#ffb52e', animateCount = true, compact = false, paused = false, className = '', }: ChargeProps) { const root = useRef(null), canvas = useRef(null), value = useRef(null), scene = useRef | null>(null); const initialValue = useRef(Math.round(chargeClamp(percentage, 0, 100))); const options = useRef({ percentage, flowSpeed, particleCount, primaryColor, secondaryColor, animateCount, paused, }); options.current = { percentage, flowSpeed, particleCount, primaryColor, secondaryColor, animateCount, paused, }; const id = useId().replace(/:/g, ''), target = Math.round(chargeClamp(percentage, 0, 100)), cyan = chargeHex(primaryColor, '#00e5ff'), gold = chargeHex(secondaryColor, '#ffb52e'); useEffect(() => { const host = root.current!; delete host.dataset.failed; try { scene.current = createChargeScene( canvas.current!, compact, () => options.current, (n) => { if (value.current) value.current.textContent = String(n); }, ); } catch { host.dataset.failed = 'true'; if (value.current) value.current.textContent = String( Math.round(chargeClamp(options.current.percentage, 0, 100)), ); } return () => { scene.current?.dispose(); scene.current = null; }; }, [compact]); useEffect(() => { if (scene.current) scene.current.sync(); else if (value.current) value.current.textContent = String(Math.round(chargeClamp(percentage, 0, 100))); }, [ percentage, flowSpeed, particleCount, primaryColor, secondaryColor, animateCount, paused, ]); return (

); } const styles = `.charge{position:relative;width:100%;height:100%;min-height:0;overflow:clip;background:#030303;container-type:size}.charge-panel{position:absolute;top:6%;left:50%;transform:translateX(-50%);width:min(86cqw,64cqh,380px);height:max(min(172cqw,128cqh,760px),108cqh);border:1px solid #ffffff24;border-radius:clamp(18px,8cqw,34px);overflow:hidden;isolation:isolate;background:#000;outline:none;container-type:inline-size}.charge-panel>canvas,.charge-fallback{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;transition:opacity 300ms linear}.charge-panel>canvas{opacity:0}.charge[data-ready=true] canvas{opacity:1}.charge[data-ready=true] .charge-fallback{opacity:0}.charge-readout{position:absolute;top:37%;left:16%;right:16%;transform:translateY(-50%);text-align:center;pointer-events:none;font-family:inherit;color:#fff}.charge-value{display:flex;align-items:baseline;justify-content:center;font-size:clamp(24px,13cqw,49px);font-weight:500;font-variant-numeric:tabular-nums;line-height:1.12;letter-spacing:-.055em;text-shadow:0 0 16px #9cecff33}.charge-unit{font-size:.49em;letter-spacing:-.02em;margin-left:.06em}.charge-status{display:block;font-size:clamp(8px,3.15cqw,12px);font-weight:400;line-height:1.5;letter-spacing:.025em;color:#ffffffbf;margin-top:.6em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.charge-panel:focus-visible{outline:1px solid #fff;outline-offset:-4px}html[data-theme=light] .charge{background:#f6f5f3}@media(prefers-reduced-motion:reduce){.charge-panel>canvas,.charge-fallback{transition:none}}`; 18:T21e9,import * as THREE from 'three'; import { chargeClamp, chargeHex, chargeParticle, createChargeParticles, } from './charge-math'; import { chargeVertex, chargeFragment, chargePointVertex, chargePointFragment, } from './charge-shaders'; export type ChargeOptions = { percentage: number; flowSpeed: number; particleCount: number; primaryColor: string; secondaryColor: string; animateCount: boolean; paused: boolean; }; export function createChargeScene( canvas: HTMLCanvasElement, compact: boolean, read: () => ChargeOptions, onValue: (value: number) => void, ) { const panel = canvas.parentElement!, host = panel.parentElement!, media = matchMedia('(prefers-reduced-motion: reduce)'); const renderer = new THREE.WebGLRenderer({ canvas, alpha: false, antialias: false, powerPreference: 'high-performance', }); renderer.setClearColor(0x000000, 1); renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, compact ? 1.25 : 1.75)); const scene = new THREE.Scene(), camera = new THREE.Camera(), plane = new THREE.PlaneGeometry(2, 2); const uniforms = { uTime: { value: 2.7 }, uAspect: { value: 2 }, uPrimary: { value: new THREE.Color() }, uSecondary: { value: new THREE.Color() }, }; const material = new THREE.ShaderMaterial({ vertexShader: chargeVertex, fragmentShader: chargeFragment, uniforms, depthWrite: false, depthTest: false, }); const field = new THREE.Mesh(plane, material); field.frustumCulled = false; scene.add(field); const pointUniforms = { uAspect: { value: 2 }, uDpr: { value: renderer.getPixelRatio() }, uScale: { value: 1 }, }; const pointMaterial = new THREE.ShaderMaterial({ vertexShader: chargePointVertex, fragmentShader: chargePointFragment, uniforms: pointUniforms, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false, depthTest: false, }); let geometry = new THREE.BufferGeometry(), particles = createChargeParticles(read().particleCount), count = 0; const points = new THREE.Points(geometry, pointMaterial); points.frustumCulled = false; points.renderOrder = 1; scene.add(points); let positions = new Float32Array(0), fades = new Float32Array(0), colors = new Float32Array(0); let frame = 0, disposed = false, lost = false, visible = true, held = false, time = 2.7, last = 0, width = 0, height = 0, shown = compact || media.matches || read().paused || !read().animateCount ? chargeClamp(read().percentage, 0, 100) : 0; let previousNumber = -1, primary = '', secondary = '', valueTarget = chargeClamp(read().percentage, 0, 100); function stop() { cancelAnimationFrame(frame); frame = 0; } function seed() { const desired = Math.round(chargeClamp(read().particleCount, 150, 300)); if (desired === count) return; count = desired; particles = createChargeParticles(count); geometry.dispose(); geometry = new THREE.BufferGeometry(); points.geometry = geometry; positions = new Float32Array(count * 3); fades = new Float32Array(count); colors = new Float32Array(count * 3); geometry.setAttribute( 'position', new THREE.BufferAttribute(positions, 3).setUsage(THREE.DynamicDrawUsage), ); geometry.setAttribute( 'aFade', new THREE.BufferAttribute(fades, 1).setUsage(THREE.DynamicDrawUsage), ); geometry.setAttribute( 'aSize', new THREE.BufferAttribute( Float32Array.from(particles, (p) => p.size), 1, ), ); geometry.setAttribute('aColor', new THREE.BufferAttribute(colors, 3)); primary = ''; } function palette() { const o = read(), a = chargeHex(o.primaryColor, '#00e5ff'), b = chargeHex(o.secondaryColor, '#ffb52e'); if (a === primary && b === secondary) return; primary = a; secondary = b; uniforms.uPrimary.value.set(a); uniforms.uSecondary.value.set(b); const white = new THREE.Color('#efffff'), c = new THREE.Color(); particles.forEach((p, i) => { c.copy(p.warm < 0.28 ? uniforms.uSecondary.value : uniforms.uPrimary.value).lerp( white, p.warm > 0.7 ? 0.82 : 0.2, ); c.toArray(colors, i * 3); }); geometry.getAttribute('aColor').needsUpdate = true; } function number() { const n = Math.round(shown); if (n !== previousNumber) { previousNumber = n; onValue(n); } } function draw() { if (disposed || lost || !width || !height) return; seed(); palette(); const aspect = height / width, pose = media.matches ? 2.7 : time; uniforms.uTime.value = pose; uniforms.uAspect.value = pointUniforms.uAspect.value = aspect; particles.forEach((p, i) => { const v = chargeParticle(p, pose, aspect); positions[i * 3] = v.x; positions[i * 3 + 1] = v.y; fades[i] = v.fade; }); geometry.getAttribute('position').needsUpdate = true; geometry.getAttribute('aFade').needsUpdate = true; renderer.render(scene, camera); number(); host.dataset.ready = 'true'; host.dataset.flowTime = pose.toFixed(3); host.dataset.particles = String(count); } function tick(now: number) { frame = 0; if (disposed || lost || !visible || document.hidden) return; const elapsed = now - last; if (elapsed < 1000 / 60 - 0.5) { frame = requestAnimationFrame(tick); return; } const dt = Math.min(0.05, Math.max(0.001, elapsed / 1000)); last = now; const o = read(); valueTarget = chargeClamp(o.percentage, 0, 100); if (!o.paused && !held && !media.matches) { time += dt * chargeClamp(o.flowSpeed, 0.1, 3); shown += (valueTarget - shown) * (1 - Math.exp(-dt * 3.7)); if (Math.abs(valueTarget - shown) < 0.03) shown = valueTarget; } if (media.matches || !o.animateCount) shown = valueTarget; draw(); if (!o.paused && !held && !media.matches) frame = requestAnimationFrame(tick); } function wake() { if (!disposed && !lost && !frame && visible && !document.hidden) { last = performance.now(); frame = requestAnimationFrame(tick); } } function sync() { stop(); if (media.matches || !read().animateCount || read().paused || held) shown = chargeClamp(read().percentage, 0, 100); draw(); if (!read().paused && !held && !media.matches) wake(); } function resize() { const box = host.getBoundingClientRect(); width = Math.max(1, Math.min(box.width * 0.86, box.height * 0.64, 380)); height = Math.max(width * 2, box.height * 1.08); panel.style.width = `${width}px`; panel.style.height = `${height}px`; renderer.setSize(width, height, false); pointUniforms.uScale.value = Math.max(0.65, width / 380); draw(); wake(); } function visibility() { stop(); if (visible && !document.hidden) { draw(); if (!read().paused && !held && !media.matches) wake(); } } function key(e: KeyboardEvent) { if (e.target !== panel || e.key !== ' ' || media.matches || read().paused) return; e.preventDefault(); held = !held; host.dataset.held = String(held); sync(); } function onLost(e: Event) { e.preventDefault(); lost = true; stop(); delete host.dataset.ready; } function onRestored() { lost = false; sync(); } const observer = new ResizeObserver(resize), intersection = new IntersectionObserver(([e]) => { visible = e.isIntersecting; visibility(); }); panel.addEventListener('keydown', key); media.addEventListener('change', sync); document.addEventListener('visibilitychange', visibility); canvas.addEventListener('webglcontextlost', onLost); canvas.addEventListener('webglcontextrestored', onRestored); observer.observe(host); intersection.observe(host); resize(); return { sync, dispose() { if (disposed) return; disposed = true; stop(); observer.disconnect(); intersection.disconnect(); panel.removeEventListener('keydown', key); media.removeEventListener('change', sync); document.removeEventListener('visibilitychange', visibility); canvas.removeEventListener('webglcontextlost', onLost); canvas.removeEventListener('webglcontextrestored', onRestored); geometry.dispose(); plane.dispose(); material.dispose(); pointMaterial.dispose(); scene.clear(); renderer.dispose(); canvas.width = canvas.height = 0; delete host.dataset.ready; }, }; } 19:T846,export const chargeClamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, Number.isFinite(value) ? value : min)); export const chargeHex = (value: string, fallback: string) => /^#[\da-f]{6}$/i.test(value) ? value : fallback; export type ChargeParticle = { phase: number; pace: number; spread: number; side: number; interior: boolean; size: number; warm: number; }; export function createChargeParticles(count: number): ChargeParticle[] { let seed = 7319; const random = () => { seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0; return seed / 4294967296; }; return Array.from({ length: Math.round(chargeClamp(count, 150, 300)) }, () => ({ phase: random(), pace: 0.075 + random() * 0.055, spread: random(), side: random() < 0.5 ? -1 : 1, interior: random() < 0.32, size: 0.5 + random() ** 2 * 2, warm: random(), })); } /** One continuous path: accelerating inlet, then a perimeter or interior stream. */ export function chargeParticle(p: ChargeParticle, time: number, aspect: number) { const cycle = (((p.phase + time * p.pace) % 1) + 1) % 1, r = 0.32, base = -aspect * 0.63; let x: number, y: number, fade: number; if (cycle < 0.57) { const v = cycle / 0.57, s = v * v; y = base + (-r - base) * s; x = ((p.spread - 0.5) * 0.05 + Math.sin(y * 18 - time * 2 + p.spread * 6) * 0.009) * (1 - s); fade = Math.min(1, v * 10); } else { const v = (cycle - 0.57) / 0.43; if (p.interior) { x = p.side * Math.sin(v * Math.PI) * (0.045 + p.spread * 0.17) + Math.sin(v * 11 + time * 0.5) * 0.008 * Math.sin(v * Math.PI); y = -r + v * r * 1.87; fade = Math.min(1, (1 - v) * 4) * (0.65 + 0.35 * Math.sin(v * Math.PI)); } else { const a = p.side * v * Math.PI, jitter = Math.sin(v * 27 + time + p.spread * 13) * 0.003 * Math.sin(v * Math.PI), radius = r + jitter; x = Math.sin(a) * radius; y = -Math.cos(a) * radius; fade = Math.min(1, (1 - v) * 12); } } return { x, y, fade, cycle }; } 1a:T1380,export const chargeVertex = `varying vec2 vUv;void main(){vUv=uv;gl_Position=vec4(position.xy,0.,1.);}`; export const chargeFragment = ` precision highp float; varying vec2 vUv; uniform float uTime,uAspect; uniform vec3 uPrimary,uSecondary; float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);} float noise(vec2 p){vec2 i=floor(p),f=fract(p);f=f*f*(3.-2.*f);return mix(mix(hash(i),hash(i+vec2(1,0)),f.x),mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x),f.y);} float smin(float a,float b,float k){float h=max(k-abs(a-b),0.)/k;return min(a,b)-h*h*k*.25;} void main(){ vec2 p=vec2(vUv.x-.5,(vUv.y-.63)*uAspect); float t=uTime,r=.32,rad=length(p),a=atan(p.x,-p.y),up=abs(a); float grain=noise(vec2(up*8.-t*.65,rad*48.+t*.18)); float wave=.0024*sin(up*11.-t*1.55)+.0017*sin(up*23.-t*2.4)*sin(up*3.+t*.7); float ring=abs(rad-r-wave); float spine=.0045*sin(p.y*14.-t*1.8)+.002*sin(p.y*39.+t*2.1); float stem=abs(p.x-spine)+max(0.,p.y+r-.009)*3.; // Smooth union forms the liquid Y-junction rather than crossing two strokes. float d=max(0.,smin(ring,stem,.06)); float motion=.72+.28*sin(up*7.-t*2.2+grain*1.5); float packets=pow(max(0.,cos(up*3.-t*1.4)),14.); float core=exp(-d*920.)*(.55+.3*motion+.4*packets); float cyan=exp(-d*165.)*(.6+.28*motion); float blue=exp(-d*42.)*.65; vec3 electric=mix(vec3(.005,.075,1.),uPrimary,.28); vec3 color=vec3(.8,.97,1.)*core+uPrimary*cyan+electric*blue; float outside=rad-r; float goldBand=exp(-abs(outside-.012-wave*.7)*85.); float warmSide=.3+.7*pow(max(0.,sin(a-t*.45+.5)),4.); color+=uSecondary*goldBand*warmSide*.52; // Shared arc length carries every pulse from the inlet through both branches. float inletLength=uAspect*.63-r,totalLength=inletLength+3.14159265*r; for(int k=0;k<3;k++){ float head=fract(t*.155+float(k)/3.)*(totalLength+.38)-.19; float envelope=smoothstep(-.19,.02,head)*(1.-smoothstep(totalLength,totalLength+.19,head)); float stemPacket=exp(-pow((p.y+uAspect*.63-head)/.095,2.))*(1.-smoothstep(-r-.015,-r+.012,p.y)); float ringPacket=exp(-pow((inletLength+up*r-head)/.075,2.)); float packet=stemPacket*exp(-abs(p.x-spine)*110.)+ringPacket*exp(-ring*110.); float aura=stemPacket*exp(-abs(p.x-spine-.009)*32.)+ringPacket*exp(-abs(outside-.008)*38.); color+=vec3(.8,.98,1.)*packet*envelope*1.35; color+=mix(uSecondary,uPrimary,float(k)*.35)*aura*envelope*.5; } // Broad folds of plasma peel away on their journey to the upper pole. float head=fract(t*.075)*5.-.9; float envelope=smoothstep(-.9,-.3,head)*(1.-smoothstep(3.35,4.1,head)); float lobe=exp(-pow((up-head)/.29,2.))*(a<0.?1.:.4)*envelope; float trailing=exp(-pow((up-head+.24)/.38,2.))*(a<0.?1.:.3)*envelope; float folded=outside-.009-sin(up*13.-t*1.2)*(.004+.01*lobe); color+=mix(uPrimary,vec3(.85,.97,1.),.65)*exp(-abs(folded)*95.)*lobe*.65; color+=uSecondary*exp(-abs(outside-.023)*52.)*trailing*.38; float upperFold=exp(-pow((a+2.48+.12*sin(t*.65))/.28,2.)); float veil=outside-.006-sin(up*9.+t*.75)*.008; color+=mix(uSecondary,vec3(.9,.98,1.),.72)*exp(-abs(veil)*83.)*upperFold*.85; // Fine, independent filaments are carried upward on both sides of the orb. for(int i=0;i<14;i++){ float f=float(i),offset=(f-6.5)*.0009; float fold=sin(up*(9.+f*.37)-t*(1.3+f*.035)+f*.72)*.0035; fold+=sin(up*19.-t*1.7+f*.45)*.0018; float line=exp(-abs(rad-r-offset-fold)*1450.); float detail=.35+.65*pow(.5+.5*sin(up*5.-t*1.7+f*.4),3.); color+=mix(uPrimary,uSecondary,f/19.)*line*detail*.075; } float inletMask=1.-smoothstep(-r-.012,-r+.016,p.y); float inletPulse=.55+.45*noise(vec2(p.y*10.-t*1.5,t*.17)); color+=uSecondary*exp(-abs(p.x-spine-.013)*150.)*inletMask*.75*inletPulse; color+=electric*exp(-abs(p.x-spine)*31.)*inletMask*.19; // A diffuse cap, with the condensation flare at twelve o'clock. float apex=length((p-vec2(0.,r))*vec2(.88,1.25)); color+=vec3(.65,.9,1.)*exp(-apex*330.)*.95; color+=uPrimary*exp(-apex*52.)*.28; float mist=exp(-pow(p.x/.115,2.)-pow((p.y-r+.043)/.063,2.)); color+=electric*mist*(.035+.055*noise(vec2(p.x*24.+t*.22,p.y*35.-t*.4))); float inner=exp(-abs(rad-r+.022)*95.)*(1.-smoothstep(r-.008,r,rad)); color+=uPrimary*inner*.17; float bowl=exp(-pow(p.x/.22,2.)-pow((p.y+.22)/.18,2.))*(1.-smoothstep(r-.025,r,rad)); color+=mix(electric,uPrimary,.65)*bowl*.23; // Keep the interior dark and preserve the broad bloom on black. color=vec3(1.)-exp(-color*1.35); gl_FragColor=vec4(color,1.); }`; export const chargePointVertex = ` attribute float aSize,aFade;attribute vec3 aColor;varying float vFade;varying vec3 vColor;uniform float uAspect,uDpr,uScale; void main(){vFade=aFade;vColor=aColor;gl_Position=vec4(position.x*2.,position.y*2./uAspect+.26,0.,1.);gl_PointSize=aSize*2.*uDpr*uScale;}`; export const chargePointFragment = ` precision highp float;varying float vFade;varying vec3 vColor; void main(){float d=length(gl_PointCoord-.5)*2.;float light=exp(-d*d*4.)*.6+exp(-d*d*28.)*1.4;gl_FragColor=vec4(vColor*light*vFade*(1.-smoothstep(.65,1.,d)),1.);}`; b:["$","$L16",null,{"initialView":"preview","originalSource":{"charge":[{"name":"charge.tsx","code":"$17"},{"name":"charge-scene.ts","code":"$18"},{"name":"charge-math.ts","code":"$19"},{"name":"charge-shaders.ts","code":"$1a"}]},"initialElement":"charge","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]