{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"ink-well","type":"registry:component","title":"Ink well","description":"Drains a glass inkwell as you spend your character limit.","author":"Yash Bavadiya ","dependencies":[],"registryDependencies":["utils"],"files":[{"path":"components/ink-well.tsx","type":"registry:component","content":"\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { cn } from \"@/lib/utils\";\n\n// The bottle, in viewBox units (100 x 124): a squat, heavy-based inkwell\n// with sloped shoulders and a short neck. OUTER is the glass surface, INNER\n// the cavity the ink fills; the gap between them is the glass itself.\nconst OUTER =\n \"M36 36V48C36 54 8 54 8 66V108Q8 116 16 116H84Q92 116 92 108V66C92 54 64 54 64 48V36Z\";\nconst INNER =\n \"M39 36V49C39 57 11 57 11 67V104Q11 108 15 108H85Q89 108 89 104V67C89 57 61 57 61 49V36Z\";\n// The ink line when full (just under the shoulders) and when dry.\nconst FULL_Y = 64;\nconst DRY_Y = 107.5;\nconst LEFT = 11;\nconst RIGHT = 89;\n// Ink is a physical material: indigo-black, lifted a little in the dark\n// theme so it still reads as liquid against a dark page.\nconst INK = \"light-dark(oklch(0.3 0.08 268), oklch(0.44 0.1 268))\";\n// The dip pen's wood holder, brass ferrule and steel nib, also physical.\nconst WOOD = \"oklch(0.56 0.09 52)\";\nconst BRASS = \"oklch(0.78 0.11 85)\";\nconst STEEL = \"oklch(0.8 0.01 250)\";\n// Ruled like writing paper: one rule under each 24px line, scrolling with\n// the text. The first layer paints over the 14px top padding, where the\n// repeat would otherwise put a stray rule above the first line.\nconst RULED = {\n backgroundImage:\n \"linear-gradient(var(--background), var(--background)), repeating-linear-gradient(to bottom, transparent 0 23px, var(--border) 23px 24px)\",\n backgroundSize: \"100% 14px, 100% 24px\",\n backgroundRepeat: \"no-repeat, repeat\",\n backgroundPosition: \"0 0, 0 14px\",\n backgroundAttachment: \"local\",\n} as const;\n// The level follows the count on a slightly loose spring so each keystroke\n// lets the ink settle rather than step.\nconst LEVEL_K = 90;\nconst LEVEL_C = 16;\n// Surface ripples die out over about a second and a half once typing stops.\nconst WAVE_DECAY = 2.4;\nconst WAVE_MAX = 3.2;\n// Below this, the surface is flat enough to stop drawing frames.\nconst REST = 0.02;\n// Remaining-count fraction where the ink turns to the danger color.\nconst WARN = 0.1;\n\ntype Bucket = \"ok\" | \"warn\" | \"full\" | \"over\";\n\nfunction bucketFor(remaining: number, limit: number): Bucket {\n if (remaining < 0) return \"over\";\n if (remaining === 0) return \"full\";\n if (remaining <= Math.max(1, Math.round(limit * WARN))) return \"warn\";\n return \"ok\";\n}\n\n// The body of ink, closed below the bottle.\nfunction surfacePath(level: number, amp: number, phase: number) {\n return `${surfaceLine(level, amp, phase)}L${RIGHT} 124L${LEFT} 124Z`;\n}\n\n// Just the top edge, drawn again as the thin bright line where light\n// catches the meniscus.\nfunction surfaceLine(level: number, amp: number, phase: number) {\n let d = \"\";\n // Two detuned sines read as liquid; a single one reads as a graph.\n for (let x = LEFT; x <= RIGHT; x += 2) {\n const y =\n level +\n amp * Math.sin(x * 0.16 + phase) +\n amp * 0.45 * Math.sin(x * 0.37 - phase * 1.4);\n d += `${d ? \"L\" : \"M\"}${x} ${y.toFixed(2)}`;\n }\n return d;\n}\n\nexport function InkWell({\n value,\n onChange,\n limit = 200,\n label,\n placeholder,\n className,\n}: {\n value: string;\n onChange: (value: string) => void;\n limit?: number;\n label: string;\n placeholder?: string;\n className?: string;\n}) {\n const id = useId();\n const reduceMotion = useReducedMotion();\n const remaining = limit - value.length;\n const bucket = bucketFor(remaining, limit);\n const fraction = Math.min(Math.max(remaining / limit, 0), 1);\n const target = DRY_Y - (DRY_Y - FULL_Y) * fraction;\n\n const inkRef = useRef(null);\n const lineRef = useRef(null);\n // Rendered once; after that only the rAF loop writes the surface, so a\n // re-render mid-slosh never snaps it flat.\n const [initialInk] = useState(() => surfacePath(target, 0, 0));\n const [initialLine] = useState(() => surfaceLine(target, 0, 0));\n const sim = useRef({ level: target, vel: 0, amp: 0, phase: 0, target });\n const frame = useRef(0);\n const lastInput = useRef(0);\n\n // Announce only when crossing a threshold; a running count in a live\n // region would talk over every keystroke.\n const [announcement, setAnnouncement] = useState(\"\");\n const lastBucket = useRef(bucket);\n useEffect(() => {\n if (bucket === lastBucket.current) return;\n lastBucket.current = bucket;\n setAnnouncement(\n bucket === \"warn\"\n ? `${remaining} characters left`\n : bucket === \"full\"\n ? \"Character limit reached\"\n : bucket === \"over\"\n ? \"Over the character limit\"\n : \"\",\n );\n // Only the crossing matters here, not every count inside a bucket.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [bucket]);\n\n const draw = () => {\n const s = sim.current;\n inkRef.current?.setAttribute(\"d\", surfacePath(s.level, s.amp, s.phase));\n lineRef.current?.setAttribute(\"d\", surfaceLine(s.level, s.amp, s.phase));\n };\n\n const run = () => {\n if (frame.current) return;\n let last = performance.now();\n const tick = (now: number) => {\n const s = sim.current;\n const dt = Math.min((now - last) / 1000, 1 / 30);\n last = now;\n s.vel += (-LEVEL_K * (s.level - s.target) - LEVEL_C * s.vel) * dt;\n s.level += s.vel * dt;\n s.amp *= Math.exp(-WAVE_DECAY * dt);\n s.phase += dt * 7;\n draw();\n const still =\n s.amp < REST &&\n Math.abs(s.vel) < REST &&\n Math.abs(s.level - s.target) < REST;\n if (still) {\n s.amp = 0;\n s.level = s.target;\n draw();\n frame.current = 0;\n return;\n }\n frame.current = requestAnimationFrame(tick);\n };\n frame.current = requestAnimationFrame(tick);\n };\n\n useEffect(() => {\n const s = sim.current;\n s.target = target;\n if (reduceMotion) {\n cancelAnimationFrame(frame.current);\n frame.current = 0;\n Object.assign(s, { level: target, vel: 0, amp: 0 });\n draw();\n return;\n }\n run();\n // run and draw only touch refs.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [target, reduceMotion]);\n\n useEffect(\n () => () => {\n cancelAnimationFrame(frame.current);\n // Cleared too, or a remount (Strict Mode does one) would think the\n // cancelled loop is still running and never start a new one.\n frame.current = 0;\n },\n [],\n );\n\n const slosh = () => {\n if (reduceMotion) return;\n const now = performance.now();\n const gap = now - lastInput.current;\n lastInput.current = now;\n // Quick typing sloshes harder; a lone key after a pause barely ripples.\n const kick = Math.min(1, 90 / Math.max(gap, 30)) * 0.9 + 0.15;\n const s = sim.current;\n s.amp = Math.min(WAVE_MAX, s.amp + kick);\n run();\n };\n\n const dry = remaining <= 0;\n const hot = bucket !== \"ok\";\n\n return (\n
\n \n {label}\n \n
\n {\n onChange(e.target.value);\n slosh();\n }}\n rows={6}\n style={RULED}\n className={cn(\n \"block h-[208px] min-w-0 flex-1 resize-none rounded-xl bg-background px-4 py-3.5 text-[15px] leading-6 text-foreground shadow-raised outline-hidden transition-[box-shadow] duration-150 ease-out placeholder:text-muted-foreground focus:shadow-[0_0_0_1.5px_var(--foreground)]\",\n remaining < 0 &&\n \"shadow-[0_0_0_1.5px_var(--destructive)] focus:shadow-[0_0_0_1.5px_var(--destructive)]\",\n )}\n />\n
\n \n \n \n \n \n \n {/* Where the heavy base meets the desk. */}\n \n {/* The far wall of the glass, seen through the cavity. */}\n \n\n {/* A dip pen resting in the well, leaning on the neck. The part\n under the ink line is hidden by the ink drawn over it, so\n it surfaces as the well drains. */}\n \n \n \n \n \n \n \n\n \n {/* A dried ring where the last of the ink sat. */}\n \n \n {/* Light catching the meniscus. */}\n \n \n\n {/* The glass itself: the band between the two walls, thickest\n in the base, tinting what sits behind it. */}\n \n \n \n {/* The rolled lip of the neck. */}\n \n {/* Specular light on curved glass is white in any room. */}\n \n \n \n \n \n \n \n {remaining}\n \n {remaining < 0 ? \"over the limit\" : \"left\"}\n

\n \n {remaining < 0\n ? `${-remaining} characters over the ${limit} character limit`\n : `${remaining} of ${limit} characters remaining`}\n \n
\n
\n \n {announcement}\n \n
\n );\n}\n\nexport default function InkWellDemo() {\n const [text, setText] = useState(\n \"Dear Ada, the prototype finally runs. \",\n );\n return (\n \n );\n}\n"},{"path":"hooks/use-reduced-motion.ts","type":"registry:hook","target":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n"}],"cssVars":{"light":{"shadow-raised":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"},"dark":{"shadow-raised":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"},"theme":{"shadow-raised":"var(--shadow-raised)"}},"categories":["objects"],"docs":"From ui lab: https://lab.xevrion.dev/lab/ink-well"}