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:T1338,'use client'; import { useEffect, useRef, useState, type CSSProperties } from 'react'; import { createInkshiftEngine, type InkshiftOptions } from './inkshift-engine'; import { inkshiftWords, kineticWords, kineticLetters } from './inkshift-math'; export type InkshiftProps = { words?: readonly string[]; vorticity?: number; dissipation?: number; splatRadius?: number; threshold?: number; backgroundColor?: string; foregroundColor?: string; autoCycle?: boolean; compact?: boolean; paused?: boolean; className?: string; }; export default function Inkshift({ words = inkshiftWords, vorticity = 40, dissipation = 0.55, splatRadius = 0.12, threshold = 0.5, backgroundColor = '#0b0c10', foregroundColor = '#f3f2ed', autoCycle = true, compact = false, paused = false, className = '', }: InkshiftProps) { const root = useRef(null), canvas = useRef(null), engine = useRef | null>(null), [index, setIndex] = useState(0), [announcement, setAnnouncement] = useState(''); const options = useRef({ words, vorticity, dissipation, splatRadius, threshold, backgroundColor, foregroundColor, autoCycle, paused, }); options.current = { words, vorticity, dissipation, splatRadius, threshold, backgroundColor, foregroundColor, autoCycle, paused, }; const valid = kineticWords(words), word = valid[index] ?? valid[0], wordKey = JSON.stringify(words), letters = kineticLetters(word), plain = letters.map((l) => l.char).join(''); useEffect(() => { try { engine.current = createInkshiftEngine( canvas.current!, compact, () => options.current, (i, manual) => { setIndex(i); if (manual) setAnnouncement( kineticLetters(kineticWords(options.current.words)[i]) .map((l) => l.char) .join(''), ); }, ); } catch { root.current!.dataset.failed = 'true'; } return () => { engine.current?.dispose(); engine.current = null; }; }, [compact]); useEffect( () => engine.current?.sync(), [ wordKey, vorticity, dissipation, splatRadius, threshold, backgroundColor, foregroundColor, autoCycle, paused, ], ); return (

); } const styles = `@font-face{font-family:MotiqoInkshift;src:url('/media/inkshift-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}.inkshift{position:relative;width:100%;height:100%;min-height:0;overflow:clip;isolation:isolate;background:var(--ink-bg,#0b0c10);color:var(--ink-fg,#f3f2ed);touch-action:none;outline:none;container-type:size}.inkshift[data-compact=true]{touch-action:pan-y}.inkshift>canvas,.inkshift-fallback{position:absolute;inset:0;width:100%;height:100%;display:block}.inkshift>canvas{opacity:0;transition:opacity .2s linear}.inkshift[data-ready=true]>canvas{opacity:1}.inkshift[data-ready=true]>.inkshift-fallback{visibility:hidden}.inkshift-fallback{display:grid;place-items:center}.inkshift-fallback svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--ink-fg);opacity:1}.inkshift-fallback>div{position:relative;white-space:nowrap;font-family:MotiqoInkshift,Arial,sans-serif;font-size:clamp(42px,20cqw,256px);letter-spacing:-.05em;line-height:1.2;mix-blend-mode:difference;color:#fff}.inkshift-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.inkshift:focus-visible{outline:1px solid var(--ink-fg);outline-offset:-4px}@media(prefers-reduced-motion:reduce){.inkshift>canvas{transition:none}}`; 18:T4145,import { createNativeGL, nativeClamp, nativeColor, type GLTarget, type GLPass, } from './native-gl'; import { inkshiftWords, kineticWords, kineticLetters, kineticAdvance, kineticEase, type KineticState, } from './inkshift-math'; import * as shaders from './inkshift-shaders'; export type InkshiftOptions = { words: readonly string[]; vorticity: number; dissipation: number; splatRadius: number; threshold: number; backgroundColor: string; foregroundColor: string; autoCycle: boolean; paused: boolean; }; type Pair = { read: GLTarget; write: GLTarget }; type Splat = { x: number; y: number; dx: number; dy: number; dye: number }; export function createInkshiftEngine( canvas: HTMLCanvasElement, compact: boolean, read: () => InkshiftOptions, onWord: (index: number, manual: boolean) => void, ) { const host = canvas.parentElement!, media = matchMedia('(prefers-reduced-motion: reduce)'), textCanvas = document.createElement('canvas'), ctx = textCanvas.getContext('2d'); if (!ctx) throw Error('Text canvas unavailable'); let gpu: ReturnType | undefined, passes: Record = {}, velocity: Pair, dye: Pair, pressure: Pair, curl: GLTarget, divergence: GLTarget, textTexture: WebGLTexture; let targets: GLTarget[] = [], frame = 0, disposed = false, lost = false, visible = true, width = 0, height = 0, time = 0, last = 0, energyUntil = 8, fontReady = false, textDirty = true, words = kineticWords(read().words), wordsKey = JSON.stringify(words), from = 0, transition = -10, direction = 1; let lastPointer: { x: number; y: number } | undefined, dragY: number | undefined, pointerId: number | undefined, nextAmbient = 0.7; const state: KineticState = { position: 0, velocity: 0, index: 0, lastInput: -10, lastCycle: 0, }, queue: Splat[] = []; const swap = (p: Pair) => { [p.read, p.write] = [p.write, p.read]; }; function stop() { cancelAnimationFrame(frame); frame = 0; } function fail() { stop(); host.dataset.failed = 'true'; delete host.dataset.ready; gpu?.dispose(); gpu = undefined; } function build() { try { gpu = createNativeGL(canvas); if (!gpu.gl.getExtension('EXT_color_buffer_float')) throw Error('Floating point fluid targets unavailable'); passes = Object.fromEntries( Object.entries(shaders).map(([key, source]) => [key, gpu!.pass(source)]), ); textTexture = gpu.texture(); delete host.dataset.failed; } catch { fail(); } } function makePair(w: number, h: number): Pair { const a = gpu!.target(w, h, true), b = gpu!.target(w, h, true); targets.push(a, b); return { read: a, write: b }; } function enqueue(s: Splat) { queue.push(s); if (queue.length > 24) queue.shift(); energyUntil = time + 8; } function burst() { for (let i = 0; i < 6; i++) { const a = i * 2.399 + state.index * 0.7; enqueue({ x: 0.5 + Math.cos(a) * 0.19, y: 0.5 + Math.sin(a) * 0.14, dx: Math.sin(a) * 230, dy: Math.cos(a) * 220, dye: 2.5, }); } } function change(index: number, manual: boolean, stepDirection: number) { from = state.index; state.index = index; transition = time; direction = stepDirection; textDirty = true; state.lastCycle = time; burst(); onWord(index, manual); } function step(dt: number) { if (!gpu) return; const o = read(), vTexel = [1 / velocity.read.width, 1 / velocity.read.height], dTexel = [1 / dye.read.width, 1 / dye.read.height]; for (const s of queue.splice(0, 8)) { const params = { uPoint: [s.x, s.y], uRadius: nativeClamp(o.splatRadius, 0.025, 0.22), uAspect: width / height, }; gpu.draw(passes.inkSplat, velocity.write, { ...params, uSource: velocity.read, uForce: [s.dx, s.dy], uDye: 0, }); swap(velocity); gpu.draw(passes.inkSplat, dye.write, { ...params, uSource: dye.read, uForce: [0, 0], uDye: s.dye, }); swap(dye); } gpu.draw(passes.inkCurl, curl, { uVelocity: velocity.read, uTexel: vTexel }); gpu.draw(passes.inkVorticity, velocity.write, { uVelocity: velocity.read, uCurl: curl, uTexel: vTexel, uDt: dt, uStrength: nativeClamp(o.vorticity, 0, 80), }); swap(velocity); gpu.draw(passes.inkDivergence, divergence, { uVelocity: velocity.read, uTexel: vTexel, }); gpu.draw(passes.inkClear, pressure.write, { uSource: pressure.read, uScale: 0.8 }); swap(pressure); for (let i = 0; i < 18; i++) { gpu.draw(passes.inkPressure, pressure.write, { uPressure: pressure.read, uDivergence: divergence, uTexel: vTexel, }); swap(pressure); } gpu.draw(passes.inkGradient, velocity.write, { uPressure: pressure.read, uVelocity: velocity.read, uTexel: vTexel, }); swap(velocity); gpu.draw(passes.inkAdvect, velocity.write, { uVelocity: velocity.read, uSource: velocity.read, uVelocityTexel: vTexel, uSourceTexel: vTexel, uDt: dt, uDecay: 0.45, }); swap(velocity); gpu.draw(passes.inkAdvect, dye.write, { uVelocity: velocity.read, uSource: dye.read, uVelocityTexel: vTexel, uSourceTexel: dTexel, uDt: dt, uDecay: nativeClamp(o.dissipation, 0.08, 2), }); swap(dye); } function layout(word: string) { const letters = kineticLetters(word); let font = Math.min(width * 0.32, 256), tracking = -font * 0.05; function measure() { return letters.map((l) => { ctx!.font = `${l.weight} ${font}px MotiqoInkshift,Arial,sans-serif`; return ctx!.measureText(l.char).width + tracking; }); } let advances = measure(), total = advances.reduce((a, b) => a + b, 0); if (total > width * 0.93) { font *= (width * 0.93) / total; tracking = -font * 0.05; advances = measure(); total = advances.reduce((a, b) => a + b, 0); } return { letters, font, advances, left: (width - total) * 0.5 }; } function paintWord(index: number, incoming: boolean) { const l = layout(words[index] ?? inkshiftWords[0]), baseline = height * 0.5 + l.font * 0.34; let x = l.left; l.letters.forEach((letter, i) => { const q = media.matches ? 1 : nativeClamp((time - transition - i * 0.026) / 0.52, 0, 1), ease = kineticEase(q), offset = incoming ? (1 - ease) * l.font * 1.35 * direction : -ease * l.font * 1.35 * direction; ctx!.save(); ctx!.beginPath(); ctx!.rect( x - l.font * 0.02, baseline - l.font * 1.02, l.advances[i] + l.font * 0.09, l.font * 1.24, ); ctx!.clip(); ctx!.font = `${letter.weight} ${l.font}px MotiqoInkshift,Arial,sans-serif`; ctx!.fillText(letter.char, x, baseline + offset); ctx!.restore(); x += l.advances[i]; }); } function text() { if (!gpu || !textDirty) return; textCanvas.width = Math.max( 1, Math.round(width * Math.min(devicePixelRatio || 1, 1.5)), ); textCanvas.height = Math.max( 1, Math.round(height * Math.min(devicePixelRatio || 1, 1.5)), ); ctx!.setTransform(textCanvas.width / width, 0, 0, textCanvas.height / height, 0, 0); ctx!.clearRect(0, 0, width, height); ctx!.fillStyle = '#ffffff'; if (time - transition < 1.5 && !media.matches) paintWord(from, false); paintWord(state.index, true); gpu.upload(textTexture, textCanvas); textDirty = false; } function draw() { if (!gpu || !width || !height || lost) return; text(); gpu.draw(passes.inkDisplay, null, { uDye: dye.read, uText: { texture: textTexture }, uThreshold: nativeClamp(read().threshold, 0.1, 0.9), uTime: time, uBackground: nativeColor(read().backgroundColor, '#0b0c10'), uForeground: nativeColor(read().foregroundColor, '#f3f2ed'), uResolution: [width, height], }); if (fontReady) host.dataset.ready = 'true'; host.dataset.word = String(state.index); host.dataset.fluidTime = time.toFixed(3); } function tick(now: number) { frame = 0; if (disposed || lost || !visible || document.hidden || !gpu) return; const elapsed = now - last; if (elapsed < 1000 / 60 - 0.5) { frame = requestAnimationFrame(tick); return; } last = now; const dt = Math.min(0.033, elapsed / 1000); if (!read().paused && !media.matches) { time += dt; const previous = state.index, velocitySign = state.velocity < 0 ? -1 : 1; if (kineticAdvance(state, dt, time, words.length, read().autoCycle)) { const next = state.index; state.index = previous; change(next, time - state.lastInput < 2.5, velocitySign); } // Replenish ink gently between word bursts instead of letting the idle canvas drain. if (read().autoCycle && time >= nextAmbient) { nextAmbient = time + 0.65; const a = time * 1.7; enqueue({ x: 0.5 + Math.cos(a) * 0.17, y: 0.5 + Math.sin(a) * 0.16, dx: Math.sin(a) * 65, dy: Math.cos(a) * 55, dye: 2.2, }); } step(dt); if (time - transition < 1.5) textDirty = true; } draw(); if ( !read().paused && !media.matches && (read().autoCycle || time < energyUntil || time - transition < 1.5) ) frame = requestAnimationFrame(tick); } function wake() { if ( !disposed && !lost && gpu && !frame && visible && !document.hidden && !read().paused && !media.matches ) { last = performance.now(); frame = requestAnimationFrame(tick); } } function resize() { if (!gpu || lost) return; const box = host.getBoundingClientRect(); const w = Math.max(1, box.width), h = Math.max(1, box.height); if (w === width && h === height) { draw(); return; } width = w; height = h; const dpr = Math.min(devicePixelRatio || 1, compact ? 1 : 1.5); canvas.width = Math.round(w * dpr); canvas.height = Math.round(h * dpr); targets.forEach((t) => gpu!.release(t)); targets = []; const ratio = w / h, side = compact ? 128 : 192, vw = Math.round(ratio >= 1 ? side : side * ratio), vh = Math.round(ratio >= 1 ? side / ratio : side), ds = compact ? 320 : 512, dw = Math.round(ratio >= 1 ? ds : ds * ratio), dh = Math.round(ratio >= 1 ? ds / ratio : ds); try { velocity = makePair(Math.max(16, vw), Math.max(16, vh)); pressure = makePair(Math.max(16, vw), Math.max(16, vh)); dye = makePair(Math.max(32, dw), Math.max(32, dh)); curl = gpu.target(Math.max(16, vw), Math.max(16, vh), true); divergence = gpu.target(Math.max(16, vw), Math.max(16, vh), true); targets.push(curl, divergence); burst(); for (let i = 0; i < 10; i++) step(1 / 60); textDirty = true; draw(); wake(); } catch { fail(); } } function sync() { stop(); const next = kineticWords(read().words), key = JSON.stringify(next); if (key !== wordsKey) { wordsKey = key; words = next; state.position = state.index = 0; from = 0; transition = -10; textDirty = true; burst(); onWord(0, false); } if (media.matches) { transition = -10; textDirty = true; } draw(); wake(); } function point(event: PointerEvent) { if (read().paused || media.matches) return; const r = host.getBoundingClientRect(), p = { x: nativeClamp((event.clientX - r.left) / r.width, 0, 1), y: nativeClamp(1 - (event.clientY - r.top) / r.height, 0, 1), }; if (lastPointer) { enqueue({ ...p, dx: nativeClamp((p.x - lastPointer.x) * 2200, -450, 450), dy: nativeClamp((p.y - lastPointer.y) * 2200, -450, 450), dye: 1.3, }); } lastPointer = p; state.lastInput = time; if (dragY !== undefined && event.pointerId === pointerId) { state.velocity = nativeClamp( state.velocity + (dragY - event.clientY) * 0.035, -6, 6, ); dragY = event.clientY; } wake(); } function leave() { lastPointer = undefined; } function down(e: PointerEvent) { if (compact) return; pointerId = e.pointerId; dragY = e.clientY; host.setPointerCapture(e.pointerId); state.lastInput = time; point(e); } function up(e: PointerEvent) { if (pointerId === e.pointerId) { if (host.hasPointerCapture(e.pointerId)) host.releasePointerCapture(e.pointerId); pointerId = undefined; dragY = undefined; lastPointer = undefined; } } function wheel(e: WheelEvent) { if (compact) return; e.preventDefault(); if (read().paused || media.matches) return; state.lastInput = time; state.velocity = nativeClamp( state.velocity + e.deltaY * (e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? height : 1) * 0.022, -6, 6, ); enqueue({ x: 0.5, y: 0.5, dx: state.velocity * 65, dy: 100, dye: 1.5 }); wake(); } function key(e: KeyboardEvent) { if ( e.target !== host || !['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp', 'Home', ' '].includes(e.key) ) return; e.preventDefault(); const sign = e.key === 'ArrowLeft' || e.key === 'ArrowUp' ? -1 : 1; state.lastInput = time; state.velocity = 0; state.position = e.key === 'Home' ? 0 : Math.round(state.position) + sign; change( ((Math.round(state.position) % words.length) + words.length) % words.length, true, sign, ); if (media.matches || read().paused) { transition = -10; textDirty = true; step(1 / 60); draw(); } else wake(); } function visibility() { stop(); if (visible && !document.hidden) { draw(); wake(); } } function onLost(e: Event) { e.preventDefault(); lost = true; stop(); delete host.dataset.ready; } function onRestored() { gpu?.dispose(); gpu = undefined; lost = false; width = height = 0; build(); resize(); } const size = new ResizeObserver(resize), intersection = new IntersectionObserver(([e]) => { visible = e.isIntersecting; visibility(); }); host.addEventListener('pointermove', point); host.addEventListener('pointerleave', leave); host.addEventListener('pointerdown', down); host.addEventListener('pointerup', up); host.addEventListener('pointercancel', up); host.addEventListener('keydown', key); if (!compact) host.addEventListener('wheel', wheel, { passive: false }); document.addEventListener('visibilitychange', visibility); media.addEventListener('change', sync); canvas.addEventListener('webglcontextlost', onLost); canvas.addEventListener('webglcontextrestored', onRestored); build(); size.observe(host); intersection.observe(host); resize(); Promise.all([ document.fonts?.load('100 32px MotiqoInkshift'), document.fonts?.load('800 32px MotiqoInkshift'), ]) .catch(() => {}) .then(() => { if (disposed) return; fontReady = true; textDirty = true; draw(); }); return { sync, dispose() { if (disposed) return; disposed = true; stop(); size.disconnect(); intersection.disconnect(); host.removeEventListener('pointermove', point); host.removeEventListener('pointerleave', leave); host.removeEventListener('pointerdown', down); host.removeEventListener('pointerup', up); host.removeEventListener('pointercancel', up); host.removeEventListener('keydown', key); host.removeEventListener('wheel', wheel); document.removeEventListener('visibilitychange', visibility); media.removeEventListener('change', sync); canvas.removeEventListener('webglcontextlost', onLost); canvas.removeEventListener('webglcontextrestored', onRestored); gpu?.dispose(); gpu = undefined; queue.length = 0; canvas.width = canvas.height = textCanvas.width = textCanvas.height = 0; delete host.dataset.ready; }, }; } 19:Te03,export const inkSplat = `uniform sampler2D uSource;uniform vec2 uPoint,uForce;uniform float uRadius,uAspect,uDye; void main(){vec2 d=vUv-uPoint;d.x*=uAspect;float s=exp(-dot(d,d)/(uRadius*uRadius));vec4 old=texture(uSource,vUv);fragColor=old+vec4(uForce*s,uDye*s,0.);}`; export const inkCurl = `uniform sampler2D uVelocity;uniform vec2 uTexel; void main(){float l=texture(uVelocity,vUv-vec2(uTexel.x,0)).y,r=texture(uVelocity,vUv+vec2(uTexel.x,0)).y,b=texture(uVelocity,vUv-vec2(0,uTexel.y)).x,t=texture(uVelocity,vUv+vec2(0,uTexel.y)).x;fragColor=vec4(.5*(r-l-t+b),0,0,1);}`; export const inkVorticity = `uniform sampler2D uVelocity,uCurl;uniform vec2 uTexel;uniform float uDt,uStrength; void main(){float l=texture(uCurl,vUv-vec2(uTexel.x,0)).x,r=texture(uCurl,vUv+vec2(uTexel.x,0)).x,b=texture(uCurl,vUv-vec2(0,uTexel.y)).x,t=texture(uCurl,vUv+vec2(0,uTexel.y)).x,c=texture(uCurl,vUv).x;vec2 n=vec2(abs(t)-abs(b),abs(r)-abs(l));n/=length(n)+.0001;vec2 force=n*uStrength*c*.25;force.y*=-1.;fragColor=vec4(clamp(texture(uVelocity,vUv).xy+force*uDt,vec2(-650),vec2(650)),0,1);}`; export const inkDivergence = `uniform sampler2D uVelocity;uniform vec2 uTexel; void main(){vec2 c=texture(uVelocity,vUv).xy;float l=texture(uVelocity,vUv-vec2(uTexel.x,0)).x,r=texture(uVelocity,vUv+vec2(uTexel.x,0)).x,b=texture(uVelocity,vUv-vec2(0,uTexel.y)).y,t=texture(uVelocity,vUv+vec2(0,uTexel.y)).y;if(vUv.x1.-uTexel.x)r=-c.x;if(vUv.y1.-uTexel.y)t=-c.y;fragColor=vec4(.5*(r-l+t-b),0,0,1);}`; export const inkClear = `uniform sampler2D uSource;uniform float uScale;void main(){fragColor=texture(uSource,vUv)*uScale;}`; export const inkPressure = `uniform sampler2D uPressure,uDivergence;uniform vec2 uTexel; void main(){float l=texture(uPressure,vUv-vec2(uTexel.x,0)).x,r=texture(uPressure,vUv+vec2(uTexel.x,0)).x,b=texture(uPressure,vUv-vec2(0,uTexel.y)).x,t=texture(uPressure,vUv+vec2(0,uTexel.y)).x,d=texture(uDivergence,vUv).x;fragColor=vec4((l+r+b+t-d)*.25,0,0,1);}`; export const inkGradient = `uniform sampler2D uPressure,uVelocity;uniform vec2 uTexel; void main(){float l=texture(uPressure,vUv-vec2(uTexel.x,0)).x,r=texture(uPressure,vUv+vec2(uTexel.x,0)).x,b=texture(uPressure,vUv-vec2(0,uTexel.y)).x,t=texture(uPressure,vUv+vec2(0,uTexel.y)).x;fragColor=vec4(texture(uVelocity,vUv).xy-vec2(r-l,t-b)*.5,0,1);}`; export const inkAdvect = `uniform sampler2D uVelocity,uSource;uniform vec2 uVelocityTexel,uSourceTexel;uniform float uDt,uDecay; vec4 bilerp(sampler2D tex,vec2 uv,vec2 pixel){vec2 st=uv/pixel-.5,i=floor(st),f=fract(st);vec2 a=(i+.5)*pixel;return mix(mix(texture(tex,a),texture(tex,a+vec2(pixel.x,0)),f.x),mix(texture(tex,a+vec2(0,pixel.y)),texture(tex,a+pixel),f.x),f.y);} void main(){vec2 v=bilerp(uVelocity,vUv,uVelocityTexel).xy;vec2 p=vUv-uDt*v*uVelocityTexel;fragColor=bilerp(uSource,p,uSourceTexel)*exp(-uDt*uDecay);}`; export const inkDisplay = `uniform sampler2D uDye,uText;uniform float uThreshold,uTime;uniform vec3 uBackground,uForeground;uniform vec2 uResolution; 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);} void main(){float density=texture(uDye,vUv).z;float rough=(noise(vUv*uResolution*.23+vec2(uTime*.5,-uTime))-.5)*.11;float aa=max(.02,fwidth(density)*.65);float ink=smoothstep(uThreshold-aa,uThreshold+aa,density+rough);float text=texture(uText,vUv).a;fragColor=vec4(mix(uBackground,uForeground,abs(ink-text)),1.);}`; 1a:T67e,export const inkshiftWords = [ 'Mo**ti**qo', 'D**esi**gn', 'M**oti**on', 'Cr**eati**ve', ] as const; export function kineticWords(words: readonly string[]) { const valid = words .filter((w) => typeof w === 'string' && w.trim()) .slice(0, 12) .map((w) => w.trim().slice(0, 64)); return valid.length ? valid : [...inkshiftWords]; } export function kineticLetters(word: string) { const match = /^(.*?)\*\*(.*?)\*\*(.*)$/.exec(word); if (match) return match .slice(1) .flatMap((part, i) => Array.from(part).map((char) => ({ char, weight: i === 1 ? 800 : 100 })), ); const chars = Array.from(word.replaceAll('**', '')), start = Math.floor(chars.length * 0.28), end = Math.ceil(chars.length * 0.72); return chars.map((char, i) => ({ char, weight: i >= start && i < end ? 800 : 100 })); } export type KineticState = { position: number; velocity: number; index: number; lastInput: number; lastCycle: number; }; export function kineticAdvance( state: KineticState, dt: number, time: number, count: number, auto: boolean, ) { state.position += state.velocity * dt; state.velocity *= Math.exp(-dt * 6); if (auto && time - state.lastInput > 2.5 && time - state.lastCycle > 4.2) { state.position = Math.round(state.position) + 1; state.velocity = 0; state.lastCycle = time; } const index = ((Math.round(state.position) % count) + count) % count, changed = index !== state.index; if (changed) { state.index = index; state.lastCycle = time; } return changed; } export const kineticEase = (t: number) => 1 - (1 - Math.max(0, Math.min(1, t))) ** 4; 1b: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, ]; } b:["$","$L16",null,{"initialView":"preview","originalSource":{"inkshift":[{"name":"inkshift.tsx","code":"$17"},{"name":"inkshift-engine.ts","code":"$18"},{"name":"inkshift-shaders.ts","code":"$19"},{"name":"inkshift-math.ts","code":"$1a"},{"name":"native-gl.ts","code":"$1b"}]},"initialElement":"inkshift","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]