slowmo 0.4.0 → 0.7.0

package/README.md

@@ -1,19 +1,16 @@
 # slowmo
 
-Slow down any web animation with one line of code.
+Control time on any web page. Debug, study, or speedrun animations.
 
 <!-- TODO: Add hero GIF/video here -->
 <!-- ![slowmo demo](./assets/demo.gif) -->
 
-[![npm version](https://img.shields.io/npm/v/slowmo.svg)](https://www.npmjs.com/package/slowmo)
-[![bundle size](https://img.shields.io/bundlephobia/minzip/slowmo)](https://bundlephobia.com/package/slowmo)
-[![license](https://img.shields.io/npm/l/slowmo.svg)](https://github.com/anthropics/slowmo/blob/main/LICENSE)
-
 ## Why?
 
 - **Debug animations** - Slow things down to see exactly what's happening
-- **Record demos** - Capture smooth slow-motion footage for product videos
-- **Create effects** - Add dramatic slow-mo moments to your UI
+- **Study details** - Appreciate the little details on why something looks so neat
+- **Speedrun UIs** - Skip or skim quickly through any animation gated experience
+- **Game difficulty** - Slower gives you better reflexes, faster challenges you more
 
 ## Install
 
@@ -21,51 +18,20 @@ Slow down any web animation with one line of code.
 npm install slowmo
 ```
 
-```bash
-pnpm add slowmo
-```
-
-```bash
-yarn add slowmo
-```
-
-Or use a CDN:
-
-```html
-<script type="module">
-  import { slowmo } from 'https://esm.sh/slowmo';
-  slowmo(0.5);
-</script>
-```
+> **Chrome Extension coming soon** - Control any website's animations without writing code.
 
 ## Quick Start
 
 ```js
-import { slowmo } from 'slowmo';
+import { slowmo } from "slowmo";
 
-slowmo(0.5);  // Everything runs at half speed
+slowmo(0.5); // That's it, now anything that moves will go half speed.
 ```
 
-That's it. CSS animations, videos, canvas, GSAP, Three.js, Framer Motion - all slowed down automatically.
-
-## 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 |
-| GSAP | `globalTimeline.timeScale()` (auto-detected) |
-| Three.js | Uses rAF, works automatically |
-| Framer Motion | Uses Web Animations API, works automatically |
-| Canvas animations | Uses rAF, works automatically |
-
-## API
+## Full API
 
 ```js
-import { slowmo } from 'slowmo';
+import { slowmo } from "slowmo";
 
 // Set speed (0.5 = half speed, 2 = double speed)
 slowmo(0.5);
@@ -81,34 +47,58 @@ slowmo.setSpeed(0.5);
 slowmo.pause();
 slowmo.play();
 slowmo.reset();
-slowmo.getSpeed();  // Returns current speed
+slowmo.getSpeed(); // Returns current speed
 ```
 
 ### Speed Guide
 
-| Speed | Effect |
-|-------|--------|
-| `0` | Paused |
+| Speed | Effect                           |
+| ----- | -------------------------------- |
+| `0`   | Paused                           |
 | `0.1` | 10x slower (great for debugging) |
-| `0.5` | Half speed |
-| `1` | Normal |
-| `2` | Double speed |
+| `0.5` | Half speed                       |
+| `1`   | Normal                           |
+| `2`   | Double speed                     |
 
 ### Excluding Elements
 
 Add `data-slowmo-exclude` to opt out specific elements:
 
 ```html
-<div data-slowmo-exclude>
-  This animation runs at normal speed
-</div>
+<div data-slowmo-exclude>This animation runs at normal speed</div>
 ```
 
+## 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                         |
+| GSAP                  | `globalTimeline.timeScale()` (auto-detected) |
+| Three.js              | Uses rAF, works automatically                |
+| Framer Motion         | Uses Web Animations API, works automatically |
+| Canvas animations     | Uses rAF, works automatically                |
+
 ## 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 references** before slowmo loads may not be affected
+- **Libraries that cache time function references** before slowmo loads may not be affected
 - **Video/audio** have browser-imposed limits (~0.0625x to 16x in Chrome)
+- **iframes** won't be affected unless slowmo is also loaded inside them
+- **Web Workers & Worklets** run in separate threads with their own timing APIs that can't be patched from the main thread (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](./CONTRIBUTING.md) for development setup and Chrome extension testing instructions.
+
+## Inspiration
+
+Inspired by [agentation](https://agentation.dev/) by [Benji Taylor](https://x.com/BenjiTaylor) and his related blog posts [[1]](https://benji.org/annotating) [[2]](https://benji.org/agentation)
 
 ## License
 
@@ -117,4 +107,5 @@ MIT
 ---
 
 <!-- TODO: Update with actual website URL -->
-[Website](https://slowmo.dev) · [GitHub](https://github.com/anthropics/slowmo) · [npm](https://www.npmjs.com/package/slowmo)
+
+[website](https://slowmo.dev) · [github](https://github.com/seflless/slowmo) · [npm](https://www.npmjs.com/package/slowmo)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slowmo",
-  "version": "0.4.0",
+  "version": "0.7.0",
   "description": "Universal slow-motion control for web animations - CSS, videos, GSAP, Three.js, and more",
   "type": "module",
   "main": "./dist/slowmo.cjs",