Curve And Copy
A drafting-table bezier easing editor — drag two control points, feel the motion, copy the cubic-bezier(...) string. Built with Svelte.
CURVE·AND·COPY
A drafting-table bezier easing editor.
Drag two control points. Feel the motion. Copy the cubic-bezier(…) string. Paste into your CSS.
✎ WHAT IT DOES
- Drag P1 and P2 on the grid to shape a cubic bezier. The curve redraws live in red pen.
- A block animates across the preview rail continuously, using the exact curve you're dragging. Change the curve, the motion changes instantly.
- Compare mode runs a second block with any preset easing side-by-side, so you can feel the difference.
- Adjust the duration to see how your curve behaves over 100ms vs 3s.
- Pick from 9 built-in presets (linear, ease, ease-in/out, snappy, overshoot, lazy, anticipate, etc.) with
1–9. - Copy as CSS
cubic-bezier(…), Web Animations API, SveltecubicBezier(), Framer Motionease: [...], or Tailwind arbitrary value. - Share link — the curve is encoded in the URL hash, so you can send
/#0.42,0,0.58,1,700to a collaborator.
⌨ KEYBOARD
| Action | Keys |
|---|---|
| Nudge focused handle | ↑ ↓ ← → (±0.01), Shift+↑↓←→ (±0.05) |
| Play / pause preview | P |
| Copy current string | C |
Reset to ease |
R |
| Load preset | 1 through 9 |
● DESIGN LANGUAGE
Drafting-table blueprint. Cream paper base, deep navy ink, one red pen for the active curve, cyan for handles, amber for measurement. Typography: IBM Plex Mono for numbers, IBM Plex Serif for headers, Space Grotesk for UI, Caveat for a single hand-written annotation. Hairline borders, no rounded corners, no blurred shadows, tick-marked axes. A small serial plate ("A-001 · MOTION CURVE · 2026") sits quietly in the footer.
Deliberately the opposite voice of playful-neubrutalist or tactile-hardware — this tool is a precision instrument for designers and the UI reflects that.
◉ WHAT'S INSIDE
- Hand-rolled cubic bezier math — Newton-Raphson with bisection fallback, matching WebKit's
UnitBezier.src/lib/math/bezier.ts - Live coordinate cursor on the curve — a rAF-driven dot rides the curve in sync with the preview animation, showing where on the curve the motion currently is.
src/lib/components/CurveEditor.svelte - SVG-native editor with draggable pointer-capture handles, keyboard arrow nudging, and aria-slider roles. Overshoot zone above/below [0, 1] is rendered with a dashed paper-margin fill.
- URL-hash state sync — debounced write on curve change, parsed on mount.
- Five export formats — one unified generator, one clipboard call.
src/lib/media/copy.ts
