slowmo 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Decode
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,120 @@
+# slowmo
+
+Slow down any web animation with one line of code.
+
+<!-- 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
+
+## Install
+
+```bash
+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>
+```
+
+## Quick Start
+
+```js
+import { slowmo } from 'slowmo';
+
+slowmo(0.5);  // Everything runs at 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
+
+```js
+import { slowmo } from 'slowmo';
+
+// Set speed (0.5 = half speed, 2 = double speed)
+slowmo(0.5);
+
+// Pause everything
+slowmo(0);
+
+// Back to normal
+slowmo(1);
+
+// Object API for more control
+slowmo.setSpeed(0.5);
+slowmo.pause();
+slowmo.play();
+slowmo.reset();
+slowmo.getSpeed();  // Returns 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:
+
+```html
+<div data-slowmo-exclude>
+  This animation runs at normal speed
+</div>
+```
+
+## 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
+- **Video/audio** have browser-imposed limits (~0.0625x to 16x in Chrome)
+
+## License
+
+MIT
+
+---
+
+<!-- TODO: Update with actual website URL -->
+[Website](https://slowmo.dev) · [GitHub](https://github.com/anthropics/slowmo) · [npm](https://www.npmjs.com/package/slowmo)

package/dist/index.d.ts

@@ -0,0 +1,49 @@
+/**
+ * slowmo - Universal slow-motion control for web animations
+ *
+ * This library intercepts time at multiple levels to slow down (or speed up)
+ * all animations on a web page.
+ *
+ * ## How it works:
+ *
+ * 1. **requestAnimationFrame patching**: We replace window.requestAnimationFrame
+ *    with a wrapper that passes modified timestamps to callbacks. Time-based
+ *    animations that use the timestamp parameter will automatically slow down.
+ *
+ * 2. **performance.now() patching**: We replace performance.now() to return
+ *    virtual time. Libraries that use this for timing will be affected.
+ *
+ * 3. **Web Animations API**: We poll document.getAnimations() and modify the
+ *    playbackRate of all Animation objects. This affects CSS animations,
+ *    CSS transitions, and element.animate() calls.
+ *
+ * 4. **Media elements**: We set playbackRate on video/audio elements.
+ *
+ * ## Limitations:
+ *
+ * - Frame-based animations (that increment by a fixed amount per frame without
+ *   using timestamps) cannot be smoothly slowed down. See IDEAS.md for a
+ *   potential "frame throttling" mode.
+ *
+ * - Animations created by libraries that cache their own time references
+ *   before we patch may not be affected.
+ */
+/**
+ * Main slowmo function - set speed directly.
+ *
+ * @example
+ * import { slowmo } from 'slowmo';
+ * slowmo(0.5);  // Half speed
+ * slowmo(0.1);  // 10x slower
+ * slowmo(2);    // Double speed
+ * slowmo(0);    // Pause
+ */
+export declare function slowmo(speed: number): void;
+export declare namespace slowmo {
+    var setSpeed: (speed: number) => void;
+    var pause: () => void;
+    var play: () => void;
+    var reset: () => void;
+    var getSpeed: () => number;
+}
+export default slowmo;

package/dist/slowmo.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});let l=1,o=!1,f=!1,d,r,p=0,c=0,b=0;const y=new WeakMap,g=new WeakMap;function m(i){if(o)return b;const e=i-c;return p+e*l}function k(){if(typeof document.getAnimations!="function")return;const i=document.getAnimations();for(const e of i){const a=e.effect;if((a==null?void 0:a.target)instanceof Element&&a.target.closest("[data-slowmo-exclude]"))continue;const t=y.get(e);if(t){e.playbackRate!==t.applied&&(t.original=e.playbackRate);const n=t.original*l;e.playbackRate!==n&&(e.playbackRate=n,t.applied=n)}else{const n=e.playbackRate,w=n*l;y.set(e,{original:n,applied:w}),e.playbackRate=w}o?e.playState==="running"&&e.pause():e.playState==="paused"&&e.play()}}function R(){document.querySelectorAll("video, audio").forEach(e=>{if(e.closest("[data-slowmo-exclude]"))return;const a=e;let t=g.get(a);if(t?a.playbackRate!==t.applied&&!o&&(t.original=a.playbackRate):(t={original:a.playbackRate,applied:a.playbackRate*l,wasPaused:!1},g.set(a,t)),o)!a.paused&&!t.wasPaused&&(t.wasPaused=!0,a.pause());else{t.wasPaused&&(t.wasPaused=!1,a.play());const n=t.original*l;a.playbackRate!==n&&(a.playbackRate=n,t.applied=n)}})}function A(){k(),R(),d(A)}function S(){if(f||typeof window>"u")return;d=window.requestAnimationFrame.bind(window),r=performance.now.bind(performance),c=r(),p=c;const i=e=>d(a=>{const t=m(a);o?window.requestAnimationFrame(e):e(t)});window.requestAnimationFrame=i,typeof globalThis<"u"&&(globalThis.requestAnimationFrame=i),performance.now=()=>m(r()),d(A),f=!0}function u(i){f||S();const e=r();if(p=m(e),c=e,l=i,o=i===0,o&&(b=p),k(),R(),typeof window.gsap<"u")try{window.gsap.globalTimeline.timeScale(i||.001)}catch{}}function T(){u(0)}function P(){o&&(c=r(),o=!1),u(l||1)}function F(){u(1)}function M(){return l}function s(i){u(i)}s.setSpeed=u;s.pause=T;s.play=P;s.reset=F;s.getSpeed=M;typeof window<"u"&&S();exports.default=s;exports.slowmo=s;

package/dist/slowmo.js

@@ -0,0 +1,90 @@
+let l = 1, o = !1, u = !1, d, s, f = 0, r = 0, b = 0;
+const y = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap();
+function m(n) {
+  if (o) return b;
+  const e = n - r;
+  return f + e * l;
+}
+function k() {
+  if (typeof document.getAnimations != "function") return;
+  const n = document.getAnimations();
+  for (const e of n) {
+    const a = e.effect;
+    if ((a == null ? void 0 : a.target) instanceof Element && a.target.closest("[data-slowmo-exclude]"))
+      continue;
+    const t = y.get(e);
+    if (t) {
+      e.playbackRate !== t.applied && (t.original = e.playbackRate);
+      const i = t.original * l;
+      e.playbackRate !== i && (e.playbackRate = i, t.applied = i);
+    } else {
+      const i = e.playbackRate, w = i * l;
+      y.set(e, { original: i, applied: w }), e.playbackRate = w;
+    }
+    o ? e.playState === "running" && e.pause() : e.playState === "paused" && e.play();
+  }
+}
+function R() {
+  document.querySelectorAll("video, audio").forEach((e) => {
+    if (e.closest("[data-slowmo-exclude]")) return;
+    const a = e;
+    let t = g.get(a);
+    if (t ? a.playbackRate !== t.applied && !o && (t.original = a.playbackRate) : (t = {
+      original: a.playbackRate,
+      applied: a.playbackRate * l,
+      wasPaused: !1
+    }, g.set(a, t)), o)
+      !a.paused && !t.wasPaused && (t.wasPaused = !0, a.pause());
+    else {
+      t.wasPaused && (t.wasPaused = !1, a.play());
+      const i = t.original * l;
+      a.playbackRate !== i && (a.playbackRate = i, t.applied = i);
+    }
+  });
+}
+function A() {
+  k(), R(), d(A);
+}
+function S() {
+  if (u || typeof window > "u") return;
+  d = window.requestAnimationFrame.bind(window), s = performance.now.bind(performance), r = s(), f = r;
+  const n = (e) => d((a) => {
+    const t = m(a);
+    o ? window.requestAnimationFrame(e) : e(t);
+  });
+  window.requestAnimationFrame = n, typeof globalThis < "u" && (globalThis.requestAnimationFrame = n), performance.now = () => m(s()), d(A), u = !0;
+}
+function c(n) {
+  u || S();
+  const e = s();
+  if (f = m(e), r = e, l = n, o = n === 0, o && (b = f), k(), R(), typeof window.gsap < "u")
+    try {
+      window.gsap.globalTimeline.timeScale(n || 1e-3);
+    } catch {
+    }
+}
+function T() {
+  c(0);
+}
+function P() {
+  o && (r = s(), o = !1), c(l || 1);
+}
+function F() {
+  c(1);
+}
+function h() {
+  return l;
+}
+function p(n) {
+  c(n);
+}
+p.setSpeed = c;
+p.pause = T;
+p.play = P;
+p.reset = F;
+p.getSpeed = h;
+typeof window < "u" && S();
+export {
+  p as default,
+  p as slowmo
+};

package/dist/slowmo.umd.cjs

@@ -0,0 +1 @@
+(function(s,i){typeof exports=="object"&&typeof module<"u"?i(exports):typeof define=="function"&&define.amd?define(["exports"],i):(s=typeof globalThis<"u"?globalThis:s||self,i(s.slowmo={}))})(this,function(s){"use strict";let i=1,l=!1,m=!1,r,f,c=0,u=0,y=0;const g=new WeakMap,b=new WeakMap;function w(n){if(l)return y;const e=n-u;return c+e*i}function k(){if(typeof document.getAnimations!="function")return;const n=document.getAnimations();for(const e of n){const t=e.effect;if((t==null?void 0:t.target)instanceof Element&&t.target.closest("[data-slowmo-exclude]"))continue;const a=g.get(e);if(a){e.playbackRate!==a.applied&&(a.original=e.playbackRate);const o=a.original*i;e.playbackRate!==o&&(e.playbackRate=o,a.applied=o)}else{const o=e.playbackRate,T=o*i;g.set(e,{original:o,applied:T}),e.playbackRate=T}l?e.playState==="running"&&e.pause():e.playState==="paused"&&e.play()}}function R(){document.querySelectorAll("video, audio").forEach(e=>{if(e.closest("[data-slowmo-exclude]"))return;const t=e;let a=b.get(t);if(a?t.playbackRate!==a.applied&&!l&&(a.original=t.playbackRate):(a={original:t.playbackRate,applied:t.playbackRate*i,wasPaused:!1},b.set(t,a)),l)!t.paused&&!a.wasPaused&&(a.wasPaused=!0,t.pause());else{a.wasPaused&&(a.wasPaused=!1,t.play());const o=a.original*i;t.playbackRate!==o&&(t.playbackRate=o,a.applied=o)}})}function A(){k(),R(),r(A)}function S(){if(m||typeof window>"u")return;r=window.requestAnimationFrame.bind(window),f=performance.now.bind(performance),u=f(),c=u;const n=e=>r(t=>{const a=w(t);l?window.requestAnimationFrame(e):e(a)});window.requestAnimationFrame=n,typeof globalThis<"u"&&(globalThis.requestAnimationFrame=n),performance.now=()=>w(f()),r(A),m=!0}function p(n){m||S();const e=f();if(c=w(e),u=e,i=n,l=n===0,l&&(y=c),k(),R(),typeof window.gsap<"u")try{window.gsap.globalTimeline.timeScale(n||.001)}catch{}}function h(){p(0)}function P(){l&&(u=f(),l=!1),p(i||1)}function F(){p(1)}function M(){return i}function d(n){p(n)}d.setSpeed=p,d.pause=h,d.play=P,d.reset=F,d.getSpeed=M,typeof window<"u"&&S(),s.default=d,s.slowmo=d,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "slowmo",
+  "version": "0.1.0",
+  "description": "Universal slow-motion control for web animations - CSS, videos, GSAP, Three.js, and more",
+  "type": "module",
+  "main": "./dist/slowmo.cjs",
+  "module": "./dist/slowmo.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/slowmo.js",
+      "require": "./dist/slowmo.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite demo",
+    "build": "vite build",
+    "build:demo": "vite build --config vite.demo.config.ts",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "animation",
+    "slow-motion",
+    "slowmo",
+    "debug",
+    "css-animation",
+    "gsap",
+    "three.js",
+    "video",
+    "framer-motion"
+  ],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11",
+    "vite-plugin-dts": "^3.7.1",
+    "vitest": "^1.2.1",
+    "jsdom": "^24.0.0",
+    "@vitest/coverage-v8": "^1.2.1"
+  },
+  "peerDependencies": {
+    "gsap": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "gsap": {
+      "optional": true
+    }
+  },
+  "packageManager": "pnpm@10.24.0+sha512.01ff8ae71b4419903b65c60fb2dc9d34cf8bb6e06d03bde112ef38f7a34d6904c424ba66bea5cdcf12890230bf39f9580473140ed9c946fef328b6e5238a345a"
+}