4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4f:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:T1298,"use client"; import * as React from "react"; import { useReferenceRef } from "@/lib/cojeev/reference-ref"; import { cn } from "@/lib/utils"; import { bounded } from "@/lib/cojeev/reference-text-math"; import { useReferenceText,type ReferenceTextSize } from "@/lib/cojeev/reference-text-motion"; export type ParticleTextProps=Omit,"children">&{text:string;density?:number;particleSize?:number;repelRadius?:number;paused?:boolean;replayKey?:number|string;size?:ReferenceTextSize}; /** Samples the actual font's alpha mask, then gathers those samples into text. */ export function ParticleText({text,density=5,particleSize=1.5,repelRadius=70,paused=false,replayKey=0,size="default",className,ref,onPointerMove,onPointerLeave,...props}:ParticleTextProps){ const {host:hostRef,running}=useReferenceText(paused),canvas=React.useRef(null),pointer=React.useRef<{x:number;y:number}|null>(null); React.useEffect(()=>{ const el=hostRef.current,surface=canvas.current;if(!el||!surface||!running)return; const ctx=surface.getContext("2d");if(!ctx)return; let disposed=false,frame=0,start=0,w=1,h=1,ink="",particles:{x:number;y:number;tx:number;ty:number;seed:number}[]=[]; const build=()=>{ if(disposed)return;const r=el.getBoundingClientRect();w=Math.round(Math.min(900,Math.max(1,r.width)));h=Math.round(Math.min(420,Math.max(1,r.height)));surface.width=w;surface.height=h; const style=getComputedStyle(el);ink=style.color; const sample=document.createElement("canvas");sample.width=w;sample.height=h;const mask=sample.getContext("2d",{willReadFrequently:true});if(!mask)return; let font=bounded(parseFloat(style.fontSize)*1.3,20,100,64);mask.font=`650 ${font}px ${style.fontFamily}`; const words=text.trim().split(/\s+/),lines:string[]=[];let line=""; for(const word of words){const next=line?line+" "+word:word;if(line&&mask.measureText(next).width>w*.85){lines.push(line);line=word;}else line=next;}if(line)lines.push(line); const maxWidth=Math.max(1,...lines.map(x=>mask.measureText(x).width));font*=Math.min(1,w*.85/maxWidth,h*.7/Math.max(font,lines.length*font*1.2)); mask.font=`650 ${font}px ${style.fontFamily}`;mask.fillStyle="#000";mask.textAlign="center";mask.textBaseline="middle"; lines.forEach((l,i)=>mask.fillText(l,w/2,h/2+(i-(lines.length-1)/2)*font*1.2)); const alpha=mask.getImageData(0,0,w,h).data,step=Math.max(bounded(density,3,10,5),Math.sqrt(w*h/4000));particles=[]; for(let y=0;y100){const seed=((x*13+y*7)%101)/101;particles.push({tx:x,ty:y,x:w/2+Math.cos(seed*16)*w*.6,y:h/2+Math.sin(seed*19)*h*.7,seed});}} el.dataset.ready=String(particles.length>0);start=0; }; const draw=(now:number)=>{ if(disposed)return;if(!start)start=now;ctx.clearRect(0,0,w,h);ctx.fillStyle=ink; const p=bounded((now-start)/1800,0,1,1),gather=1-Math.pow(1-p,3),radius=bounded(repelRadius,10,200,70); for(const dot of particles){let x=dot.tx+(dot.x-dot.tx)*(1-gather),y=dot.ty+(dot.y-dot.ty)*(1-gather); if(pointer.current){const dx=x-pointer.current.x,dy=y-pointer.current.y,d=Math.hypot(dx,dy);if(d0){const force=(1-d/radius)**2*34;x+=dx/d*force;y+=dy/d*force;}} ctx.beginPath();ctx.arc(x,y,bounded(particleSize,.7,4,1.5),0,Math.PI*2);ctx.fill(); }frame=requestAnimationFrame(draw); }; const observer=new ResizeObserver(build);observer.observe(el);const appearance=new MutationObserver(build);for(let parent:HTMLElement|null=el;parent;parent=parent.parentElement)appearance.observe(parent,{attributes:true,attributeFilter:["data-mode","class"]});window.addEventListener("cojeev:appearancechange",build);build();void document.fonts.ready.then(()=>{if(!disposed)build();});frame=requestAnimationFrame(draw); return()=>{disposed=true;cancelAnimationFrame(frame);observer.disconnect();appearance.disconnect();window.removeEventListener("cojeev:appearancechange",build);el.dataset.ready="false";pointer.current=null;}; },[hostRef,running,text,density,particleSize,repelRadius,replayKey]); return

{onPointerMove?.(event);if(!running||event.defaultPrevented||event.pointerType==="touch")return;const r=event.currentTarget.getBoundingClientRect();pointer.current={x:(event.clientX-r.left)*Math.min(900,r.width)/r.width,y:(event.clientY-r.top)*Math.min(420,r.height)/r.height};}} onPointerLeave={event=>{onPointerLeave?.(event);pointer.current=null;}}> {text}

; } 52:T52d,@layer cojeev-states { .v-particle-text { display:grid; position:relative; place-items:center; min-inline-size:0; inline-size:100%; min-block-size:260px; padding:24px; overflow:hidden; border-radius:var(--radius-panel,24px); color:var(--v-text); background:var(--v-beige); font-family:var(--font-display,"Bricolage Grotesque",sans-serif); font-size:clamp(2rem,5vw,3.5rem); line-height:1.15; isolation:isolate; } .v-particle-text[data-size="sm"] { min-block-size:200px; font-size:clamp(1.5rem,4vw,2.5rem); padding:16px; } .v-particle-text[data-size="lg"] { min-block-size:340px; font-size:clamp(2.25rem,6vw,4.5rem); } .v-particle-text__accessible { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } .v-particle-text__words {max-inline-size:100%;text-align:center;overflow-wrap:anywhere;font-weight:650;} .v-particle-text canvas {position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;} .v-particle-text[data-running="true"][data-ready="true"] canvas {opacity:1;} .v-particle-text[data-running="true"][data-ready="true"] .v-particle-text__words {opacity:0;} @media(prefers-reduced-motion:reduce){.v-particle-text[data-running] canvas{opacity:0;}.v-particle-text[data-running] .v-particle-text__words{opacity:1;}} } 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json"]}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/particle-text.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/particle-text.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/particle-text.css","content":"$52","type":"registry:file","target":"styles/cojeev/particle-text.css"}],"className":"h-[70svh] min-h-80"}]]}]