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:Tf2b,"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,useReferenceClock,type ReferenceTextSize } from "@/lib/cojeev/reference-text-motion"; export type TypographyVortexProps=Omit,"children">&{text:string;rings?:number;speed?:number;paused?:boolean;size?:ReferenceTextSize;/** Change to pull rings inward, then release. */pulse?:number}; /** Nested counter-rotating glyph rings, a local dissolution lens, and a finite suction pulse. */ export function TypographyVortex({text,rings=7,speed=1,paused=false,size="default",pulse=0,className,ref,onPointerMove,onPointerLeave,...props}:TypographyVortexProps){ const {host:hostRef,running}=useReferenceText(paused),lens=React.useRef(null),dust=React.useRef(null),field=React.useRef(null); const id=`vortex-${React.useId().replace(/:/g,"")}`,count=Math.floor(bounded(rings,3,10,7)),pace=bounded(speed,0,3,1),pulseStart=React.useRef(-10000),clock=React.useRef(0); React.useEffect(()=>{if(pulse>0)pulseStart.current=clock.current;},[pulse]); useReferenceClock(running&&pace>0,time=>{ clock.current=time; hostRef.current?.querySelectorAll("[data-vortex-ring]").forEach((ring,i)=>{ring.setAttribute("transform",`rotate(${time*.003*pace*(i%2?-1:1)*(1+i*.12)} 320 220)`);}); const p=bounded((time-pulseStart.current)/1400,0,1,1),scale=1-Math.sin(p*Math.PI)*.7; field.current?.setAttribute("transform",`translate(320 220) scale(${scale}) translate(-320 -220)`); hostRef.current?.setAttribute("data-state",p<1?"suction":"ambient"); }); React.useEffect(()=>{if(!running){lens.current?.setAttribute("r","0");dust.current?.setAttribute("opacity","0");field.current?.removeAttribute("transform");}},[running]); return

0} className={cn("v-typography-vortex",className)} onPointerMove={event=>{onPointerMove?.(event);if(!running||event.defaultPrevented||event.pointerType==="touch")return;const svg=hostRef.current?.querySelector("svg");if(!svg)return;const matrix=svg.getScreenCTM();if(!matrix)return;const point=svg.createSVGPoint();point.x=event.clientX;point.y=event.clientY;const {x,y}=point.matrixTransform(matrix.inverse());lens.current?.setAttribute("cx",String(x));lens.current?.setAttribute("cy",String(y));lens.current?.setAttribute("r","48");dust.current?.setAttribute("transform",`translate(${x} ${y})`);dust.current?.setAttribute("opacity","1");}} onPointerLeave={event=>{onPointerLeave?.(event);lens.current?.setAttribute("r","0");dust.current?.setAttribute("opacity","0");}}> {text}

; } 52:T4b8,@layer cojeev-states { .v-typography-vortex { 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-typography-vortex[data-size="sm"] { min-block-size:200px; font-size:clamp(1.5rem,4vw,2.5rem); padding:16px; } .v-typography-vortex[data-size="lg"] { min-block-size:340px; font-size:clamp(2.25rem,6vw,4.5rem); } .v-typography-vortex__accessible { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } .v-typography-vortex {min-block-size:340px;background:var(--v-paper);} .v-typography-vortex__field {position:absolute;inset:0;width:100%;height:100%;fill:currentColor;} .v-typography-vortex__dust {fill:var(--v-accent-ink);} .v-typography-vortex__label {z-index:1;max-inline-size:85%;text-align:center;overflow-wrap:anywhere;font-size:.7em;background:var(--v-paper);padding:.3em .5em;border-radius:.4em;} } 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/typography-vortex.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/typography-vortex.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/typography-vortex.css","content":"$52","type":"registry:file","target":"styles/cojeev/typography-vortex.css"}],"className":"h-[70svh] min-h-80"}]]}]