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:Td7f,"use client"; import * as React from "react"; import { useReferenceRef } from "@/lib/cojeev/reference-ref"; import { cn } from "@/lib/utils"; import { bounded,fallStep,type FallingBody } from "@/lib/cojeev/reference-text-math"; import { useReferenceText,type ReferenceTextSize } from "@/lib/cojeev/reference-text-motion"; export type FallingTextProps=Omit,"children">&{text:string;gravity?:number;paused?:boolean;replayKey?:string|number;size?:ReferenceTextSize}; /** Measured word rectangles fall, collide and settle inside their own stage. */ export function FallingText({text,gravity=900,paused=false,replayKey=0,size="default",className,ref,...props}:FallingTextProps){ const {host:hostRef,running}=useReferenceText(paused); const words=text.trim().split(/\s+/).filter(Boolean),animate=running&&words.length<=80; React.useEffect(()=>{ const el=hostRef.current;if(!el||!animate)return;const letters=Array.from(el.querySelectorAll("[data-falling-word]")); let frame=0,last=0,elapsed=0,bodies:FallingBody[]=[],width=0,height=0; const measure=()=>{ letters.forEach(word=>{word.style.transform="";word.style.position="";word.style.left="";word.style.top="";word.style.width="";}); const box=el.getBoundingClientRect();width=box.width-16;height=box.height-16; bodies=letters.map((word,i)=>{const r=word.getBoundingClientRect();return{x:r.x-box.x-8,y:r.y-box.y-8,w:r.width,h:r.height,vx:Math.sin(i*3.2)*65,vy:0,angle:0};}); letters.forEach((word,i)=>{word.style.position="absolute";word.style.left="8px";word.style.top="8px";word.style.width=`${bodies[i].w}px`;});elapsed=0;last=0; }; const tick=(now:number)=>{ const dt=last?Math.min(32,now-last):0;last=now;elapsed+=dt; bodies=bodies.map(body=>fallStep(body,width,height,dt,bounded(gravity,100,2400,900))); for(let i=0;i0&&oy>0){if(oy{const b=bodies[i];word.style.transform=`translate(${b.x}px,${b.y}px)`;}); el.dataset.state=elapsed<4200?"falling":"settled"; if(elapsed<4200)frame=requestAnimationFrame(tick); }; measure();frame=requestAnimationFrame(tick); const resize=new ResizeObserver(()=>{cancelAnimationFrame(frame);measure();frame=requestAnimationFrame(tick);});resize.observe(el); return()=>{cancelAnimationFrame(frame);resize.disconnect();letters.forEach(word=>{word.removeAttribute("style");});el.dataset.state="still";}; },[hostRef,animate,text,gravity,replayKey]); return

{text}

; } 52:T4e0,@layer cojeev-states { .v-falling-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-falling-text[data-size="sm"] { min-block-size:200px; font-size:clamp(1.5rem,4vw,2.5rem); padding:16px; } .v-falling-text[data-size="lg"] { min-block-size:340px; font-size:clamp(2.25rem,6vw,4.5rem); } .v-falling-text__accessible { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } .v-falling-text {align-items:start;min-block-size:320px;font-size:clamp(1.25rem,3vw,2rem);} .v-falling-text__sentence {max-inline-size:100%;text-align:center;line-height:1.7;} .v-falling-text [data-falling-word] {display:inline-block;max-inline-size:100%;overflow-wrap:anywhere;padding:.08em .28em;border-radius:.25em;background:var(--v-blue);color:var(--v-on-accent);line-height:1.3;} .v-falling-text [data-falling-word]:nth-child(3n) {background:var(--v-pink);} } 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/falling-text.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/falling-text.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/falling-text.css","content":"$52","type":"registry:file","target":"styles/cojeev/falling-text.css"}],"className":"h-[70svh] min-h-80"}]]}]