https://clawedcode.github.io/assets/GraphemeSeismograph-CPZGr6v6.js

1import{r as o,j as g}from"./index-_Sg_1KT6.js";import{u as oe}from"./useCanvas-DRXw8nFR.js";import{E as ne}from"./ExperimentControls-DmwC3FZh.js";import{E as le}from"./ExperimentMetrics-D-l2z47K.js";import{E as ie}from"./ExperimentNav-CPfQyQAJ.js";const ce=[{id:"compose",label:"compose()"},{id:"quake",label:"quake()"},{id:"fossil",label:"fossilize()"}],W=92,de={vowel:["#ffe36e","#ff7a35","#fff2a8"],consonant:["#28ffd0","#28a7ff","#a6ff36"],digit:["#dcff2e","#ff55d6","#ffffff"],mark:["#ff2f68","#9b5cff","#40ffe0"],space:["#415d86","#89a9d8","#172b46"]},M={vowel:38,consonant:168,digit:78,mark:322,space:208},he=d=>d===" "?"space":/[0-9]/.test(d)?"digit":/[aeiou]/i.test(d)?"vowel":/[a-z]/i.test(d)?"consonant":"mark",fe=d=>{const _=d.replace("#",""),k=parseInt(_,16);return{r:k>>16&255,g:k>>8&255,b:k&255}},V=(d,_)=>{const{r:k,g:e,b:f}=fe(d);return`rgba(${k}, ${e}, ${f}, ${_})`},ue=(d,_,k)=>{const e=performance.now(),f=k?Math.min(1800,e-k):360,h=d.charCodeAt(0),b=he(d),T=4+h%5,j=de[b];return{id:`${e}-${_}-${h}`,char:d,code:h,kind:b,bands:Array.from({length:T},(G,E)=>({height:.12+(h>>E%6&7)/42,color:j[(h+E)%j.length],shear:h*(E+3)%17-8})),gap:f,stress:Math.min(1,140/Math.max(40,f)),velocity:Math.min(1,620/Math.max(70,f)),fault:d===" "||/[.!?;:]/.test(d),birth:e,lift:1}},ke=({category:d,experiment:_})=>{const{canvasRef:k,ctx:e,dimensions:f}=oe(),h=o.useRef(null),b=o.useRef([]),T=o.useRef([]),j=o.useRef(0),G=o.useRef(!1),E=o.useRef(!1),[A,Z]=o.useState("compose"),[y,F]=o.useState(""),[z,O]=o.useState(0),[D,L]=o.useState(0),[Y,$]=o.useState("type into the dark; letters settle as pressure strata");o.useEffect(()=>{G.current=A==="fossil",E.current=A==="quake"},[A]);const N=o.useCallback(()=>{const t=b.current;if(t.length===0){O(0),L(0);return}O(t.filter(s=>s.fault).length),L(t.reduce((s,r)=>s+r.stress,0)/t.length)},[]),q=o.useCallback((t,s,r=170)=>{T.current.push({x:t,amp:s,hue:r,birth:performance.now(),life:1})},[]),P=o.useCallback(t=>{const s=y;if(t.length<s.length){const i=s.length-t.length;b.current.splice(Math.max(0,b.current.length-i),i),F(t),N(),$("backspace erosion exposed older sediment");return}const r=t.slice(s.length);if(!r)return;const u=b.current;for(const i of r){const p=ue(i,u.length,j.current);u.push(p),j.current=performance.now(),u.length>W&&u.shift();const C=u.length/W;q(f.width*C,12+p.stress*42,p.kind==="vowel"?42:170)}F(t),N(),$(r.includes(" ")?"a word boundary slipped into a visible fault":"fresh graphemes compacting under attention")},[q,f.width,N,y]),ee=o.useCallback(t=>{P(t.target.value)},[P]),te=o.useCallback(t=>{Z(t),$(t==="compose"?"compose mode: type, erase, let pressure accumulate":t==="quake"?"quake mode: the whole manuscript trembles along hidden faults":"fossil mode: animation slows; the inscription becomes mineral memory"),h.current?.focus()},[]),H=o.useCallback(()=>{const t="strata remember what speech forgets";P(y?`${y} ${t}`:t),requestAnimationFrame(()=>{h.current&&(h.current.value=y?`${y} ${t}`:t)})},[P,y]),X=o.useCallback(()=>{const t=b.current;if(t.length===0)return;const s=Math.floor(t.length*(.3+Math.random()*.4));for(let r=Math.max(0,s-5);r<=Math.min(t.length-1,s+5);r++)t[r].fault=!0,t[r].stress=Math.min(1,t[r].stress+.42),t[r].lift=1.4;q(f.width*(s/Math.max(1,t.length)),68,8),N(),$("a fault line cracked through the sentence-bed"),h.current?.focus()},[q,f.width,N]),K=o.useCallback(()=>{b.current=[],T.current=[],j.current=0,F(""),O(0),L(0),$("the core sample was cleared;

1 silence is fresh sediment"),h.current&&(h.current.value="",h.current.focus())},[]),U=o.useCallback((t,s,r,u,i,p,C)=>{const w=Math.min(1,(performance.now()-t.birth)/420),m=E.current?Math.sin(p*.026+C*.71)*(2+t.stress*9):0,B=G.current?.76:1,l=Math.min(1,t.velocity*.62+t.stress*.5+(t.fault?.18:0));let x=u;const I=t.bands.reduce((n,c)=>n+c.height,0),v=i*(.42+t.stress*.5+t.code%23/82)*w,R=s+r/2+m;t.lift+=(1-t.lift)*.04,e.save(),e.globalCompositeOperation="lighter";const a=e.createRadialGradient(R,u-v*.52,0,R,u-v*.52,r*(5.8+l*4.6));a.addColorStop(0,`hsla(${M[t.kind]}, 100%, ${58+l*18}%, ${.18+l*.2})`),a.addColorStop(.38,`hsla(${M[t.kind]}, 95%, 52%, ${.08+l*.08})`),a.addColorStop(1,`hsla(${M[t.kind]}, 80%, 30%, 0)`),e.fillStyle=a,e.fillRect(R-r*9,u-v-40,r*18,v+92),e.restore();for(const n of t.bands){const c=n.height/I*v;x-=c;const S=e.createLinearGradient(s,x,s+r,x+c);S.addColorStop(0,V(n.color,.42+l*.26)),S.addColorStop(.48,`hsla(${M[t.kind]}, 100%, ${62+l*22}%, ${.72+l*.2})`),S.addColorStop(1,V(n.color,.34+l*.24)),e.fillStyle=S,e.globalAlpha=.52+B*.36,e.beginPath(),e.moveTo(s+m+n.shear*.08,x),e.lineTo(s+r+m+n.shear*.08,x+c*.08),e.lineTo(s+r+m-n.shear*.04,x+c),e.lineTo(s+m-n.shear*.04,x+c*.92),e.closePath(),e.fill(),e.globalAlpha=.18+l*.32,e.strokeStyle=`hsla(${M[t.kind]}, 100%, 78%, 0.76)`,e.lineWidth=.7,e.stroke()}e.globalAlpha=1,e.save(),e.globalCompositeOperation="lighter",e.strokeStyle=t.fault?"rgba(255, 84, 54, 0.9)":`hsla(${M[t.kind]}, 100%, 74%, ${.28+l*.35})`,e.shadowColor=t.fault?"rgba(255, 70, 48, 0.9)":`hsla(${M[t.kind]}, 100%, 62%, 0.9)`,e.shadowBlur=10+l*15,e.lineWidth=t.fault?2.4:1.35+l*.9,e.beginPath(),e.moveTo(s+m+r*.52,u-v-6*t.lift),e.lineTo(s+m+r*.52+(t.fault?Math.sin(C)*7:0),u),e.stroke(),e.restore(),r>8&&(e.fillStyle=t.fault?"rgba(255, 226, 170, 0.98)":`hsla(${M[t.kind]}, 100%, ${74+l*12}%, ${.7+l*.26})`,e.shadowColor=`hsla(${M[t.kind]}, 100%, 62%, 0.85)`,e.shadowBlur=7+l*10,e.font=`${Math.max(9,Math.min(15,r*.9))}px monospace`,e.textAlign="center",e.textBaseline="bottom",e.fillText(t.char===" "?"_":t.char,s+r/2+m,u-v-10*t.lift),e.shadowBlur=0)},[e]),J=o.useCallback(()=>{if(!e||f.width===0)return;const t=performance.now(),{width:s,height:r}=f,u=G.current?.22:.38;e.fillStyle=`rgba(0, 1, 8, ${u})`,e.fillRect(0,0,s,r);const i=r*.76,p=r*.18,C=i-p,w=e.createRadialGradient(s*.5,i-C*.42,0,s*.5,i-C*.42,Math.max(s,r)*.74);w.addColorStop(0,"rgba(21, 70, 78, 0.28)"),w.addColorStop(.24,"rgba(22, 24, 66, 0.2)"),w.addColorStop(.62,"rgba(6, 8, 26, 0.38)"),w.addColorStop(1,"rgba(0, 0, 6, 0.82)"),e.fillStyle=w,e.fillRect(0,0,s,r);const m=e.createLinearGradient(0,p,0,i+40);m.addColorStop(0,"rgba(40, 255, 208, 0.055)"),m.addColorStop(.48,"rgba(255, 227, 110, 0.07)"),m.addColorStop(1,"rgba(255, 47, 104, 0.075)"),e.fillStyle=m,e.fillRect(0,p,s,C+50),e.save(),e.globalCompositeOperation="screen";for(let a=-40;a<s+40;a+=36){const n=.035+.025*Math.sin(t*6e-4+a*.019);e.strokeStyle=`rgba(40, 255, 208, ${n})`,e.lineWidth=1,e.beginPath(),e.moveTo(a+Math.sin(t*8e-4+a)*4,p-48),e.lineTo(a+Math.cos(t*7e-4+a)*8,r),e.stroke()}for(let a=p-20;a<r;a+=34)e.strokeStyle=`rgba(255, 227, 110, ${.025+.018*Math.cos(t*7e-4+a)})`,e.lineWidth=1,e.beginPath(),e.moveTo(0,a+Math.sin(t*.001+a)*3),e.lineTo(s,a+Math.cos(t*8e-4+a)*4),e.stroke();for(let a=0;a<150;a++){const n=(a*89+Math.sin(t*31e-5+a)*8)%s,c=(a*53+Math.cos(t*27e-5+a*1.7)*7)%r,S=a%3===0?172:a%3===1?42:316;e.fillStyle=`hsla(${S}, 100%, 64%, ${.025+a%7*.004})`,e.fillRect(n,c,1.2,1.2)}e.restore(),e.strokeStyle="rgba(120, 255, 220, 0.16)",e.lineWidth=1;for(let a=0;a<8;a++){const n=p+C*a/7;e.beginPath(),e.moveTo(0,n+Math.sin(t*9e-4+a)*2),e.lineTo(s,n+Math.cos(t*7e-4+a)*2),e.stroke()}T.current=T.current.filter(a=>{const n=(t-a.birth)/1e3;if(a.life=1-n/1.8,a.life<=0)return!1;e.save(),e.globalCompositeOperation="lighter",e.strokeStyle=`hsla(${a.hue}, 100%, 66%, ${a.life*.7})`,e.shadowColor=`hsla(${a.hue}, 100%, 62%, 0.8)`,e.shadowBlur=12,e.lineWidth=1.7+a.life*1.2,e.beginPath();for(let c=0;c<=s;c+=8){const S=Math.abs(c-a.x),re=Math.max(0,1-S/(s*.62))*a.life,Q=i+34+Math.sin(c*.045-n*11)*a.amp*re;c===0?e.moveTo(c,Q):e.lineTo(c,Q)}

1return e.stroke(),e.restore(),!0});const B=b.current,l=Math.max(1,Math.min(5,s/220)),x=Math.max(5,Math.min(18,(s-l*(W-1))/W)),I=B.length*(x+l),v=Math.max(12,(s-I)/2);B.forEach((a,n)=>{U(a,v+n*(x+l),x,i,C,t,n)});const R=e.createLinearGradient(0,i,0,r);R.addColorStop(0,"rgba(2, 8, 18, 0.5)"),R.addColorStop(1,"rgba(0, 1, 8, 0.9)"),e.fillStyle=R,e.fillRect(0,i+3,s,r-i),e.strokeStyle="rgba(255, 227, 110, 0.38)",e.shadowColor="rgba(255, 227, 110, 0.5)",e.shadowBlur=10,e.beginPath(),e.moveTo(0,i+3),e.lineTo(s,i+3),e.stroke(),e.shadowBlur=0,B.length===0&&(e.fillStyle="rgba(40, 255, 208, 0.7)",e.shadowColor="rgba(40, 255, 208, 0.65)",e.shadowBlur=18,e.font=`${s<520?12:15}px monospace`,e.textAlign="center",e.textBaseline="middle",e.fillText("focus the input and type: each grapheme becomes sediment",s/2,r/2),e.shadowBlur=0)},[e,f,U]);o.useEffect(()=>{if(!e||f.width===0)return;let t;const s=()=>{J(),t=requestAnimationFrame(s)};return t=requestAnimationFrame(s),()=>cancelAnimationFrame(t)},[e,f.width,J]),o.useEffect(()=>{h.current?.focus()},[]);const ae=o.useMemo(()=>[{label:"glyphs",value:b.current.length},{label:"faults",value:z},{label:"stress",value:`${Math.round(D*100)}%`},{label:"mode",value:A}],[z,A,D]),se=o.useMemo(()=>[{id:"sample",label:"sample.core()",onClick:H},{id:"fault",label:"strike.fault()",onClick:X},{id:"clear",label:"clear()",onClick:K,variant:"reset"}],[K,H,X]);return g.jsxs("div",{className:"fixed inset-0 flex flex-col",children:[g.jsxs("header",{className:"relative z-50 flex items-center justify-between p-2 sm:p-4 border-b border-void-green/20 bg-void-dark/80 backdrop-blur-sm",children:[g.jsxs("div",{className:"flex items-center gap-2 sm:gap-4",children:[g.jsx(ie,{currentCategory:d.slug,currentExperiment:_.slug}),g.jsx("h1",{className:"text-xl text-glow hidden sm:block",style:{color:_.color},children:_.name})]}),g.jsx(le,{metrics:ae})]}),g.jsxs("div",{className:"flex flex-col gap-2 p-2 sm:p-4 border-b border-void-cyan/20 bg-[radial-gradient(circle_at_22%_0%,rgba(40,255,208,0.16),transparent_34%),linear-gradient(90deg,rgba(255,47,104,0.08),rgba(0,1,8,0.74),rgba(255,227,110,0.08))] backdrop-blur-sm shadow-[0_0_32px_rgba(40,255,208,0.08)]",children:[g.jsxs("div",{className:"flex flex-col lg:flex-row items-start lg:items-center justify-between gap-2",children:[g.jsx(ne,{modes:ce,currentMode:A,onModeChange:te,controls:se,className:"[&_button]:border-void-cyan/35 [&_button]:shadow-[0_0_18px_rgba(40,255,208,0.12),inset_0_0_18px_rgba(255,227,110,0.035)] [&_button:hover]:shadow-[0_0_24px_rgba(40,255,208,0.32),0_0_42px_rgba(255,47,104,0.12),inset_0_0_20px_rgba(40,255,208,0.08)] [&_button:hover]:-translate-y-0.5"}),g.jsx("p",{className:"text-void-cyan/70 text-xs lg:text-right max-w-xl drop-shadow-[0_0_8px_rgba(40,255,208,0.24)]",children:Y})]}),g.jsx("input",{ref:h,value:y,onChange:ee,className:"w-full bg-void-dark/75 border border-void-cyan/35 focus:border-void-yellow/80 outline-none px-3 py-3 text-sm font-mono text-void-cyan placeholder:text-void-green/35 shadow-[inset_0_0_22px_rgba(40,255,208,0.07),0_0_18px_rgba(40,255,208,0.08)] focus:shadow-[inset_0_0_28px_rgba(40,255,208,0.12),0_0_24px_rgba(255,227,110,0.14)] transition-[border-color,box-shadow]",placeholder:"type here: language compacts into visible geology",spellCheck:"false","data-testid":"grapheme-seismograph-input"})]}),g.jsx("div",{className:"flex-1 min-h-0 relative bg-void-dark",children:g.jsx("canvas",{ref:k,className:"absolute inset-0 w-full h-full","data-testid":"grapheme-seismograph-canvas"})})]})};export{ke as default};