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:T7ff,'use client'; import type { ButtonHTMLAttributes, CSSProperties } from 'react'; import { OpticalButton, OpticalStage } from './optical-button'; import { buttonColor, buttonValue } from './button-optics'; import { lenticularFragment } from './lenticular-shaders'; export type LenticularButtonProps = ButtonHTMLAttributes & { magnification?: number; lensRadius?: number; distortion?: number; gridSpacing?: number; tint?: string; idleMotion?: boolean; paused?: boolean; compact?: boolean; }; export function LenticularButton({ magnification = 1.8, lensRadius = 29, distortion = 0.4, gridSpacing = 22, tint = '#91d9ed', idleMotion = true, paused = false, compact = false, children, ...props }: LenticularButtonProps) { return ( {children ?? 'Lenticular Button'} ); } export default function LenticularPreview({ compact = false, className = '', gridSpacing = 22, ...props }: LenticularButtonProps) { return ( ); } 18:T72d,import { buttonOpticsGLSL } from './button-optics'; export const lenticularFragment = buttonOpticsGLSL + ` uniform vec3 uLensTint; uniform float uMagnification,uLensRadius,uDistortion,uGridSpacing,uIdleMotion; vec3 sceneAt(vec2 q){ // A smooth dark light field, without grid lines or marker geometry. float light=exp(-dot(q,q)/12000.)*.025; return vec3(.031,.039,.051)+uLensTint*light; } void main(){ vec2 p=vUv*uResolution-uResolution*.5;float d=capsule(p);if(d>5.){fragColor=vec4(0.);return;}float depth=max(-d,0.); vec2 rest=vec2(sin(uTime*.31)*uSize.x*.24,cos(uTime*.39)*uSize.y*.13)*uIdleMotion; vec2 center=mix(rest,uCursor,uHover);center=clamp(center,-uSize*.5+vec2(12.),uSize*.5-vec2(12.)); vec2 delta=p-center;float radius=max(8.,uLensRadius),distanceToLens=length(delta),profile=exp(-pow(distanceToLens/radius,4.)*1.6); float magnification=mix(1.,uMagnification,profile);vec2 refracted=center+delta/magnification; refracted+=delta*(distanceToLens/radius)*profile*uDistortion*.13; refracted+=(delta/max(length(delta),.0001))*shock(p)*1.6; float chromatic=profile*uDistortion*.5;vec2 direction=normalize(delta+vec2(.001)); vec3 glass=vec3(sceneAt(refracted+direction*chromatic).r,sceneAt(refracted).g,sceneAt(refracted-direction*chromatic).b); vec3 n=surfaceNormal(p);vec3 view=vec3(0,0,1);float f=fresnel(n,view); float lensEdge=exp(-pow((distanceToLens-radius*.82)/1.35,2.)); float lensHighlight=pow(max(dot(normalize(vec3(delta/radius,1.6)),normalize(vec3(-.5,.7,1.))),0.),30.); vec3 color=glass*(.75+.32*profile)+uLensTint*(.024+.035*profile); color+=mix(uLensTint,vec3(.95),.6)*lensEdge*.14; color+=mix(uLensTint,vec3(1.),.6)*lensHighlight*.1; color+=mix(uLensTint,vec3(1.),.7)*exp(-depth/.9)*(.075+.12*f); color+=uLensTint*exp(-depth/3.)*f*.12; fragColor=compositeGlass(color,uLensTint*.08,d); }`; 19:T7c9,/** Geometry and numerical guards shared by the three independently exported studies. */ export const buttonOpticsGLSL = ` uniform vec2 uResolution,uSize,uCursor,uVelocity,uClick; uniform float uTime,uHover,uRippleAge,uThickness,uBevelWidth,uClickRipple; const float PI=3.141592653589793; float capsule(vec2 p){vec2 b=uSize*.5;float r=min(b.x,b.y);vec2 q=abs(p)-b+r;return min(max(q.x,q.y),0.)+length(max(q,0.))-r;} float elevation(vec2 p){float x=clamp(-capsule(p)/max(uBevelWidth,1.),0.,1.);return uThickness*sqrt(max(0.,1.-(1.-x)*(1.-x)));} vec3 surfaceNormal(vec2 p){vec2 dh=vec2(elevation(p+vec2(.45,0))-elevation(p-vec2(.45,0)),elevation(p+vec2(0,.45))-elevation(p-vec2(0,.45)))/.9;return normalize(vec3(-dh,1.));} float arcLength(vec2 p){float r=min(uSize.x,uSize.y)*.5,l=max(0.,uSize.x*.5-r),total=4.*l+2.*PI*r; if(p.x>l)return r*(atan(p.y,p.x-l)+PI*.5)/total; if(p.x< -l){float a=atan(p.y,p.x+l);if(a<0.)a+=2.*PI;return(2.*l+r*(a+PI*.5))/total;} return p.y>=0.?(PI*r+l-p.x)/total:(2.*PI*r+3.*l+p.x)/total;} float shock(vec2 p){float radius=uRippleAge*160.;return sin((length(p-uClick)-radius)*.2)*exp(-pow((length(p-uClick)-radius)/13.,2.))*exp(-uRippleAge*2.)*uClickRipple*.01;} float fresnel(vec3 n,vec3 view){return .04+.96*pow(1.-clamp(dot(n,view),0.,1.),5.);} vec4 compositeGlass(vec3 color,vec3 glow,float d){float coverage=1.-smoothstep(-max(fwidth(d),.4),max(fwidth(d),.4),d);float halo=exp(-max(d,0.)*1.6)*.11*smoothstep(0.,1.,d);return vec4(mix(glow,color,coverage),max(coverage,halo));} `; export const buttonColor = ( hex: string, fallback: string, ): [number, number, number] => { const value = /^#[\da-f]{6}$/i.test(hex) ? hex : fallback; return [ parseInt(value.slice(1, 3), 16) / 255, parseInt(value.slice(3, 5), 16) / 255, parseInt(value.slice(5, 7), 16) / 255, ]; }; export const buttonValue = ( value: number, min: number, max: number, fallback: number, ) => Math.min(max, Math.max(min, Number.isFinite(value) ? value : fallback)); 1a:T2f98,'use client'; import { useEffect, useRef, useState, type ButtonHTMLAttributes, type ReactNode, type CSSProperties, } from 'react'; import { createNativeGL } from './native-gl'; import { effectRuntime } from './effect-runtime'; import { opticalFragment } from './optical-shaders'; export const opticalDefaults = { refraction: 56, thickness: 32, bevelWidth: 16, frost: 28, dispersion: 96, lightSheen: 16, lightAngle: 24, darkness: 12, edgeRim: 16, brightness: 40, waveSpeed: 80, waveScale: 88, auraWidth: 10, centerClarity: 90, borderBeam: 96, hoverGlow: 180, cursorFlow: 100, clickRipple: 100, }; export type OpticalSettings = typeof opticalDefaults; type NumericKey = keyof OpticalSettings; export const opticalGroups: { title: string; subtitle: string; controls: [NumericKey, string, number, number, string?][]; }[] = [ { title: 'Glass Optics', subtitle: 'Tactile Button', controls: [ ['refraction', 'Refraction', 0, 100], ['thickness', 'Thickness', 0, 64], ['bevelWidth', 'Bevel width', 1, 30], ['frost', 'Frost', 0, 100], ['dispersion', 'Dispersion', 0, 100], ['lightSheen', 'Light sheen', 0, 100], ['lightAngle', 'Light angle', 0, 360, '°'], ['darkness', 'Darkness', 0, 100], ['edgeRim', 'Edge rim', 0, 50], ], }, { title: 'Fluid Settings', subtitle: 'Liquid Caustic', controls: [ ['brightness', 'Brightness', 0, 100], ['waveSpeed', 'Wave speed', 0, 200, '%'], ['waveScale', 'Wave scale', 10, 200, '%'], ['auraWidth', 'Aura width', 1, 40, 'px'], ['centerClarity', 'Center clarity', 0, 100, '%'], ['borderBeam', 'Border beam', 0, 100, '%'], ], }, { title: 'Interactivity', subtitle: 'Fluid Dynamics', controls: [ ['hoverGlow', 'Hover glow', 0, 300], ['cursorFlow', 'Cursor flow', 0, 200, '%'], ['clickRipple', 'Click ripple', 0, 200, '%'], ], }, ]; const opticalBounds = Object.fromEntries( opticalGroups .flatMap((group) => group.controls) .map((control) => [control[0], control]), ); export type OpticalTiming = { timeOffset?: number; timeScale?: number; hueOffset?: number; }; export type OpticalButtonProps = Partial & OpticalTiming & ButtonHTMLAttributes & { iconOnly?: boolean; paused?: boolean; compact?: boolean; fragmentShader?: string; extraUniforms?: Record; }; /** All visible button geometry and optical color come from WebGL2, not CSS. */ export function OpticalButton({ iconOnly = false, paused = false, compact = false, fragmentShader = opticalFragment, extraUniforms = {}, timeOffset = 0, timeScale = 1, hueOffset = 0, children, onClick, style, className = '', ...props }: OpticalButtonProps) { const host = useRef(null), canvas = useRef(null), wake = useRef<() => void>(() => {}), input = useRef({ x: 0, y: 0, hover: 0, clickX: 0, clickY: 0, click: 0 }), [generation, restart] = useState(0), [failed, setFailed] = useState(false); const settings = useRef({ ...opticalDefaults, ...props, paused }); settings.current = { ...opticalDefaults, ...props, paused }; const rendering = useRef({ extraUniforms, timeOffset, timeScale, hueOffset }); rendering.current = { extraUniforms, timeOffset, timeScale, hueOffset }; const nativeProps = Object.fromEntries( Object.entries(props).filter(([key]) => !(key in opticalDefaults)), ) as ButtonHTMLAttributes; useEffect(() => { const root = host.current!, surface = canvas.current!; let renderer: ReturnType | undefined, clock: ReturnType | undefined; let x = 0, y = 0, vx = 0, vy = 0, hover = 0, ripple = 100, clickVersion = 0; setFailed(false); delete root.dataset.ready; try { renderer = createNativeGL(surface, true); const pass = renderer.pass(fragmentShader); clock = effectRuntime( root, surface, (time, dt) => { const p = settings.current, target = input.current; const step = dt || 0; vx += (target.x - x) * 190 * step; vy += (target.y - y) * 190 * step; vx *= Math.exp(-23 * step); vy *= Math.exp(-23 * step); x += vx * step; y += vy * step; hover += (target.hover - hover) * (1 - Math.exp(-12 * step)); if (target.click !== clickVersion) { clickVersion = target.click; ripple = 0; } else ripple += dt; const parameters = rendering.current; const uniforms: Record = { ...parameters.extraUniforms, uResolution: [root.clientWidth, root.clientHeight], uSize: [root.clientWidth - 12, root.clientHeight - 12], uTime: time * parameters.timeScale + parameters.timeOffset, uHueOffset: parameters.hueOffset, uCursor: [x, y], uVelocity: [vx, vy], uHover: hover, uClick: [target.clickX, target.clickY], uRippleAge: ripple, }; for (const key of Object.keys(opticalDefaults) as NumericKey[]) { const def = opticalBounds[key]; const value = p[key]; uniforms['u' + key[0].toUpperCase() + key.slice(1)] = Math.min( def[3], Math.max(def[2], Number.isFinite(value) ? value : opticalDefaults[key]), ); } renderer!.draw(pass, null, uniforms); }, () => settings.current.paused, undefined, compact, ); wake.current = clock.invalidate; } catch (error) { console.error('OpticalButton:', error); setFailed(true); root.dataset.failed = 'true'; renderer?.dispose(); } function lost(event: Event) { event.preventDefault(); clock?.dispose(); setFailed(true); delete root.dataset.ready; } function restored() { delete root.dataset.failed; restart((n) => n + 1); } surface.addEventListener('webglcontextlost', lost); surface.addEventListener('webglcontextrestored', restored); return () => { clock?.dispose(); renderer?.dispose(); wake.current = () => {}; surface.removeEventListener('webglcontextlost', lost); surface.removeEventListener('webglcontextrestored', restored); }; }, [compact, generation, fragmentShader]); useEffect(() => wake.current()); function position(e: { clientX: number; clientY: number }) { const r = host.current!.getBoundingClientRect(); input.current.x = ((e.clientX - r.left) / r.width - 0.5) * host.current!.clientWidth; input.current.y = (0.5 - (e.clientY - r.top) / r.height) * host.current!.clientHeight; wake.current(); } return ( ); } export type OpticalPlaygroundProps = Partial & OpticalTiming & { paused?: boolean; compact?: boolean; perspective?: boolean; className?: string; label?: string; }; export function OpticalStage({ children, compact = false, perspective = false, className = '', style, }: { children: ReactNode; compact?: boolean; perspective?: boolean; className?: string; style?: CSSProperties; }) { return (

{children}

); } /** A clean canvas; all configuration belongs to the consuming inspector. */ export default function OpticalPlayground({ paused = false, compact = false, perspective = false, className = '', label = 'Optical Button', ...settings }: OpticalPlaygroundProps) { return ( {label} ); } const buttonStyles = `.mq-optical-button{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;width:294px;height:80px;padding:0 24px;margin:0;appearance:none;border:0!important;box-shadow:none!important;background:transparent!important;color:#fff;font:500 16px/1.2 system-ui,sans-serif;cursor:pointer;isolation:isolate}.mq-optical-button.mq-optical-icon{width:80px;padding:0}.mq-optical-button>canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.mq-optical-label{position:relative;display:flex;gap:20px;align-items:center;pointer-events:none}.mq-optical-arrow{display:inline-block;font-size:24px;transition:transform .25s ease}.mq-optical-button:hover .mq-optical-arrow{transform:translateX(3px) rotate(-20deg)}.mq-optical-button:focus-visible{outline:2px solid #b4d9ff;outline-offset:3px;border-radius:999px}.mq-optical-button:disabled{opacity:.4;cursor:default}.mq-optical-fallback{position:absolute;top:100%;font-size:9px;color:#9ca3af;white-space:nowrap}@media(prefers-reduced-motion:reduce){.mq-optical-arrow{transition:none}.mq-optical-button:hover .mq-optical-arrow{transform:none}}`; const playgroundStyles = `.mq-optical-playground{position:relative;width:100%;height:100%;min-height:180px;background:#08080a;display:grid;overflow:hidden;color:#ececf2;font-family:system-ui,sans-serif}.mq-optical-stage{min-width:0;display:grid;place-items:center;perspective:900px;overflow:hidden}.mq-optical-pair{transform:scale(1);transition:transform .5s ease;transform-style:preserve-3d}.mq-optical-pair[data-tilted]{transform:rotateX(24deg) rotateY(-14deg) rotateZ(-5deg)}.mq-optical-playground[data-compact] .mq-optical-pair{transform:scale(.94)}@media(prefers-reduced-motion:reduce){.mq-optical-pair{transition:none}}`; 1b:T1593,export const opticalFragment = ` uniform vec2 uResolution,uSize,uCursor,uVelocity,uClick; uniform float uTime,uHover,uRippleAge,uRefraction,uThickness,uBevelWidth,uFrost,uDispersion,uLightSheen,uLightAngle,uDarkness,uEdgeRim; uniform float uBrightness,uWaveSpeed,uWaveScale,uAuraWidth,uCenterClarity,uBorderBeam,uHoverGlow,uCursorFlow,uClickRipple; uniform float uHueOffset; const float PI=3.14159265359; float sdRoundedBox(vec2 p,vec2 b,float r){vec2 q=abs(p)-b+r;return min(max(q.x,q.y),0.)+length(max(q,0.))-r;} 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)),f.x),f.y);} float fbm(vec2 p){return .62*noise(p)+.26*noise(p*2.03+3.2)+.12*noise(p*4.07+9.7);} vec2 field(vec2 p,float t){vec2 q=vec2(fbm(p+vec2(t*.14,-t*.11)),fbm(p+vec2(4.2+t*.09,1.3)));return vec2(fbm(p+1.3*q+vec2(1.7,9.2)),fbm(p+1.3*q+vec2(8.3,2.8)));} vec3 rainbow(float hue){return clamp(abs(fract(hue+vec3(0.,2./3.,1./3.))*6.-3.)-1.,0.,1.);} float shape(vec2 p){vec2 b=uSize*.5;return sdRoundedBox(p,b,min(b.x,b.y));} float heightAt(vec2 p){float x=clamp(-shape(p)/max(uBevelWidth,1.),0.,1.);return uThickness*sqrt(max(0.,1.-(1.-x)*(1.-x)));} // Continuous arc length around the capsule, rather than a flat gradient across its face. float perimeter(vec2 p){float r=min(uSize.x,uSize.y)*.5,l=max(0.,uSize.x*.5-r),total=4.*l+2.*PI*r; if(p.x>l)return r*(atan(p.y,p.x-l)+PI*.5)/total; if(p.x< -l){float a=atan(p.y,p.x+l);if(a<0.)a+=2.*PI;return (2.*l+r*(a+PI*.5))/total;} return p.y>=0.?(PI*r+l-p.x)/total:(2.*PI*r+3.*l+p.x)/total; } void main(){ vec2 p=vUv*uResolution-uResolution*.5;float d=shape(p),aa=max(fwidth(d),.5),inside=1.-smoothstep(-aa,aa,d); if(d>5.){fragColor=vec4(0.);return;} float depth=max(-d,0.),t=uTime*uWaveSpeed*.01; vec2 gradient=vec2(shape(p+vec2(.4,0))-shape(p-vec2(.4,0)),shape(p+vec2(0,.4))-shape(p-vec2(0,.4)))/.8; vec2 slope=vec2(heightAt(p+vec2(.5,0))-heightAt(p-vec2(.5,0)),heightAt(p+vec2(0,.5))-heightAt(p-vec2(0,.5))); vec3 normal=normalize(vec3(-slope,1.)); float nearCursor=exp(-dot(p-uCursor,p-uCursor)/3000.)*uHover; vec2 fluidUV=p/95.*max(.1,uWaveScale*.01); fluidUV-=uVelocity*.0011*uCursorFlow*.01*nearCursor; fluidUV+=vec2(-(p.y-uCursor.y),p.x-uCursor.x)*.0012*nearCursor*uCursorFlow*.01; float shock=sin((length(p-uClick)-uRippleAge*190.)*.15)*exp(-pow((length(p-uClick)-uRippleAge*190.)/24.,2.))*exp(-uRippleAge*1.8)*uClickRipple*.01; vec2 warp=field(fluidUV,t);float s=perimeter(p); float phase=s*2.*PI-t*.93+sin(t*.36)*.45+(warp.x-.5)*.24; float lobe=pow(max(0.,cos(phase)),3.5);float counter=pow(max(0.,cos(phase+2.8)),8.)*.22; float illumination=.035+lobe+counter+nearCursor*uHoverGlow*.0023; // Integer winding closes the spectrum at s=0/1 (the lower-right join). float hue=-s*2.+t*.185+.18+uHueOffset+(warp.y-.5)*.12+shock*.055; float spread=uDispersion*.01; // Cauchy-like wavelength offsets refract the three spectral channels independently. vec3 rayR=refract(vec3(0,0,-1),normal,1./(1.44+spread*.008)); vec3 rayG=refract(vec3(0,0,-1),normal,1./(1.45+spread*.026)); vec3 rayB=refract(vec3(0,0,-1),normal,1./(1.47+spread*.065)); float bend=(uRefraction*.00065+uThickness*.0004)*dot(gradient,vec2(.7,.5)); vec3 spectrum=vec3(rainbow(hue+rayR.x*bend).r,rainbow(hue+rayG.x*bend).g,rainbow(hue+rayB.x*bend).b); spectrum=mix(vec3(.72,.82,.95),spectrum,clamp(spread*1.35,0.,1.)); float aperture=max(1.,uAuraWidth),clarity=uCenterClarity*.01; float foldDepth=1.1+aperture*(.12+.62*pow(.5+.5*sin(s*6.*PI+warp.x*6.-t*1.15),3.))+shock*3.; float fold=exp(-pow((depth-foldDepth)/(.55+uFrost*.012),2.)); float secondFold=exp(-pow((depth-foldDepth*.47-1.4)/(.45+uFrost*.008),2.))*.24; float penetration=exp(-depth/(aperture*.64)); float bevelBand=exp(-depth/(1.4+aperture*.19)); float edge=exp(-depth/.7)*uBorderBeam*.01; float caustic=(fold+secondFold)*penetration*.7; float flood=penetration*(1.-clarity)*1.2; // A perimeter chart has a medial-axis singularity. Fade it before that axis; // the volume uses a continuous Cartesian field instead of extending the chart. float chartWeight=smoothstep(1.5,10.,min(uSize.x,uSize.y)*.5-depth); vec2 body=p/max(uSize*.5,vec2(1.)); float bodyHue=-body.x*.48+body.y*.13+t*.185+.18+uHueOffset+(warp.y-.5)*.25+shock*.055; vec3 volumeSpectrum=mix(vec3(.72,.82,.95),rainbow(bodyHue),clamp(spread*1.35,0.,1.)); float volumeLight=.1+pow(.5+.5*sin(body.x*2.4+body.y*.9-t*.93+warp.x*.6),3.)+nearCursor*uHoverGlow*.0023; vec3 color=vec3(.033,.036,.047)*(1.-uDarkness*.007); color+=spectrum*(bevelBand*.42+edge*.8+caustic)*illumination*uBrightness*.047*chartWeight; color+=volumeSpectrum*flood*volumeLight*uBrightness*.047; // Soft secondary wisps remain visible within the dark glass, below the lettering. color+=rainbow(hue+.16)*fold*penetration*.028*(.2+illumination)*chartWeight; float angle=radians(uLightAngle);vec3 light=normalize(vec3(cos(angle)*.8,sin(angle)*.8,1.)); float spec=pow(max(dot(normal,normalize(light+vec3(0,0,1))),0.),mix(110.,30.,uFrost*.01)); float neutralRim=exp(-depth/.65)*(.025+max(dot(gradient,light.xy),0.)*.06)*uEdgeRim*.05; color+=vec3(.7,.8,1.)*(neutralRim+spec*uLightSheen*.0006); color=mix(color,vec3(dot(color,vec3(.2126,.7152,.0722))),uFrost*.0012); float outer=exp(-max(d,0.)*1.6)*.12;vec3 glow=spectrum*illumination*uBrightness*.012; fragColor=vec4(mix(glow,color,inside),max(inside,outer*smoothstep(0.,1.,d))); }`; 1c:T1be1,export type GLTarget = { texture: WebGLTexture; framebuffer: WebGLFramebuffer; width: number; height: number; }; type Uniform = number | readonly number[] | { texture: WebGLTexture } | { vec4Array: Float32Array }; export type GLPass = { program: WebGLProgram; locations: Map; }; const vertex = `#version 300 es precision highp float;out vec2 vUv; void main(){vec2 p=vec2((gl_VertexID<<1)&2,gl_VertexID&2);vUv=p;gl_Position=vec4(p*2.-1.,0.,1.);}`; const header = `#version 300 es precision highp float;precision highp sampler2D;in vec2 vUv;out vec4 fragColor; `; /** Small WebGL2 owner shared by the native fluid and brush renderers. */ export function createNativeGL(canvas: HTMLCanvasElement, alpha = false) { const context = canvas.getContext('webgl2', { alpha, premultipliedAlpha: false, antialias: false, depth: false, stencil: false, powerPreference: 'high-performance', }); if (!context) throw Error('WebGL2 is unavailable'); const gl = context; const programs = new Set(), textures = new Set(), targets = new Set(); let disposed = false; const vao = gl.createVertexArray(); if (!vao) throw Error('Vertex array unavailable'); gl.bindVertexArray(vao); gl.disable(gl.DEPTH_TEST); gl.disable(gl.BLEND); function pass(body: string): GLPass { const shaders: WebGLShader[] = []; let program: WebGLProgram | null = null; try { for (const [type, code] of [ [gl.VERTEX_SHADER, vertex], [gl.FRAGMENT_SHADER, header + body], ] as const) { const shader = gl.createShader(type); if (!shader) throw Error('Shader unavailable'); shaders.push(shader); gl.shaderSource(shader, code); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw Error(gl.getShaderInfoLog(shader) || 'Shader compilation failed'); } program = gl.createProgram(); if (!program) throw Error('Program unavailable'); shaders.forEach((s) => gl.attachShader(program!, s)); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw Error(gl.getProgramInfoLog(program) || 'Program linking failed'); programs.add(program); return { program, locations: new Map() }; } catch (error) { if (program) gl.deleteProgram(program); throw error; } finally { shaders.forEach((s) => gl.deleteShader(s)); } } function texture() { const t = gl.createTexture(); if (!t) throw Error('Texture unavailable'); textures.add(t); gl.bindTexture(gl.TEXTURE_2D, t); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255, 255, 255, 255]), ); return t; } function upload(t: WebGLTexture, source: TexImageSource) { gl.bindTexture(gl.TEXTURE_2D, t); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); try { gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source); } finally { gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); } } function target(width: number, height: number, floating = false): GLTarget { const t = texture(), framebuffer = gl.createFramebuffer(); if (!framebuffer) { gl.deleteTexture(t); textures.delete(t); throw Error('Framebuffer unavailable'); } gl.bindTexture(gl.TEXTURE_2D, t); gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, floating ? gl.NEAREST : gl.LINEAR, ); gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, floating ? gl.NEAREST : gl.LINEAR, ); gl.texImage2D( gl.TEXTURE_2D, 0, floating ? gl.RGBA16F : gl.RGBA8, width, height, 0, gl.RGBA, floating ? gl.HALF_FLOAT : gl.UNSIGNED_BYTE, null, ); gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, t, 0); if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) { gl.deleteFramebuffer(framebuffer); gl.deleteTexture(t); textures.delete(t); throw Error('Framebuffer is not renderable'); } const result = { texture: t, framebuffer, width, height }; targets.add(result); gl.viewport(0, 0, width, height); gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); return result; } function release(t: GLTarget) { if (!targets.delete(t)) return; gl.deleteFramebuffer(t.framebuffer); gl.deleteTexture(t.texture); textures.delete(t.texture); } function draw( p: GLPass, destination: GLTarget | null, uniforms: Record = {}, ) { gl.bindVertexArray(vao); gl.useProgram(p.program); gl.bindFramebuffer(gl.FRAMEBUFFER, destination?.framebuffer ?? null); gl.viewport( 0, 0, destination?.width ?? canvas.width, destination?.height ?? canvas.height, ); let unit = 0; for (const [name, value] of Object.entries(uniforms)) { if (!p.locations.has(name)) p.locations.set(name, gl.getUniformLocation(p.program, name)); const location = p.locations.get(name)!; if (location === null) continue; if (typeof value === 'number') gl.uniform1f(location, value); else if ('texture' in value) { gl.activeTexture(gl.TEXTURE0 + unit); gl.bindTexture(gl.TEXTURE_2D, value.texture); gl.uniform1i(location, unit++); } else if ('vec4Array' in value) gl.uniform4fv(location, value.vec4Array); else if (value.length === 2) gl.uniform2f(location, value[0], value[1]); else if (value.length === 3) gl.uniform3f(location, value[0], value[1], value[2]); else if (value.length === 4) gl.uniform4f(location, value[0], value[1], value[2], value[3]); } gl.drawArrays(gl.TRIANGLES, 0, 3); } return { gl, pass, texture, upload, target, release, draw, dispose() { if (disposed) return; disposed = true; targets.forEach(release); programs.forEach((p) => gl.deleteProgram(p)); programs.clear(); textures.forEach((t) => gl.deleteTexture(t)); textures.clear(); gl.deleteVertexArray(vao); }, }; } export const nativeClamp = (n: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, Number.isFinite(n) ? n : lo)); export function nativeColor(hex: string, fallback: string): [number, number, number] { const h = /^#[\da-f]{6}$/i.test(hex) ? hex : fallback; return [ parseInt(h.slice(1, 3), 16) / 255, parseInt(h.slice(3, 5), 16) / 255, parseInt(h.slice(5, 7), 16) / 255, ]; } 1d: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":{"lenticular-button":[{"name":"lenticular-button.tsx","code":"$17"},{"name":"lenticular-shaders.ts","code":"$18"},{"name":"button-optics.ts","code":"$19"},{"name":"optical-button.tsx","code":"$1a"},{"name":"optical-shaders.ts","code":"$1b"},{"name":"native-gl.ts","code":"$1c"},{"name":"effect-runtime.ts","code":"$1d"}]},"initialElement":"lenticular-button","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]