Custom PRD Build: Turn a Dragged Curve Into CSS Easing Code
Reviewed by the OnlineFree.app team · Updated
Key points
- Custom PRD build turns a dragged Bézier curve or a bounce percentage into pasteable CSS with duration included.
- Bounce 0 collapses the spring to ease-out; the 35% default outputs cubic-bezier(.34,1.56,.64,1).
- Multi-bounce springs emit linear() timing functions, which are accurate but longer than cubic-bezier().
- Duration clamps to 50–5000 ms and delay to 0–2000 ms, and every edit replays the preview automatically.
- Handle x values stay inside 0–1 because CSS requires it; y values are free to overshoot.
What Custom PRD build generates in one line
Custom PRD build is a browser-only CSS easing workbench that turns dragged Bézier control points — or a bounce percentage — into a pasteable timing function plus duration, for example `transition: transform 450ms cubic-bezier(.34,1.56,.64,1) 0ms;`. That declaration is the entire output; there is no project to save, no account, and no export step.
The layout is deliberately split. Controls and the curve editor sit on the left, the live preview and code panel on the right, so the handle you drag and the CSS text it produces stay on screen together. That cause-and-effect pairing is the whole point of a tuning tool — you are not guessing which number moved.
Behind the curve sits a faint coordinate grid, and a small spring coil compresses visibly as bounce rises. The curve values are set in a mono face so x1, y1, x2, y2 are easy to compare against the spec. You can open Custom PRD build in any modern browser and start dragging immediately.
How do you use Custom PRD build step by step?
Start with the mode toggle. Pick spring if you want a physical feel and only care about how bouncy it looks; pick cubic-bezier if you already have four numbers or need to match a curve from a design file. The presets — linear, ease, ease-in, ease-out, ease-in-out, anticipate — are shortcuts, and choosing any of them overwrites handles you dragged by hand. Switching back to custom does not restore your previous curve, so copy the code first if it already looks right.
Set the duration next. The field clamps to an integer between 50 ms and 5000 ms and never goes blank, so typing 0 quietly gives you 50 ms rather than an invalid declaration. Delay accepts 0 to 2000 ms. For UI feedback, 150–450 ms is the usual working band; the 450 ms default is a reasonable starting point for a card that lifts on hover.
Then drag. In cubic-bezier mode the two handles expose x1, y1, x2, y2 with a live readout. The x values stay locked inside 0–1 because CSS requires it, while y1 and y2 are free to go negative or above 1 to create overshoot — the maths behind that shape is a Bézier curve.
Finally, click the preview card to replay the motion, adjust until it feels right, and hit Copy. The preview re-runs on every edit, which is how you compare 300 ms against 450 ms without pasting anything into a real project.
What the bounce slider actually changes
Bounce is a percentage from 0 to 100 and is only active in spring mode. At 0 the curve collapses to ease-out — cubic-bezier(0,0,.58,1) — so there is no overshoot at all. At the 35% default the output is cubic-bezier(.34,1.56,.64,1), the familiar back-out shape that travels past its target and settles.
Raising the value pushes y2 further above 1 and lengthens the settle. A high bounce reads as playful; a low one reads as brisk. The curve does the talking, so resist the urge to describe it in words — drag and watch.
Two edge cases catch people out. First, bounce only drives the generated handles, so once you switch to cubic-bezier mode and drag manually, the slider no longer describes what you see. Second, overshoot is proportional: a curve that looks charming on a 200 px card can look broken on a full-width panel, because the same percentage overshoots a much larger pixel distance.
Why the tool sometimes outputs linear() instead of cubic-bezier()
cubic-bezier() describes one curve between two points, so it can overshoot once but it cannot oscillate. When the bounce you ask for implies several diminishing bounces — a spring that physically bounces two or three times — Custom PRD build samples that motion and emits a linear() timing function instead, something like `linear(0, .12, .41, 1.02, ...)`.
linear() takes a list of stops and interpolates between them, which reproduces a multi-lobe spring far more faithfully than a single cubic curve can. The cost is length: a lively spring can run to a dozen or more numbers, so the declaration is longer and noticeably less readable in a code review.
As of 2026, linear() is supported in current Chrome, Safari, and Firefox, but older browser targets may ignore it entirely and fall back to no easing at all. The W3C's CSS Easing Functions Level 2 defines both formats; check your own support matrix before shipping a linear() curve to a broad audience.
Common mistakes when tuning CSS easing
The biggest source of jank is not the curve at all — it is the property you animate. A perfect cubic-bezier on `width`, `top`, or `margin` still stutters, because those trigger layout on every frame. The preview animates transform and opacity for exactly that reason, and the code you copy is meant for the same two properties.
Duration creep is the next trap. Once a curve looks good it is tempting to run it at 900 ms for drama, but UI feedback past roughly half a second starts to feel laggy the third time a user triggers it.
Ignoring reduced motion is the third. Wrap the transition in a `prefers-reduced-motion` check and fall back to a short, non-overshooting fade rather than removing the feedback entirely.
Last, remember the stage is a card on a page, not your product. A curve that depends on precise timing feels different on a laptop at 60 Hz and on a mid-range phone, so test the real component before you commit the number to a design system.
Limits of a timing-function workbench
It is a generator, not an animation editor. It will not sequence keyframes, stagger a list of items, or export a JavaScript spring library. If you need physics-driven motion in React or a game loop, a runtime spring library will serve you better than a copied timing function.
It also cannot tell you whether a curve suits your interface. Numbers like 450 ms and 1.56 are starting points, and the honest answer to 'what duration should this be' is 'measure it on the hardware your users actually hold'. Treat the preview as a comparison tool, not a verdict.
Everything is computed in the page with nothing stored, so a refresh clears your work — copy the declaration before you close the tab. If you need other one-off build helpers, the rest of OnlineFree.app works the same way: open, use, close.
Frequently asked questions
Is Custom PRD build free, and do I need an account?
Yes, Custom PRD build is free and needs no account, signup, or install. The easing maths runs inside your browser, so your curve values are never uploaded to generate the code. Site-level analytics are separate from the tool itself, so if that distinction matters for client work, check the privacy policy first. Open Custom PRD build in any modern browser to try it.
Does Custom PRD build work on a phone?
Yes, Custom PRD build is usable on a phone. On narrow screens the layout stacks vertically: the curve canvas comes first at full width with 44 px touch handles and pointer capture, the preview sits below it, and the Copy button sticks to the bottom of the viewport. The code block scrolls horizontally instead of wrapping, so the copied text stays valid.
What is the difference between spring and cubic-bezier mode in Custom PRD build?
Spring mode derives the control points from the bounce percentage, so you tune feel with a single slider and get values like cubic-bezier(.34,1.56,.64,1). Cubic-bezier mode hands you the two handles directly with a live x1, y1, x2, y2 readout. Both modes produce the same CSS; spring is faster to dial in, cubic-bezier is more precise.
Why did Custom PRD build give me linear() instead of cubic-bezier()?
Because the bounce you set implied more than one overshoot. A cubic-bezier() curve can rise above 100% once, but it cannot oscillate, so when the spring would bounce twice Custom PRD build samples that motion into a linear() list of stops. The result is more accurate but longer, sometimes a dozen numbers.
Can a CSS cubic-bezier() overshoot its target value?
Yes. In cubic-bezier(x1, y1, x2, y2) the x values must sit between 0 and 1, but the y values are unconstrained, so a y2 above 1 makes the animation travel past its end value and settle back. That single overshoot is what gives Custom PRD build's default curve its spring feel.