Custom PRD build: Practical Tips and Common Mistakes for CSS Easing
Reviewed by the OnlineFree.app team · Updated
Key points
- Custom PRD build turns dragged Bézier handles or a spring bounce into pasteable cubic-bezier() or linear() CSS.
- Browsers reject cubic-bezier() when x1 or x2 leaves the 0–1 range, though y values may overshoot.
- In Custom PRD build, bounce at 0% collapses to ease-out and non-custom presets overwrite your handles.
- Defaults are 450 ms duration, 0 ms delay and 35% bounce, with duration clamped to 50–5000 ms.
- Replay the preview several times and retest the final curve on a touch device before shipping.
What does Custom PRD build output?
Custom PRD build is a browser-only CSS easing workbench that turns dragged Bézier control points or a spring bounce setting into copy-ready CSS timing-function code. You drag handles, watch a live preview animate, and copy a line such as `transition: transform 450ms cubic-bezier(.34,1.56,.64,1) 0ms;` — no install and no account.
The layout is split on purpose: controls and the curve editor on the left, preview stage and code panel on the right. Cause and effect stay visible together, which is the whole point of a tuning tool. We built it after watching too many transitions ship with the default `ease` keyword or a curve pasted from a blog post that was never checked against the actual element.
Everything runs client-side in your browser, so the curves you drag never touch a server. OnlineFree.app free online tools hosts it next to other single-purpose utilities.
How do Bézier handles become CSS?
The output is a standard `cubic-bezier(x1, y1, x2, y2)`, where x1 and x2 must stay between 0 and 1, while y1 and y2 may fall outside that range to create overshoot. Dragging a handle above the top of the grid is legal — that is exactly how a spring gets its bounce.
The default spring preset in Custom PRD build lands on `transition: transform 450ms cubic-bezier(.34,1.56,.64,1) 0ms;`. That `.56` overshoot on the first y value is what makes a card nudge past its target and settle back. The readout under the canvas shows all four numbers live, so you can note them down or compare two candidates side by side.
When the spring overshoot exceeds what a single cubic Bézier can express cleanly, the tool switches to the newer `linear()` form with sampled stops, e.g. `animation-timing-function: linear(0, .12, .41, 1.02, ...)`. As of 2026 both are widely supported in evergreen browsers, but `linear()` is the newer addition — verify it against your own support matrix. The MDN easing function reference is the quickest place to confirm syntax.
Common mistakes when tuning easing
The most frequent mistake is hand-editing the x values after copying. Browsers reject `cubic-bezier()` when x1 or x2 sits outside 0–1, so a pasted curve with `x1: -0.2` silently falls back to `ease`. Custom PRD build clamps those handles for you, but your text editor will not.
A second trap is the preset select. Picking `ease-in`, `ease-out`, `anticipate` or any other non-custom preset overwrites your dragged handles immediately. That behaviour is intentional, but it is easy to lose a curve you liked — copy the code to a scratch file before you experiment.
A third one: setting bounce to 0 in spring mode. The tool collapses that to `ease-out`, which is correct spring behaviour rather than a bug. If you wanted visible springiness, raise bounce to at least 1% and check the preview again.
Choosing duration, delay and bounce
Duration is clamped to 50–5000 ms and defaults to 450 ms. Below roughly 100 ms most people read a transform as a snap rather than a motion; above 800 ms a simple hover starts to feel laggy. Around 450 ms suits a card or modal, while 150–250 ms is usually better for buttons and tooltips.
Delay runs 0–2000 ms and defaults to 0. Use it for stagger, but remember the same `transition` shorthand applies in both directions — a 120 ms delay before a menu opens also delays it when it closes, unless you override the transition per state.
Bounce runs 0–100 and defaults to 35%, matching the little coil graphic that compresses as the value rises. Treat 0% as a flat ease-out, roughly 30% as a visible but tasteful overshoot, and anything above 60% as a deliberate toy effect. Judge it at the real element size, not a small demo card.
Testing the curve before you ship
The preview stage replays on every edit and on click, so you can compare two curves back to back without touching your codebase. Watch it five or six times rather than once — the differences that decide whether a motion feels right usually live in the first 100 ms.
On narrow screens the tool stacks vertically: curve canvas first with 44px touch handles and pointer capture so the page will not scroll mid-drag, preview second, and a sticky Copy button at the bottom. Even so, re-test the final value on a real phone, because timing that feels crisp with a mouse can read as slow on a touch tap.
If you are handing values to a teammate, share the four numbers rather than a screenshot. A Custom PRD build link plus `x1, y1, x2, y2` and the duration preserves the exact curve and removes any guesswork from the review.
Frequently asked questions
Is Custom PRD build free, and does it need an account?
Custom PRD build is free and runs entirely in your browser with no account, signup or install. You open the page, drag the handles, and copy the CSS. All curve math happens client-side, so nothing is uploaded, and the generated cubic-bezier() or linear() string is yours to use in personal or commercial projects.
Why does Custom PRD build sometimes output linear() instead of cubic-bezier()?
Custom PRD build switches to linear() when the spring overshoot is larger than a single cubic Bézier can represent cleanly. Both are standard CSS timing functions: cubic-bezier() takes four numbers and enjoys the widest support, while linear() samples the curve at many points and handles multi-bounce springs better. Check your target browsers before shipping the linear() form.
What bounce value gives a natural-looking spring in Custom PRD build?
Roughly 30–35% is the sweet spot for most interface springs, which is why 35% is the default in Custom PRD build. Below about 10% the motion reads as a plain ease-out with no visible overshoot. Above 60% the bounce becomes the dominant visual feature and can distract from the content, particularly on small screens.
Can I use the Custom PRD build output in Tailwind or a transition shorthand?
Yes. Custom PRD build outputs a complete shorthand such as transition: transform 450ms cubic-bezier(.34,1.56,.64,1) 0ms;, and the timing function alone can be pasted into animation-timing-function, Tailwind arbitrary values, or a CSS custom property. Keep the four numbers identical whenever you move a curve between properties.
Does Custom PRD build work on a phone?
Yes. On narrow screens Custom PRD build stacks the curve canvas above the preview, uses 44px touch targets with pointer capture to stop accidental page scrolling during a drag, and keeps the Copy button sticky at the bottom. Still test the copied curve on a real device, since timing tuned with a mouse can feel slower on a tap.