Real simulation you can drop into any site with two lines. Fluid, particles and physics, computed every frame.
That is a live fluid solve, not a video. Drag your cursor through it.
This page runs the same file you download. If it works here, it works on your site.
Showpiece
Type is rasterised, sampled into thousands of particles, and sprung to the next word. Push the letters apart and they reassemble.
Add this to your site
Two files, one attribute. No npm, no build step, no framework.
<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>Works in plain HTML, Webflow, Framer, WordPress and Squarespace. Retheme by overriding the--os-accentcustom property.
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. The only difference is the curve, and it is the entire difference between motion that reads as a transition and motion that reads as weight.
Computed
Springs and fields are solved per frame, so the response scales with how fast you actually move.
Tokenised
Durations and easings live in one scale. Retiming a whole site is a single edit.
Guarded
Every scene ships a reduced-motion branch and a mobile fallback, written rather than bolted on.
Keep scrolling.
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
$99
one-time, planned
The system behind the effects
$299
one-time, planned
For studios shipping client work
When the paid tiers do open they will be one-time purchases, and licences will not expire. Anything you ship stays covered.
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. The free collection is MIT licensed, so personal and commercial use are both fine, on as many projects as you like, with no attribution required. You can also modify it freely.
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.