Tools
Overshoot preview
ToolsBase44 Redesign Rumble · #3

Overshoot

A motion lab for designers — tune the spring by feel, race it against any curve, leave with the CSS.

Open the live app Built on Base44 — start your own, opens in a new tabBase44 links on this page are affiliate links. If you sign up through one, Dean may earn a commission at no extra cost to you.

Figma can draw a bézier. Nothing lets you feel a spring, so UI motion gets handed to a developer as "make it bouncier" and they guess a cubic-bezier. Overshoot solves the damped harmonic oscillator live: drag stiffness, damping, mass and initial velocity until the card moves the way you mean, race your curve against ease-in-out on identical elements with the same start gun, then copy the CSS, Tailwind, Framer Motion, Web Animations or design tokens. Springs export as linear(), because a cubic-bézier passes its target once at most and cannot oscillate — every tool that hands you a bézier is quietly rounding your spring off. Built on the mandatory template for the Base44 Redesign Rumble, where it placed third. No account, no backend, nothing uploaded.

Built

2026-09-18

What makes it work

  • Springs are solved analytically across all three damping regimes, then sampled across the settle window and thinned with Ramer–Douglas–Peucker into a linear() stop list — 20 stops, 0.372% maximum reconstruction error against the true curve
  • The stage plays the exact easing string it exports through the Web Animations API, so what you watch is what you paste; an earlier build sampled the curve over one second while shipping the settle time as the duration, and the motion ran 2.4× fast then held
  • Grab the card and throw it: the pointer's release velocity is measured and becomes the spring's initial velocity, so the number in the export came from your hand
  • Light and dark with five palettes, driven entirely by data attributes on the root and CSS custom properties, so the curve graph and the stage re-read themselves with no second implementation
  • Everything runs in the browser — one entity, no backend function, no network call; saved curves and your own artwork live in IndexedDB and never leave the tab

How it gets made

Nine parts, in the same order, every time.

Every build on this site comes out of the same structure, whether it is a game, a ledger or a suite of tools. The method is published in full, and so are the prompts I am allowed to publish.

Read the method
A Trusted Media photograph: someone at a desk by a window with a coffee, looking up from the work

Coffee and a problem

More tools

Bubs Daily preview

Bubs Daily

The calm baby tracker — two taps, one-handed, in the dark, shared properly between both parents.

15 entities
Remote Work Anywhere preview

Remote Work Anywhere

A 0–100 Work-From-Here score built only from filed field reports — never scraped, never estimated.

22 entities

The Vault

You've seen the apps. Take the prompts.

Anyone can describe an app to an AI and get something back. The difference is in the structure — and the structure is what's written down in here.

Every build prompt on this page

Full text, not summaries. Copy and run.

313 production Claude skills

Installed, organised, documented.

The scaffold and the method

How the prompts are structured, so you can write your own.

Unlock the Vault — £79/mo

Cancel any time. Or read the free prompts first — they're the same standard as the paid ones, which is rather the point.