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:T480f,"use client" import * as React from "react" import { cva } from "class-variance-authority" import { DOMAIN, FLOW_CHARACTERS, PRODUCT_CATEGORIES, getSettingsSnapshot, getServerSettingsSnapshot, subscribeSettings, setMotionMode, setMotionCategory, setFlowSettings, resetFlow, setMorphConfig, setMorphTier, resetMorph, exportMorphJSON, importMorphJSON, type MorphConfig, type Tier, type TierName, type FlowVariant } from "@/lib/cojeev-motion/settings" import { useMorph } from "@/lib/cojeev-motion/use-morph" import { useFlowPress } from "@/lib/cojeev-motion/flow-press" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Icon } from "@/components/ui/icon" import { CopyButton } from "@/components/ui/code-block" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs" import { BodySecondary, Meta } from "@/components/ui/typography" const adjusterVariants=cva([ "v-adjuster @container box-border w-full max-w-[680px] rounded-[var(--r-card)] border border-[var(--v-border)] bg-[var(--v-canvas)] font-[family-name:var(--font-text)] text-[13px] leading-[1.5] text-[var(--v-text)]", "[&_h2]:m-0 [&_h2]:font-[family-name:var(--font-display)] [&_h2]:text-[20px] [&_p]:mt-1 [&_p]:mb-3 [&_p]:text-[var(--v-text-2)]", "[&_fieldset]:mb-5 [&_fieldset]:min-w-0 [&_fieldset]:rounded-[var(--r-md)] [&_fieldset]:border [&_fieldset]:border-[var(--v-border)] [&_fieldset]:p-4 [&_legend]:px-[5px] [&_legend]:font-[650]", "[&_input]:accent-[var(--v-pink)] [&_textarea]:mt-2 [&_textarea]:resize-y [&_textarea]:font-mono", "[&_button]:cursor-pointer [&_button]:rounded-[var(--r-pill)] [&_button]:border [&_button]:border-[var(--v-border)] [&_button]:bg-[var(--v-beige)] [&_button]:px-3 [&_button]:py-2 [&_button]:text-[var(--v-ink)]", "[&_details]:mb-5 [&_summary]:cursor-pointer [&_summary]:py-[10px] [&_summary]:font-[650]", "[&_input:focus-visible]:outline-2 [&_input:focus-visible]:outline-offset-3 [&_input:focus-visible]:outline-[var(--v-pink)] [&_button:focus-visible]:outline-2 [&_button:focus-visible]:outline-offset-3 [&_button:focus-visible]:outline-[var(--v-pink)] [&_select:focus-visible]:outline-2 [&_select:focus-visible]:outline-offset-3 [&_select:focus-visible]:outline-[var(--v-pink)] [&_textarea:focus-visible]:outline-2 [&_textarea:focus-visible]:outline-offset-3 [&_textarea:focus-visible]:outline-[var(--v-pink)] [&_summary:focus-visible]:outline-2 [&_summary:focus-visible]:outline-offset-3 [&_summary:focus-visible]:outline-[var(--v-pink)]", ]) const fieldVariants=cva("box-border min-w-0 w-full rounded-[var(--r-sm)] border border-[var(--v-border)] bg-[var(--v-canvas)] px-[9px] py-[7px] text-[var(--v-text)]") export type AdjusterProps=React.ComponentProps<'section'> & {defaultOpen?:boolean} export type MotionControlsProps = React.ComponentProps<'section'> & { showPreview?: boolean } const CHARACTER_DESCRIPTIONS:Record,string> = { glide:'A smooth, direct slide for everyday interfaces.', stretch:'An elastic stretch that follows the selection.', jelly:'A soft, playful wobble as the selection lands.', comet:'A quick movement with a trailing accent.', drop:'An ink-like gather, movement and soft landing.', rubber:'A flexible pull between neighbouring choices.', pebble:'A rounded shape with a gentle rolling feel.', ripple:'A moving selection with a ripple on arrival.', halo:'A subtle glow around the selected item.', } function subscribeReducedMotion(listener:()=>void) { const media=window.matchMedia('(prefers-reduced-motion: reduce)') media.addEventListener('change',listener) return ()=>media.removeEventListener('change',listener) } function readReducedMotion() { return window.matchMedia('(prefers-reduced-motion: reduce)').matches } /** Compact shared selection controls. Changes persist in the site's motion settings. */ export function MotionControls({showPreview=true,className,...props}:MotionControlsProps) { const {motion,flow}=React.useSyncExternalStore(subscribeSettings,getSettingsSnapshot,getServerSettingsSnapshot) const reduced=React.useSyncExternalStore(subscribeReducedMotion,readReducedMotion,()=>false) const id=React.useId() const [preview,setPreview]=React.useState('overview') const enabled=motion.mode!=='off'&&flow.variant!=='off' const enable=(next:boolean)=>{setMotionMode(next?'subtle':'off');if(next&&flow.variant==='off')setFlowSettings({variant:'glide'})} const reset=()=>{setMotionMode('subtle');resetFlow()} return

Enable motionChanges apply across this site.

{reduced&&Your device prefers reduced motion. Selections stay still; your chosen settings are saved.}

Choose a character

{(Object.entries(FLOW_CHARACTERS) as [FlowVariant,typeof FLOW_CHARACTERS[FlowVariant]][]).filter(([value])=>value!=='off').map(([value,character])=>)}

{flow.variant==='off'?'Selection motion is paused. Choose a character to resume.':CHARACTER_DESCRIPTIONS[flow.variant]}

{showPreview&&

Try the movement

{!enabled&&Motion is off. Enable it above to see the movement; tab selection still works.} OverviewActivitySettings Choose another tab to see {flow.variant==='off'?'the selection':FLOW_CHARACTERS[flow.variant].label.toLowerCase()} in action. Try switching back quickly. The indicator follows your latest choice. Keep the character you like, then adjust its speed and intensity below.

}

Speed{flow.speed.toFixed(2)}×

setFlowSettings({speed})}/>

Intensity{flow.intensity.toFixed(2)}×

setFlowSettings({intensity})}/> {flow.variant==='glide'?'Glide stays calm. Choose an expressive character to tune intensity.':'Shapes the stretch, ripple or glow of expressive characters.'}

Pointer previewA hint before you select. Pointer devices only.

setFlowSettings({hover})}/>

Pointer preview strength{flow.hoverStrength.toFixed(2)}×

setFlowSettings({hoverStrength})}/> {!flow.hover?'Pointer preview is off.':flow.hoverStrength===0?'Strength is zero, so the pointer preview is invisible. Increase it to see the hint.':'Hover an unselected tab in the preview to see its surface.'}

Copy selection settings

} type Control=[label:string,min:number,max:number,step:number,unit:string] const BEHAVIORS={rest:'Rest breath',reach:'Reach',merge:'Merge on entry',hold:'Hold inside',jiggleOn:'Let-go wobble',press:'Press squash',echo:'Outline echo'} as const const CONFIG:Partial>={ lobeK:['Reach speed',20,320,5,''],lobeZ:['Reach bounce',.3,1.4,.02,'ζ'],mergeZ:['Merge bounce',.2,1.2,.02,'ζ'],arcK:['Slide-along speed',5,140,1,''],holdK:['Hold follow speed',10,220,5,''],pressK:['Release speed',40,320,5,''],jiggle:['Let-go wobble',0,1.5,.05,'×reach'],jiggleDecay:['Wobble fade',.4,4,.05,'/s'],curve:['Approach easing',.4,2,.05,''],quality:['Smoothness',1,6,.25,'px/pt'],grain:['Grain',0,.4,.01,''],sheen:['Sheen',0,1.5,.05,''],restSpeed:['Breath speed',0,3,.05,'×'],drift:['Arm drift',0,3,.05,'×'],dots:['Satellite dots',0,6,1,''],echoOff:['Echo distance',0,20,.5,'px'],echoScale:['Echo size',.9,1.2,.005,'×'], } const TIERS:Record={pill:'Pill — buttons and selects',tile:'Tile — icon disks and badges',nav:'Nav — navigation rows and tabs',card:'Card — cards and panels',blob:'Blob — decorative shapes',spinner:'Spinner — loaders'} const TIER_CONTROLS:Record={ reach:['Reach',0,24,.5,'px'],inside:['Hold bump',0,12,.1,'px'],press:['Press squash',0,12,.1,'%'],amp:['Rest breath',0,3,.01,'%'],R:['Sensing distance',0,240,2,'px'],sig:['Lobe width',1,120,1,'px'],lobes:['Arms',0,24,1,''],depth:['Arm length',0,.4,.005,'×'],asym:['Irregularity',0,1,.02,''],spread:['Arm thickness',.15,1.2,.01,'×'], } function Range({control,value,onChange}:{control:Control;value:number;onChange:(value:number)=>void}){ const id=React.useId(),[label,min,max,step,unit]=control // Expand a convenient slider extent to represent authored values without writing a clamped value on mount. const low=Math.min(min,value),high=Math.max(max,value) return

{label}{unit}

onChange(Number(event.currentTarget.value))}/>{if(event.currentTarget.value!==''&&Number.isFinite(event.currentTarget.valueAsNumber))onChange(event.currentTarget.valueAsNumber)}}/>

} function Preview({tier}:{tier:TierName}){ const press=useFlowPress(),ref=useMorph('buttons',press) return

Move toward it, focus it, or press it.

} /** An optional front end to the shared motion engines. No panel settings are persisted. */ export function Adjuster({defaultOpen=true,className,...props}:AdjusterProps){ const snapshot=React.useSyncExternalStore(subscribeSettings,getSettingsSnapshot,getServerSettingsSnapshot) const [open,setOpen]=React.useState(defaultOpen),[tier,setTier]=React.useState('pill'),[text,setText]=React.useState(''),[error,setError]=React.useState(''),[notice,setNotice]=React.useState('') const id=React.useId(),{motion,flow,profile,authored}=snapshot const importProfile=()=>{try{importMorphJSON(text);setError('');setNotice('Profile imported. Changes are live.')}catch(cause){setError(cause instanceof Error?cause.message:'Could not import the profile.');setNotice('')}} return

Motion adjuster

{authored?'Authored profile':'Shipped runtime profile'}

Motion

{(['off','subtle'] as const).map(mode=>setMotionMode(mode)}/>{mode==='off'?'Off':'Subtle'})}

{PRODUCT_CATEGORIES.map(category=>setMotionCategory(category,event.currentTarget.checked)}/>{category.charAt(0).toUpperCase()+category.slice(1)})}

SelectionCharacter setFlowSettings({hover:event.currentTarget.checked})}/>Pointer ghost setFlowSettings({speed})}/>setFlowSettings({intensity})}/>setFlowSettings({hoverStrength})}/>

Body behavior

{Object.entries(BEHAVIORS).map(([key,label])=>setMorphConfig({[key]:event.currentTarget.checked})}/>{label})}

Feel and texture

{Object.entries(CONFIG).map(([key,control])=>setMorphConfig({[key]:value})}/>)}

Body shapeTier

{Object.entries(TIER_CONTROLS).map(([name,control])=>{const key=name as keyof Tier,domain=DOMAIN[key as keyof typeof DOMAIN],factor=key==='amp'||key==='press'?100:1;const limits:Control=[control[0],domain?.min??control[1],domain?.max[tier]??control[2],control[3],control[4]];return setMorphTier(tier,{[key]:value/factor})}/>})}

Body profile

Export the shape and response of every body tier. Selection motion has its own controls above.

Exported or imported profile

setText(event.currentTarget.value)} spellCheck={false} rows={7}/><div data-part="actions" className="my-2 flex flex-wrap gap-x-4 gap-y-3"><button type="button" onClick={()=>{setText(exportMorphJSON());setError('');setNotice('Profile JSON is ready to copy.')}}>Export JSON</button><button type="button" onClick={importProfile}>Import JSON</button><button type="button" onClick={()=>{resetMorph();setError('');setNotice('Shipped runtime restored.')}}>Reset morph to runtime</button></div>{error&&<p role="alert" data-part="error">{error}</p>}<p role="status" aria-live="polite">{notice}</p></fieldset>
  </div>
 </section>
}
52:T6ed,@layer cojeev-states {
/* Content-driven narrow layout and morph-preview paint need the component boundary. */
[data-slot="adjuster"] [data-part="body"][hidden] { display: none; }
[data-slot="adjuster"] [data-slot="adjuster-preview"] { --mfill: var(--v-pink); background: var(--v-pink); padding: 12px 24px; }
[data-slot="adjuster"] [data-slot="adjuster-preview"]:has(>svg.v-morph) { background: transparent; }
[data-slot="adjuster"] [data-part="error"] { color: var(--v-danger-ink); }
.v-motion-controls { display:grid; gap:24px; min-width:0; color:var(--v-text); }
.v-motion-controls__row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.v-motion-controls__row > div { display:grid; gap:4px; min-width:0; }
.v-motion-controls__section { display:grid; gap:12px; }
.v-motion-controls__characters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.v-motion-controls__characters > button { min-width:0; min-height:44px; padding-inline:8px; }
.v-motion-controls__description { min-height:3em; }
.v-motion-controls__preview { display:grid; gap:16px; padding:20px 16px; border-radius:var(--r-card-sm); background:var(--v-beige); }
.v-motion-controls__preview [data-slot="tabs-list"] { width:100%; gap:4px; }
.v-motion-controls__preview [data-slot="tabs-trigger"] { flex:1; min-width:0; padding-inline:8px; }
.v-motion-controls__preview [data-slot="tabs-content"] { min-height:82px; padding-top:20px; }
.v-motion-controls [data-slot="slider"] { margin-block:8px; }
@container (max-width: 480px) {
 [data-slot="adjuster"] [data-part="grid"] { grid-template-columns: minmax(0, 1fr); }
 [data-slot="adjuster"] [data-part="body"] { padding: 0 12px 12px; }
 [data-slot="adjuster"] fieldset { padding: 12px; }
}

}
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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}]]}],["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/button.json","https://000h.cojeev.com/r/icon.json","https://000h.cojeev.com/r/code-block.json","https://000h.cojeev.com/r/label.json","https://000h.cojeev.com/r/slider.json","https://000h.cojeev.com/r/switch.json","https://000h.cojeev.com/r/tabs.json","https://000h.cojeev.com/r/typography.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/adjuster.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/adjuster.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/adjuster.css","content":"$52","type":"registry:file","target":"styles/cojeev/adjuster.css"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>