60: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 61: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/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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ItemStyles"] 62:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollArea"] 63:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollBar"] 64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65:T538c,"use client"; import { useEffect, useId, useRef, useState } from "react"; import { motion } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; type Curve = [number, number, number, number]; // The graph shows a little time either side of 0..1 so the end handles // never sit on the edge, and progress from -0.5 to 1.5 so curves that // dip below the start (anticipation) or pass the end (overshoot) fit. const T_MIN = -0.1; const T_MAX = 1.1; const P_MIN = -0.5; const P_MAX = 1.5; const SIZE = 280; // The pause at each end of the loop, so every run starts from stillness // and you can compare how it arrives. const HOLD = 700; const DURATIONS = [300, 600, 1000]; const STEP = 0.01; const BIG_STEP = 0.1; const ICON_SWAP = { type: "spring", duration: 0.3, bounce: 0 } as const; const PRESETS: { name: string; curve: Curve; use: string }[] = [ { name: "ease-out", curve: [0.23, 1, 0.32, 1], use: "Things entering or answering a click: dropdowns, toasts, modals. The fast start feels instant.", }, { name: "ease-in-out", curve: [0.77, 0, 0.175, 1], use: "Something already on screen moving to a new place. Speeds up, then settles.", }, { name: "iOS drawer", curve: [0.32, 0.72, 0, 1], use: "Sheets and drawers sliding in. An iOS-like curve from the Ionic Framework.", }, { name: "ease", curve: [0.25, 0.1, 0.25, 1], use: "The CSS default. Fine for hover and color changes, too soft for movement.", }, { name: "linear", curve: [0, 0, 1, 1], use: "Constant motion only: progress bars, marquees, spinners. Movement looks mechanical.", }, { name: "overshoot", curve: [0.34, 1.56, 0.64, 1], use: "Passes the target, then eases back. Playful, but a spring usually does it better.", }, ]; const X = (t: number) => ((t - T_MIN) / (T_MAX - T_MIN)) * SIZE; const Y = (p: number) => ((P_MAX - p) / (P_MAX - P_MIN)) * SIZE; const pct = (v: number) => `${(v / SIZE) * 100}%`; function clamp(value: number, min: number, max: number) { return Math.min(Math.max(value, min), max); } // Up to 3 decimals, trailing zeros dropped: 0.175 stays, 1.00 becomes 1. function num(v: number) { return Number(v.toFixed(3)).toString(); } function toCss(c: Curve) { return `cubic-bezier(${c.map(num).join(", ")})`; } // Builds one loop: out, hold, back, hold. Offsets come from real times so // the hold stays the same length whatever the duration. function timeline(duration: number) { const total = duration * 2 + HOLD * 2; return { total, arrive: duration / total, leave: (duration + HOLD) / total, back: (duration * 2 + HOLD) / total, }; } function travelFrames(curve: string, duration: number, from: string, to: string): Keyframe[] { const t = timeline(duration); return [ { transform: from, offset: 0, easing: curve }, { transform: to, offset: t.arrive }, { transform: to, offset: t.leave, easing: curve }, { transform: from, offset: t.back }, { transform: from, offset: 1 }, ]; } // The graph's tracer only draws the outbound run, since the return trip // isn't the plotted curve. It rewinds while faded out. function tracerFrames( curve: string, duration: number, axis: "X" | "Y", ): Keyframe[] { const t = timeline(duration); const end = axis === "X" ? "translateX(100%)" : "translateY(-100%)"; const start = axis === "X" ? "translateX(0%)" : "translateY(0%)"; const rewind = (t.back + 1) / 2; return [ { transform: start, offset: 0, easing: axis === "X" ? "linear" : curve }, { transform: end, offset: t.arrive }, { transform: end, offset: rewind }, { transform: start, offset: rewind }, { transform: start, offset: 1 }, ]; } function fadeFrames(duration: number): Keyframe[] { const t = timeline(duration); const rewind = (t.back + 1) / 2; return [ { opacity: 1, offset: 0 }, { opacity: 1, offset: t.leave }, { opacity: 0, offset: Math.min(t.leave + 0.05, rewind) }, { opacity: 0, offset: rewind }, { opacity: 1, offset: 1 }, ]; } export function EasingEditor({ initial = PRESETS[0].curve, className, }: { initial?: Curve; className?: string; }) { const reduceMotion = useReducedMotion(); const [curve, setCurve] = useState(initial); const [duration, setDuration] = useState(DURATIONS[1]); const css = toCss(curve); const rootRef = useRef(null); const graphRef = useRef(null); const dotRef = useRef(null); const squareRef = useRef(null); const tracerXRef = useRef(null); const tracerYRef = useRef(null); const tracerDotRef = useRef(null); const anims = useRef<{ eased: Animation[]; all: Animation[] }>({ eased: [], all: [] }); const visible = useRef(true); const cssRef = useRef(css); const dragging = useRef<0 | 1 | null>(null); const hintId = useId(); // WAAPI rather than Motion: it runs off the main thread and takes the // cubic-bezier string exactly as CSS would, overshoot included. useEffect(() => { const els = [dotRef, squareRef, tracerXRef, tracerYRef, tracerDotRef].map((r) => r.current); if (els.some((el) => !el)) return; const [dot, square, tx, ty, tdot] = els as HTMLElement[]; const { total } = timeline(duration); const timing = { duration: total, iterations: Infinity }; const c = cssRef.current; const eased = [ dot.animate(travelFrames(c, duration, "translateX(0%)", "translateX(100%)"), timing), square.animate(travelFrames(c, duration, "scale(0.5)", "scale(1)"), timing), ty.animate(tracerFrames(c, duration, "Y"), timing), ]; const all = [ ...eased, tx.animate(tracerFrames(c, duration, "X"), timing), tdot.animate(fadeFrames(duration), timing), ]; anims.current = { eased, all }; return () => all.forEach((a) => a.cancel()); }, [duration]); // A new curve swaps the keyframes in place, so the loop keeps its time // instead of restarting on every drag frame. useEffect(() => { cssRef.current = css; const [dot, square, ty] = anims.current.eased; if (!dot) return; (dot.effect as KeyframeEffect).setKeyframes( travelFrames(css, duration, "translateX(0%)", "translateX(100%)"), ); (square.effect as KeyframeEffect).setKeyframes( travelFrames(css, duration, "scale(0.5)", "scale(1)"), ); (ty.effect as KeyframeEffect).setKeyframes(tracerFrames(css, duration, "Y")); }, [css, duration]); // Reduced motion starts paused; Play is still one press away. const [override, setOverride] = useState(null); const isPaused = override ?? !!reduceMotion; useEffect(() => { const sync = () => { anims.current.all.forEach((a) => isPaused || !visible.current ? a.pause() : a.play(), ); }; sync(); // Nothing loops while scrolled out of view. const el = rootRef.current; if (!el) return; const observer = new IntersectionObserver(([entry]) => { visible.current = entry.isIntersecting; sync(); }); observer.observe(el); return () => observer.disconnect(); }, [isPaused, duration]); const moveTo = (index: 0 | 1, clientX: number, clientY: number) => { const box = graphRef.current?.getBoundingClientRect(); if (!box) return; const t = T_MIN + ((clientX - box.left) / box.width) * (T_MAX - T_MIN); const p = P_MAX - ((clientY - box.top) / box.height) * (P_MAX - P_MIN); set(index, t, p); }; const set = (index: 0 | 1, t: number, p: number) => { // CSS rejects x outside 0..1, so time is clamped; progress may overshoot. const nx = Math.round(clamp(t, 0, 1) / STEP) * STEP; const ny = Math.round(clamp(p, P_MIN, P_MAX) / STEP) * STEP; setCurve((c) => { const next = [...c] as Curve; next[index * 2] = Number(nx.toFixed(3)); next[index * 2 + 1] = Number(ny.toFixed(3)); return next; }); }; const active = PRESETS.find((p) => p.curve.every((v, i) => v === curve[i])); const points: [number, number][] = [ [curve[0], curve[1]], [curve[2], curve[3]], ]; return (

{/* A dot that rides the curve: it moves across at a steady rate (time) while rising with the easing (progress). */}

{points.map(([t, p], i) => (

Drag a handle. Arrow keys nudge, Shift more.

Preview

{/* Travel is the track minus the dot, so translateX(100%) of this box lands the dot exactly on the far end. */}

{ const dir = { ArrowLeft: -1, ArrowUp: -1, ArrowRight: 1, ArrowDown: 1 }[e.key]; if (!dir) return; e.preventDefault(); const i = DURATIONS.indexOf(duration); const next = DURATIONS[(i + dir + DURATIONS.length) % DURATIONS.length]; setDuration(next); e.currentTarget.querySelector(`[data-duration="${next}"]`)?.focus(); }} > {DURATIONS.map((d) => ( ))}

{PRESETS.map((p) => ( ))}

{/* Reserves two lines so switching presets never shifts the page. */}

{active ? active.use : "Custom curve. Steeper at the start means it answers faster; a handle above the square overshoots."}

{css}

); } function SwapIcon({ visible, reduceMotion, children, }: { visible: boolean; reduceMotion: boolean | null; children: React.ReactNode; }) { const hidden = reduceMotion ? { opacity: 0 } : { scale: 0.25, opacity: 0, filter: "blur(4px)" }; return ( {children} ); } function CopyButton({ value }: { value: string }) { const reduceMotion = useReducedMotion(); const [copied, setCopied] = useState(false); const timer = useRef>(undefined); useEffect(() => () => clearTimeout(timer.current), []); const copy = async () => { setCopied(true); clearTimeout(timer.current); // Long enough to notice the check, short enough to copy again soon. timer.current = setTimeout(() => setCopied(false), 1600); try { await navigator.clipboard.writeText(value); } catch { clearTimeout(timer.current); setCopied(false); } }; return ( ); } export default function EasingEditorDemo() { return ; } 5f:["$","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],["$","$L61",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L62",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"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)"}]]}]]}],["$","$L63",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L62",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"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)"}]]}]]}],["$","$L63",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L62",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--shadow-raised)"}]]}]]}],["$","$L63",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L64",null,{"files":[{"path":"components/easing-editor.tsx","content":"$65","type":"registry:component"},{"path":"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","type":"registry:hook","target":"hooks/use-reduced-motion.ts"}],"className":"h-[70svh] min-h-80"}]]}]