51: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T1647,"use client"; import { useEffect, useId, useState } from "react"; import { motion, useMotionValue, useReducedMotion, useSpring, useTransform, useVelocity } from "motion/react"; export interface MorphSliderProps { min?: number; max?: number; step?: number; /** Controlled value. */ value?: number; /** Initial value when uncontrolled. */ defaultValue?: number; onChange?: (value: number) => void; /** Thumb, fill and bubble color. */ color?: string; /** Value text color inside the bubble. */ textColor?: string; /** Text appended to the value, e.g. "%". */ suffix?: string; /** Accessible name. */ label?: string; className?: string; } export function MorphSlider({ min = 0, max = 100, step = 1, value, defaultValue = 42, onChange, color = "#c6ff3d", textColor = "#0a0a0a", suffix = "%", label = "Value", className, }: MorphSliderProps) { const [inner, setInner] = useState(defaultValue); const [active, setActive] = useState(false); const reduce = useReducedMotion(); const goo = `goo-${useId().replace(/:/g, "")}`; const v = Math.min(max, Math.max(min, value ?? inner)); const pct = max > min ? ((v - min) / (max - min)) * 100 : 0; // Position in % drives the thumb; its velocity stretches the thumb and tilts the bubble. const pos = useMotionValue(pct); useEffect(() => { pos.set(pct); }, [pct, pos]); const left = useSpring(pos, { stiffness: 700, damping: 45 }); const leftCss = useTransform(left, (p) => `${p}%`); const vel = useVelocity(left); const stretch = useSpring(useTransform(vel, [-600, 0, 600], [1.6, 1, 1.6]), { stiffness: 400, damping: 30 }); const squash = useTransform(stretch, (s) => 1 / Math.sqrt(s)); const tilt = useSpring(useTransform(vel, [-600, 600], [22, -22]), { stiffness: 300, damping: 20 }); const set = (n: number) => { if (value === undefined) setInner(n); onChange?.(n); }; const bubble = active && !reduce; const pop = { type: "spring" as const, stiffness: 420, damping: bubble ? 16 : 26 }; return (

{/* Track + fill */}

{/* Gooey layer: the bubble drips out of the thumb and melts back in. */}

{/* Crisp overlays: thumb core + value text (outside the filter so they stay sharp). */}

{v} {suffix}

{/* Native range input: pointer, touch and keyboard for free. */} set(Number(e.target.value))} onPointerDown={() => { setActive(true); window.addEventListener("pointerup", () => setActive(false), { once: true }); }} onKeyDown={() => setActive(true)} onKeyUp={() => setActive(false)} onBlur={() => setActive(false)} className="peer absolute inset-x-0 top-1/2 h-10 -translate-y-1/2 cursor-grab appearance-none opacity-0 active:cursor-grabbing [&::-moz-range-thumb]:h-10 [&::-moz-range-thumb]:w-px [&::-webkit-slider-thumb]:h-10 [&::-webkit-slider-thumb]:w-px [&::-webkit-slider-thumb]:appearance-none" />

); } 50:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@glint-ui","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/ui/morph-slider.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]