Motion — Duration, Easing & Motion Spec

Motion — Duration, Easing & Motion Spec — a premium, 100% offline digital tool by Aceplore. Runs entirely in your browser: no accounts, no subscriptions, your data never leaves your device.

A private, offline specification desk for motion — durations derived from distance, easing curves actually solved rather than sketched, and a stagger that counts intervals correctly — 32 tools in one, with the CSS each motion implies generated from the numbers.

32 built-in tools in one app. A motion list holding the element, the distance it travels, its size, its duration, its curve, its delay and the property it animates, with the CSS each one implies; a duration scale drawn with every step named, a distance-duration view deriving a duration from the journey at a rate you set — 120 ms plus 0.4 ms per pixel over 320 px is 248 ms, clamped to your range — a size-duration view for large elements that read slower, and an outliers view naming motions that sit off the scale with the nearest step suggested; a curve library where each cubic-bezier is drawn as an SVG curve with its control points, and evaluated by actually SOLVING x(t) for the sample time by Newton–Raphson and reading y(t) — cubic-bezier(0.4, 0, 0.2, 1) at x = 0.5 returns y = 0.775561, with the residual reported so the solve can be trusted; a velocity profile showing where a curve peaks, an overshoot view naming curves whose control points take the value past 1 as overshoot rather than treating them as errors, and the standard curves stated as their real bezier values so nothing is a mystery; entrance and exit lists with an asymmetry view giving the ratio between them, sequences with a drawn timeline, a STAGGER view that counts N−1 intervals — 8 items 40 ms apart with a 248 ms duration finishes at 528 ms, not 568 — a total-duration view, a frames view converting to frames at your frame rate and stating the rounding it forces, an interaction budget, and a reduced-motion view giving what each motion becomes rather than merely switching it off; plus CSS and CSV exports, a JSON backup and a Method page holding every formula and the bezier evaluation.

Bezier evaluation. x(t) is solved for the sample time by Newton–Raphson and y(t) read from it. cubic-bezier(0.4, 0, 0.2, 1) at x = 0.5 is y = 0.775561311116, and the residual is printed so you can see the solve converged rather than taking it on trust.

Distance → duration. 120 ms plus 0.4 ms per pixel over 320 px is 248 ms, clamped to 100–500. Both the base and the per-pixel rate are yours, and every motion recomputes when they change.

Stagger. 8 items 40 ms apart with a 248 ms duration: the last starts at 280 ms and the sequence ends at 528 ms. The naive 568 ms is shown beside it, because this off-by-one appears in almost every hand-written stagger.

What's included:

• Motion.html
• Quick-Start-Guide.html
• How-To-Use-Guide.html
• README.txt
• LICENSE.txt

Includes a personalized welcome wizard, an interactive guided tour, a ⌘K command palette, light/dark themes with 8 accents, and one-click JSON backup & restore.

Motion is a specification, costing and record-keeping tool for design and production work. Every figure it reports is computed by a stated formula from the sizes, prices, counts and rates YOU enter, and every figure carries its UNIT, because px, pt, mm, bytes, milliseconds and dpi are different quantities and confusing them is the classic failure in this field. Where a geometry has to close — a grid against its container, a proration, a coverage matrix — it is reconciled rather than rounded, and a disagreement is reported instead of absorbed. Where a rule comes from a published standard or an industry convention, the standard is named and its parameters are yours to change; where a figure rests on something you assumed rather than measured, it is labelled an assumption at the point of use. Nothing here is a guarantee of a passed press check, a performance score, an approved brand or an available name, and none of it is legal advice — trademark, licensing and accessibility obligations differ by country and by contract, and availability and registration must be confirmed with the registries and rights holders themselves. You are solely responsible for what you send to press, ship to a browser or put your name to.