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:Tad2,"use client"; import * as React from "react"; import { useReferenceRef } from "@/lib/cojeev/reference-ref"; import { cn } from "@/lib/utils"; import { bounded, graphemes, proximityWeight } from "@/lib/cojeev/reference-text-math"; import { useReferenceText, type ReferenceTextSize } from "@/lib/cojeev/reference-text-motion"; export type VariableProximityProps = Omit,"children"> & { text: string; variant?: "weight" | "pressure"; size?: ReferenceTextSize; paused?: boolean; radius?: number; fromWeight?: number; toWeight?: number; }; /** Local pointer distance changes the shipped Bricolage variable font's real wght/wdth axes. */ export function VariableProximity({text,variant="weight",size="default",paused=false,radius=150,fromWeight=350,toWeight=800,className,ref,onPointerMove,onPointerLeave,...props}:VariableProximityProps) { const {host:hostRef,running}=useReferenceText(paused); const frame=React.useRef(0), point=React.useRef<{x:number;y:number}|null>(null); const from=bounded(fromWeight,200,800,350),to=bounded(toWeight,200,800,800); const paint=React.useCallback(() => { hostRef.current?.querySelectorAll("[data-proximity-letter]").forEach(letter=>{ const rect=letter.getBoundingClientRect(); const distance=point.current&&running?Math.hypot(point.current.x-rect.x-rect.width/2,point.current.y-rect.y-rect.height/2):Infinity; const weight=proximityWeight(distance,radius,from,to); const width=variant==="pressure"?proximityWeight(distance,radius,75,100):100; letter.style.fontVariationSettings=`"wght" ${weight}, "wdth" ${width}`; }); },[hostRef,running,radius,from,to,variant]); React.useEffect(()=>{paint();return()=>cancelAnimationFrame(frame.current);},[paint,text]); return

{onPointerMove?.(event);if(event.defaultPrevented||event.pointerType==="touch"||!running)return;point.current={x:event.clientX,y:event.clientY};cancelAnimationFrame(frame.current);frame.current=requestAnimationFrame(paint);}} onPointerLeave={event=>{onPointerLeave?.(event);point.current=null;paint();}}> {text}

; } 52:T503,@layer cojeev-states { .v-variable-proximity { 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-variable-proximity[data-size="sm"] { min-block-size:200px; font-size:clamp(1.5rem,4vw,2.5rem); padding:16px; } .v-variable-proximity[data-size="lg"] { min-block-size:340px; font-size:clamp(2.25rem,6vw,4.5rem); } .v-variable-proximity__accessible { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } .v-variable-proximity__line {max-inline-size:100%;overflow-wrap:anywhere;text-align:center;} .v-variable-proximity__word {display:inline-block;max-inline-size:100%;} .v-variable-proximity [data-proximity-letter] {font-synthesis:none;transition:font-variation-settings 120ms ease-out;} .v-variable-proximity[data-running="false"] [data-proximity-letter] {transition:none;} @media(prefers-reduced-motion:reduce){.v-variable-proximity [data-proximity-letter]{transition:none;}} } 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/variable-proximity.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/variable-proximity.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/variable-proximity.css","content":"$52","type":"registry:file","target":"styles/cojeev/variable-proximity.css"}],"className":"h-[70svh] min-h-80"}]]}]