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:T10c3,"use client"; /* eslint-disable @next/next/no-img-element -- Installable React image gallery. */ import * as React from "react"; import { cn } from "@/lib/utils"; import { galleryIndex, galleryOffset, spiralPlacement } from "@/lib/cojeev/reference-gallery-geometry"; import { useMotionVisibility } from "@/lib/cojeev-motion/use-motion-visibility"; import { useGalleryRef } from "@/lib/cojeev/reference-gallery-motion"; export type InfiniteSpiralItem={id:string;src:string;alt:string;title?:string;href?:string}; export type InfiniteSpiralProps=React.ComponentProps<"div"> & {items:readonly InfiniteSpiralItem[];paused?:boolean;speed?:number;direction?:"up"|"down"}; export function InfiniteSpiral({items,paused=false,speed=.35,direction="up",className,ref,...props}:InfiniteSpiralProps){ const host=React.useRef(null),stage=React.useRef(null),position=React.useRef(0); const [selected,setSelected]=React.useState(0),[localPaused,setLocalPaused]=React.useState(false),[engaged,setEngaged]=React.useState(false); const {enabled,inView}=useMotionVisibility(host); const running=enabled&&inView&&!paused&&!localPaused&&!engaged&&items.length>1; const rate=Number.isFinite(speed)?Math.min(2,Math.max(.1,speed)):.35; const active=galleryIndex(selected,items.length); const itemKey=JSON.stringify(items.map(item=>item.id)); React.useEffect(()=>{ const root=stage.current;if(!root)return; const cards=Array.from(root.querySelectorAll("[data-spiral-card]")); const paint=()=>cards.forEach((card,index)=>{const p=spiralPlacement(galleryOffset(index,position.current,items.length),items.length,root.clientWidth);card.style.transform=`translate(-50%,-50%) translate(${p.x}px,${p.y}px) scale(${p.scale})`;card.style.opacity=String(p.opacity);card.style.zIndex=String(Math.round((p.depth+1)*100));}); const resize=new ResizeObserver(paint);resize.observe(root);paint();let frame=0,last=performance.now(); const tick=(now:number)=>{position.current+=(now-last>100?0:now-last)*.001*rate*(direction==="up"?1:-1);last=now;paint();setSelected(galleryIndex(position.current,items.length));frame=requestAnimationFrame(tick);}; if(running)frame=requestAnimationFrame(tick); return ()=>{cancelAnimationFrame(frame);resize.disconnect();}; },[running,rate,direction,items.length,selected,itemKey]); const choose=(index:number)=>{const next=galleryIndex(index,items.length);if(next<0)return;setLocalPaused(true);position.current=next;setSelected(next);}; return

{setEngaged(true);props.onMouseEnter?.(event);}} onMouseLeave={event=>{setEngaged(false);props.onMouseLeave?.(event);}} onFocusCapture={event=>{setEngaged(true);props.onFocusCapture?.(event);}} onBlurCapture={event=>{if(!event.currentTarget.contains(event.relatedTarget))setEngaged(false);props.onBlurCapture?.(event);}}>

{items[active]?.title??"Shape study"}{items[active]?.alt??"No image selected"}{items[active]?.href&&Explore this study ↗}

{items.map((item,index)=>)}

; } 52:T680,@layer cojeev-states { .v-infinite-spiral{width:100%;min-width:0;border-radius:24px;background:var(--v-beige);overflow:hidden;color:var(--v-ink)}.v-infinite-spiral__stage{height:370px;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,var(--v-paper),transparent 65%);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}.v-infinite-spiral__card{position:absolute;left:50%;top:50%;width:125px;height:155px;object-fit:cover;border-radius:14px;border:1px solid var(--v-edge);box-shadow:0 12px 24px #1111;will-change:transform}.v-infinite-spiral__caption{padding:12px 24px;display:grid;gap:5px;text-align:center;min-height:70px}.v-infinite-spiral__caption strong{font:23px var(--font-display)}.v-infinite-spiral__caption span{font-size:13px;color:var(--v-text-2)}.v-infinite-spiral__caption a{color:inherit;text-underline-offset:4px}.v-infinite-spiral__controls,.v-infinite-spiral__choices{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:12px 20px}.v-infinite-spiral__choices{padding-top:0}.v-infinite-spiral button{border:1px solid var(--v-edge);border-radius:24px;min-width:44px;min-height:44px;padding:8px 14px;background:var(--v-paper);color:var(--v-ink);font:inherit;font-size:13px;cursor:pointer}.v-infinite-spiral button[aria-pressed=true]{background:var(--v-pink);color:var(--v-on-accent)}.v-infinite-spiral button:disabled{opacity:.5;cursor:default}.v-infinite-spiral button:focus-visible,.v-infinite-spiral a:focus-visible{outline:2px solid var(--v-brand);outline-offset:3px}@media(max-width:480px){.v-infinite-spiral__stage{height:330px}.v-infinite-spiral__card{width:100px;height:130px}} } 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/infinite-spiral.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/infinite-spiral.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/infinite-spiral.css","content":"$52","type":"registry:file","target":"styles/cojeev/infinite-spiral.css"}],"className":"h-[70svh] min-h-80"}]]}]