slowmo

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

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

Install

npm install slowmo

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

Quick Start

import slowmo from "slowmo";

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

Full API

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

Speed Guide

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

Excluding Elements

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

<div data-slowmo-exclude>This animation runs at normal speed</div>

Dial Component

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

Vanilla JS

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

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

React

import { Slowmo } from "slowmo/react";

function App() {
  return <Slowmo />; // 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.

CLI Usage

# 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

Programmatic Usage

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

Supported Runtimes

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

AI Backends

• 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] [2]

License

MIT

---

website · github · npm