Custom PRD build: Copy-Ready CSS Spring Easing in Seconds
Reviewed by the OnlineFree.app team · Updated
Key points
- Custom PRD build turns a dragged Bézier curve or a spring bounce setting into paste-ready CSS cubic-bezier() or linear() code.
- Spring mode's bounce slider runs from 0% to 100%, and 0% collapses to a plain ease-out with no overshoot.
- Duration clamps to 50–5000 ms and delay to 0–2000 ms, so verify extreme values before shipping them.
- A multi-bounce spring is emitted as linear(), because one cubic-bezier() can only overshoot once.
- Picking any non-custom preset in Custom PRD build overwrites your hand-tuned handles.
What does Custom PRD build do?
Custom PRD build is a browser-only CSS easing workbench that converts dragged Bézier control points or spring physics into copy-ready cubic-bezier() and linear() timing functions. You move a handle or a bounce slider, and the exact CSS text updates in the panel beside it — no install, no account, no build step.
The layout is deliberately split. The curve editor and preset dropdown sit on the left; the live preview card and the code block sit on the right, so the cause of a change and its effect stay in the same glance. Defaults are spring mode, 35% bounce, 450 ms duration and 0 ms delay — a small, tasteful overshoot rather than a cartoon boing.
Everything runs on the page in Custom PRD build. Every edit replays the animated card immediately, and you can click the preview at any time to replay it by hand.
How does spring mode differ from cubic-bezier?
Spring mode gives you a single control: a bounce slider from 0% to 100%. At 0% the curve collapses to a plain ease-out with no overshoot at all, which is a useful sanity check before you start adding bounce back in.
Cubic-bezier mode is manual. You drag the x1, y1, x2, y2 handles and read the four numbers live as you move them. A faint coordinate grid sits behind the curve, and a small spring coil visibly compresses as bounce rises, so you can feel where you are on the scale without reading numbers.
The preset dropdown — linear, ease, ease-in, ease-out, ease-in-out, anticipate, custom — overwrites your handles the moment you pick a non-custom option. That is the most common way to lose a curve you just spent two minutes tuning: choose the preset first, or accept re-dragging afterwards.
Reading the CSS it generates
The output is a single line you can paste straight into a rule. In cubic-bezier mode it looks like `transition: transform 450ms cubic-bezier(.34,1.56,.64,1) 0ms;`. The 1.56 is the overshoot: y values may legally exceed 1, while x1 and x2 must stay between 0 and 1 or the function is invalid.
Duration and delay are whole numbers, and they are clamped rather than rejected. Duration is capped to 50–5000 ms and delay to 0–2000 ms, and the fields never go blank, so a typed 20000 silently becomes 5000. If the exact number matters, glance at the field after typing.
When a spring overshoots more than once, a single cubic-bezier() cannot describe it, and the tool switches to a sampled list: `animation-timing-function: linear(0, .12, .41, 1.02, ...)`. That list can run to a few dozen stops, so keep it on one line or it will wreck your formatting. Copy it from the Custom PRD build editor rather than retyping the numbers.
How Custom PRD build compares to other options
Single-purpose curve tools such as cubic-bezier.com are excellent at what they do, but they only speak cubic-bezier() — there is no spring physics, so a bouncy motion has to be hand-faked with extra keyframes. OnlineFree.app starts from spring behaviour instead and then decides for you whether cubic-bezier() or linear() is the honest representation of that spring.
Design-tool motion panels keep easing inside the design file, which is fine until a developer needs the number. This tool exists to hand over the number. Native spring generators, by contrast, output Swift, Kotlin or JavaScript rather than CSS.
What it does not do: export stiffness and damping values for JavaScript spring libraries, edit multi-keyframe timelines, import a curve you already have, or keep a saved library of curves. Each session is one timing function at a time. If your motion system needs all of that, treat this as one step in the workflow rather than the whole workflow.
Mistakes to avoid when pasting the code
cubic-bezier() belongs in transition-timing-function, in animation-timing-function, or inside the transition shorthand — not in the animation shorthand, and never in place of a duration. `transition: transform cubic-bezier(.34,1.56,.64,1);` is invalid: the shorthand needs a time value, and without one the browser assumes 0s and nothing moves.
In the shorthand, the first time value is duration and the second is delay. `transition: transform 450ms cubic-bezier(.34,1.56,.64,1) 0ms;` and `transition: transform 450ms cubic-bezier(.34,1.56,.64,1) 200ms;` differ by more than they look like across a page of code.
Check browser support for linear() easing before shipping it — the MDN easing-function reference and the W3C CSS Easing Functions Level 2 specification document what each function accepts and where it is available as of 2026. The preview panel here does not emulate older engines, and it does not apply prefers-reduced-motion, so test that path yourself. If one curve keeps coming back into your codebase, tune it once and paste the same line into every rule that needs it.
Frequently asked questions
Is Custom PRD build free, and does it need an account?
Yes — Custom PRD build is free and needs no account or sign-in. It is a single browser page: you drag the curve handles or set the bounce slider, and the generated CSS appears beside the animated preview. Almost everything happens client-side, so you are not uploading design files, and the mobile layout stacks the controls with 44px touch handles and a sticky Copy button.
Why does Custom PRD build sometimes output linear() instead of cubic-bezier()?
Because one cubic-bezier() can only describe a single overshoot. A spring that bounces two or three times needs a richer curve, so Custom PRD build samples the spring into a linear() easing list of evenly spaced stops. The output is longer and must stay on one line, but it reproduces multi-bounce motion that cubic-bezier() simply cannot.
What duration and delay values can I enter in Custom PRD build?
Duration accepts whole milliseconds clamped to 50–5000 ms, and delay accepts whole milliseconds from 0–2000 ms. The fields never go blank, and out-of-range entries are clamped rather than rejected, so typing 8000 ms leaves you with 5000 ms. For longer or fractional durations, generate the timing function here and edit the time value by hand in your stylesheet.
Can I use the Custom PRD build output in JavaScript animation libraries?
Partly. The cubic-bezier() control points transfer cleanly, since most libraries accept four numbers or the same function. The linear() output is a CSS-specific sampled list and does not map directly to a JS easing. Custom PRD build also does not export spring stiffness or damping, so if a physics engine drives the motion, use its own spring settings.
Does the Custom PRD build preview reflect real browser performance?
No — the preview card is a visual guide, not a benchmark. It shows how the curve reads at your chosen duration, but it does not emulate older browser engines, GPU compositing, layout thrash or prefers-reduced-motion. Always test the pasted timing function on the target device, and check support tables such as MDN's easing-function reference before shipping.