Real simulation you can drop into any site with two lines. Fluid, particles and physics, computed every frame.
This page runs the same file you download. If it works here, it works on your site.
Showpiece
Add this to your site in about a minute
Genuinely easy: download two files, paste two lines, add one attribute. No npm, no build step, no framework, nothing to learn.
<link rel="stylesheet" href="overshoot.css">
<script src="overshoot.js" defer></script><div data-os="morph"
data-os-words="ONE, TWO, THREE"
style="height:320px"></div>If you can embed a video, you can do this. Works in plain HTML, Webflow, Framer, WordPress and Squarespace. Retheme by overriding the--os-accentcustom property.
A browser extension that previews any effect on any element of any page, then hands you the code for it.
Right-click anything
On your own site, in your own browser. Pick an effect from the menu.
Tune it in place
It runs on the real element straight away. Sliders adjust it live.
Take the code
Copy the markup, or an AI prompt carrying the exact selector for that element.
Not on the Chrome Web Store yet, so there is nothing to install today. It is built and working, and it will be free when it lands. Previews are live only, which is exactly why it gives you code to keep rather than pretending to save anything.
Most animation code reaches for ease-in-out and calls it done. That curve is symmetrical, which is exactly why it reads as a state change rather than as a physical object arriving somewhere.
Nothing here plays back a recorded timeline. A spring is integrated, a noise field is evaluated, a curve is applied, all against live input. Drag the handles and watch what happens to the sense of weight.
Drag either handle. Pull one above the box to give the curve real overshoot.
Browser default
ease-in-outAuthored curve
yours, aboveSame distance, same duration, three properties moving at once. The only difference is the curve.
Pointer
position and velocity
Scroll
progress and direction
Time
drift that never loops
Motion settings
reduced-motion flag
Solved every frame
60 times a second
Springs and fields
solved this frame, not tweened
Canvas pixels
fluid, fog, flocks, water
CSS variables
spotlights and glares, zero re-render
Nudge any card. It springs back, because that is the whole point.
The commercial part
The alternatives
| Site builders | Free snippets | Overshoot | |
|---|---|---|---|
| Runs in your codebaseNo proprietary runtime or hosting to adopt | |||
| Pointer-driven simulationSpring solvers and noise fields, computed live | |||
| Coherent across sectionsOne token scale, so combinations never fight | |||
| Does not look templatedRecognisable sameness is the builder's tax | |||
| Accessibility handledReduced-motion branch written, not bolted on | |||
| Free to startReal finished work before you pay anything |
Builders are faster to start and genuinely better if you never want to touch code. This exists for the case where the site has to live in your repo and must not look like everyone else's.
Pricing
Rather than take pre-orders for something that does not exist, the paid plans are listed and disabled until they ship.
Free
forever, no card
The whole free collection, working today
$79
one-time, planned
The system behind the effects
$299
one-time, planned
For studios shipping client work
When the paid tiers open they will be one-time purchases and the licence will not expire. What you keep paying for is new effects, not continued access to the ones you already have.
Including the parts that are not finished.
No. The two files are public: download them from any effect's install panel, or grab overshoot.js and overshoot.css directly. Nothing is gated behind an account.
You need to be able to paste two lines into your page and add one attribute to an element. That is closer to embedding a YouTube video than to programming. There is no npm, no build step, and no framework. It works in a plain HTML file, and in Webflow, Framer, WordPress or Squarespace wherever you can add custom code.
Link overshoot.css and overshoot.js once per page. Then mark any element with an attribute, for example data-os="magnetic" on a button, or data-os="scramble" on a heading. Options are plain attributes like data-os-strength="20". Every effect's exact snippet is on this page under its demo.
Real. This page loads the same overshoot.js you download and lets it bind to the demo markup. The hero background, every effect on the stage, and the panel on the sign-in page are all the library running live. If something looks broken here, the product is broken, which is deliberate.
Right now, only in your own browser, in localStorage. There is no server, no database and no analytics behind it, which also means an account does not follow you to another device and clearing your browser data removes it. Real hosted accounts with proper sign-in are planned, and until they exist you should treat the account area as a local convenience rather than secure storage.
Not yet. The button is in place but it does not contact Google, it just creates the same local browser session. Proper OAuth arrives with the hosted accounts.
Yes, on as many projects as you like, including work you are paid to deliver, with no attribution required. You can modify the files freely. The one thing the licence does not allow is redistributing the files themselves as a download, template or asset pack, which is the difference between building with them and republishing them.
Nothing technical, and any product that claims otherwise is misleading you. Code delivered to a browser can always be read and copied. What the paid tiers actually sell is the things a leak cannot hand over: updates as new effects ship, the licence that lets an agency use them for clients without risk, and support when something breaks on a real project. Leaked files go stale the moment the next release lands, and a studio billing a client is not going to run unlicensed assets. Pricing accordingly is more honest than pretending a paywall is unbreakable.
They are listed and deliberately disabled, because nothing is built behind them yet. You cannot buy them and no payment system is connected. When they open they will be one-time purchases rather than subscriptions, and licences will not expire.
The whole library is about 9kb of JavaScript gzipped plus roughly 2kb of CSS, with no dependencies. Every effect checks prefers-reduced-motion and degrades to a static, readable state, so nothing loops or moves for someone who has asked their system to stop animation.
The canvas effects run one shared animation frame for the whole page rather than one per element, and pointer positions are written straight to the DOM rather than through a framework. Load the script with defer, as the snippet does, and it will not block your page rendering.