slowmo

Slow down, pause, or speed up time of any web content.

Debug animations, study cool demos, and make games easier or harder.

Install

``bash
npm install slowmo
`

> Chrome extension coming soon - control any website's animations without writing code.

Quick Start

`js
import slowmo from "slowmo";

slowmo(0.5); // half speed, that's it
`

Full API

`js
import slowmo from "slowmo";

slowmo(0.5); // half speed
slowmo(2); // double speed
slowmo(0); // pause
slowmo(1); // normal

slowmo.pause(); // pause all
slowmo.play(); // resume
slowmo.reset(); // back to 1×
slowmo.getSpeed(); // current speed
`

$3

| Speed | Effect |
| ----- | -------------------------------- |
| 0 | Paused |
| 0.1 | 10x slower (great for debugging) |
| 0.5 | Half speed |
| 1 | Normal |
| 2 | Double speed |

$3

Add data-slowmo-exclude to opt out specific elements:

`html



`

Dial Component

Visual UI control for slowmo speed - draggable, rotatable dial.

$3

`js
import { setupDial, shutdownDial } from "slowmo/dial";

setupDial(); // Mount dial to body (fixed position, draggable)
shutdownDial(); // Remove and cleanup
`

$3

`jsx
import { Slowmo } from "slowmo/react";

function App() {
return ; // Handles lifecycle automatically
}
`

Dial Features:

- Center: Pause/play toggle
- Middle ring: Drag to reposition
- Outer edge: Rotate to change speed (uses Pointer Lock)
- Position persists in localStorage

What It Works With

| Type | How |
| ---------------------- | -------------------------------------------- |
| CSS Animations | Web Animations API playbackRate |
| CSS Transitions | Web Animations API playbackRate |
| Videos & Audio | playbackRate property |
| requestAnimationFrame | Patched timestamps |
| performance.now() | Returns virtual time |
| Date.now() | Returns virtual epoch time |
| setTimeout/setInterval | Scaled delays |
| GSAP | globalTimeline.timeScale() (auto-detected) |
| Three.js | Uses rAF, works automatically |
| Framer Motion/Motion | Uses Date.now(), works automatically |
| Canvas animations | Uses rAF, works automatically |

Animation Recreation (AI-Powered)

slowmo includes an AI-powered animation recreation skill that can analyze videos/GIFs and generate code to recreate them.

$3

`bash


Install globally or use npx

npx slowmo-recreate ./animation.mp4 --runtime framer-motion --api-key $GEMINI_API_KEY

Generate GSAP code

npx slowmo-recreate ./demo.gif -r gsap -o animation.js

Analyze only (no code generation)

npx slowmo-recreate ./video.mp4 -a --format json
`

$3

`js
import { recreate } from "slowmo/recreate";

const result = await recreate({
source: "./animation.mp4",
runtime: "framer-motion", // or 'gsap', 'css', 'remotion', etc.
apiKey: process.env.GEMINI_API_KEY,
});

console.log(result.code.code); // Generated animation code
console.log(result.analysis); // AI analysis of the animation
`

$3

| Runtime | Description |
| --------------- | ------------------------------- |
| css | Native CSS @keyframes |
| framer-motion | React animation library |
| gsap | Professional-grade animation |
| remotion | React video framework |
| motion-one | Lightweight animation library |
| anime | Anime.js |
| three | Three.js 3D animations |
| lottie | JSON animation format |
| react-spring | Spring-physics React animations |
| popmotion | Functional animation library |

$3

- Gemini (default) - Best for video understanding
- OpenAI - GPT-4 Vision
- Anthropic - Claude

Set your API key via environment variable (GEMINI_API_KEY, OPENAI_API_KEY, or ANTHROPIC_API_KEY`) or pass it directly.

Limitations

- Frame-based animations that don't use timestamps can't be smoothly slowed (they increment by a fixed amount each frame regardless of time)
- Libraries that cache time function references before slowmo loads may not be affected (the Chrome extension runs early to avoid this)
- Video/audio have browser-imposed limits (~0.0625x to 16x in Chrome)
- iframes won't be affected unless slowmo is also loaded inside them (the extension handles this automatically)
- Service Workers & Worklets run in separate threads that can't be patched (audio worklets, paint worklets, animation worklets)
- WebGL shaders with custom time uniforms need manual integration
- Server-synced animations that rely on server timestamps rather than local time

Contributing

Open to contributions! See CONTRIBUTING.md for development setup and Chrome extension testing instructions.

Inspiration

Inspired by agentation by Benji Taylor and his related blog posts [[1]](https://benji.org/annotating) [[2]](https://benji.org/agentation)

License

MIT

---

website · github · npm