@maxigarcia/theme-transitions 0.2.0

package/README.md

@@ -0,0 +1,61 @@
+# @maxigarcia/theme-transitions
+
+Lightweight, CSS-first theme transitions for the web. Wrap your theme change in the [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) and reveal the new theme with a **circular** or **sweep** animation—no animation framework required.
+
+## Install
+
+```bash
+npm install @maxigarcia/theme-transitions
+```
+
+## Animations
+
+| Technique       | Docs                                                             |
+| --------------- | ---------------------------------------------------------------- |
+| Circular reveal | [src/circular-reveal/README.md](./src/circular-reveal/README.md) |
+| Sweep reveal    | [src/sweep-reveal/README.md](./src/sweep-reveal/README.md)       |
+
+Each module has its own README with setup, API, and usage examples.
+
+## Package exports
+
+| Import                                                    | Purpose                                                      |
+| --------------------------------------------------------- | ------------------------------------------------------------ |
+| `@maxigarcia/theme-transitions`                           | `onCircularRevealAnimation`, `onSweepRevealAnimation`, types |
+| `@maxigarcia/theme-transitions/circular-reveal/index.css` | Styles for circular reveal                                   |
+| `@maxigarcia/theme-transitions/sweep-reveal/index.css`    | Styles for sweep reveal                                      |
+
+## Live demo
+
+See the [app package](../app/) in this monorepo for an interactive landing page with both techniques.
+
+```bash
+# from monorepo root
+npm install
+npm run dev
+```
+
+## Development
+
+From the monorepo root:
+
+```bash
+npm run build -w @maxigarcia/theme-transitions
+# or: nx run @maxigarcia/theme-transitions:build
+npm run lint -w @maxigarcia/theme-transitions
+```
+
+### Versioning & publish (Nx Release)
+
+Use [Conventional Commits](https://www.conventionalcommits.org/) for changes under this package (`feat`, `fix`, `perf`, etc.). From the monorepo root:
+
+```bash
+npm run version-packages   # bump version + changelog (no publish)
+npm run release            # publish to npm
+```
+
+CI on `main` versions and tags both projects, but only publishes this package to npm. See the [root README](../../README.md#releasing).
+
+## Browser support
+
+Requires [View Transitions](https://caniuse.com/view-transitions) for animated reveals. Unsupported browsers still apply the theme change without animation.

package/dist/circular-reveal/index.css

@@ -0,0 +1,49 @@
+@keyframes circular-reveal {
+  from {
+    clip-path: circle(0% at var(--theme-reveal-x, 50%) var(--theme-reveal-y, 50%));
+  }
+  to {
+    clip-path: circle(150% at var(--theme-reveal-x, 50%) var(--theme-reveal-y, 50%));
+  }
+}
+
+@keyframes circular-reveal-blur {
+  from {
+    clip-path: circle(0% at var(--theme-reveal-x, 50%) var(--theme-reveal-y, 50%));
+    filter: blur(var(--theme-reveal-blur, 12px));
+  }
+  to {
+    clip-path: circle(150% at var(--theme-reveal-x, 50%) var(--theme-reveal-y, 50%));
+    filter: blur(0);
+  }
+}
+
+html.circular-reveal::view-transition-old(root),
+html.circular-reveal::view-transition-new(root) {
+  mix-blend-mode: normal;
+}
+
+html.circular-reveal::view-transition-old(root) {
+  animation: none;
+  z-index: 0;
+}
+
+html.circular-reveal::view-transition-new(root) {
+  z-index: 1;
+  animation: circular-reveal 0.5s ease-in-out;
+}
+
+html.circular-reveal--blur-circle::view-transition-new(root) {
+  animation: circular-reveal-blur 0.5s ease-in-out;
+}
+
+/* Reduce motion */
+@media (prefers-reduced-motion: reduce) {
+  html.circular-reveal::view-transition-new(root) {
+    animation: none;
+  }
+
+  html.circular-reveal--blur-circle::view-transition-new(root) {
+    animation: none;
+  }
+}

package/dist/circular-reveal/index.d.ts

@@ -0,0 +1,12 @@
+export interface ThemeRevealOrigin {
+    clientX: number;
+    clientY: number;
+}
+export interface CircularRevealOptions {
+    /** Blur inside the expanding circle; clears as the reveal finishes. */
+    blurCircle?: boolean;
+    /** Blur radius when `blurCircle` is true. Defaults to `12px`. */
+    blurAmount?: string;
+}
+export declare function onCircularRevealAnimation(apply: () => void, origin: ThemeRevealOrigin, options?: CircularRevealOptions): void;
+//# sourceMappingURL=index.d.ts.map

package/dist/circular-reveal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/circular-reveal/index.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,qBAAqB;IACpC,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,MAAM,IAAI,EACjB,MAAM,EAAE,iBAAiB,EACzB,OAAO,CAAC,EAAE,qBAAqB,GAC9B,IAAI,CAmCN"}

package/dist/circular-reveal/index.js

@@ -0,0 +1,27 @@
+import { $html, $onTransitionEnd } from '../utils/index.js';
+export function onCircularRevealAnimation(apply, origin, options) {
+    const x = (origin.clientX / window.innerWidth) * 100;
+    const y = (origin.clientY / window.innerHeight) * 100;
+    const html = $html();
+    html.classList.add('circular-reveal');
+    if (options?.blurCircle) {
+        html.classList.add('circular-reveal--blur-circle');
+        if (options.blurAmount) {
+            html.style.setProperty('--theme-reveal-blur', options.blurAmount);
+        }
+    }
+    html.style.setProperty('--theme-reveal-x', `${x}%`);
+    html.style.setProperty('--theme-reveal-y', `${y}%`);
+    if (!document.startViewTransition) {
+        apply();
+        return;
+    }
+    document.startViewTransition(apply);
+    const animationComplete = () => {
+        html.style.removeProperty('--theme-reveal-x');
+        html.style.removeProperty('--theme-reveal-y');
+        html.style.removeProperty('--theme-reveal-blur');
+        html.classList.remove('circular-reveal', 'circular-reveal--blur-circle');
+    };
+    $onTransitionEnd(animationComplete, 600);
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './circular-reveal/index.js';
+export * from './sweep-reveal/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from './circular-reveal/index.js';
+export * from './sweep-reveal/index.js';

package/dist/sweep-reveal/index.css

@@ -0,0 +1,30 @@
+@keyframes sweep-reveal {
+  from {
+    clip-path: var(--theme-reveal-direction-from);
+  }
+  to {
+    clip-path: var(--theme-reveal-direction-to);
+  }
+}
+
+html.sweep-reveal::view-transition-old(root),
+html.sweep-reveal::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+html.sweep-reveal::view-transition-old(root) {
+  z-index: 0;
+}
+
+html.sweep-reveal::view-transition-new(root) {
+  z-index: 1;
+  animation: sweep-reveal 0.45s ease-in-out forwards;
+}
+
+/* Reduce motion */
+@media (prefers-reduced-motion: reduce) {
+  html.sweep-reveal::view-transition-new(root) {
+    animation: none;
+  }
+}

package/dist/sweep-reveal/index.d.ts

@@ -0,0 +1,3 @@
+export type SweepDirection = 'up' | 'down' | 'left' | 'right' | 'corner-top-left' | 'corner-top-right' | 'corner-bottom-left' | 'corner-bottom-right';
+export declare function onSweepRevealAnimation(apply: () => void, direction?: SweepDirection): void;
+//# sourceMappingURL=index.d.ts.map

package/dist/sweep-reveal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/sweep-reveal/index.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,cAAc,GACtB,IAAI,GACF,MAAM,GACN,MAAM,GACN,OAAO,GACP,iBAAiB,GACjB,kBAAkB,GAClB,oBAAoB,GACpB,qBAAqB,CAAC;AAE5B,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,MAAM,IAAI,EACjB,SAAS,GAAE,cAAqB,GAC/B,IAAI,CAkCN"}

package/dist/sweep-reveal/index.js

@@ -0,0 +1,29 @@
+import { $html, $onTransitionEnd } from '../utils/index.js';
+export function onSweepRevealAnimation(apply, direction = 'up') {
+    if (!document.startViewTransition) {
+        apply();
+        return;
+    }
+    const html = $html();
+    const directions = {
+        'up': ['inset(0 0 100% 0)', 'inset(0 0 0 0)'],
+        'down': ['inset(100% 0 0 0)', 'inset(0 0 0 0)'],
+        'left': ['inset(0 100% 0 0)', 'inset(0 0 0 0)'],
+        'right': ['inset(0 0 0 100%)', 'inset(0 0 0 0)'],
+        'corner-top-left': ['inset(0 100% 100% 0)', 'inset(0 0 0 0)'],
+        'corner-top-right': ['inset(0 0 100% 100%)', 'inset(0 0 0 0)'],
+        'corner-bottom-left': ['inset(100% 100% 0 0)', 'inset(0 0 0 0)'],
+        'corner-bottom-right': ['inset(100% 0 0 100%)', 'inset(0 0 0 0)'],
+    };
+    const [directionFrom, directionTo] = directions[direction] ?? directions.up;
+    html.classList.add('sweep-reveal');
+    html.style.setProperty('--theme-reveal-direction-from', directionFrom);
+    html.style.setProperty('--theme-reveal-direction-to', directionTo);
+    document.startViewTransition(apply);
+    const animationComplete = () => {
+        html.classList.remove('sweep-reveal');
+        html.style.removeProperty('--theme-reveal-direction-from');
+        html.style.removeProperty('--theme-reveal-direction-to');
+    };
+    $onTransitionEnd(animationComplete, 600);
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export declare function $html(): HTMLElement;
+export declare function $onTransitionEnd(callback: () => void, duration?: number): void;
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,wBAAgB,KAAK,gBAEpB;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,QAAQ,GAAE,MAAY,QAI5E"}

package/dist/utils/index.js

@@ -0,0 +1,8 @@
+export function $html() {
+    return document.documentElement;
+}
+export function $onTransitionEnd(callback, duration = 600) {
+    setTimeout(() => {
+        callback();
+    }, duration);
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@maxigarcia/theme-transitions",
+  "type": "module",
+  "version": "0.2.0",
+  "license": "ISC",
+  "homepage": "https://github.com/MaxiGarcia13/js-theme-animation-monorepo/tree/main/packages/theme-transitions#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MaxiGarcia13/js-theme-animation-monorepo.git"
+  },
+  "bugs": {
+    "url": "https://github.com/MaxiGarcia13/js-theme-animation-monorepo/issues"
+  },
+  "keywords": [
+    "theme",
+    "transition",
+    "view transitions",
+    "view transitions api",
+    "utility",
+    "library",
+    "css",
+    "javascript",
+    "web",
+    "dark mode",
+    "light mode",
+    "dark theme",
+    "light theme"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./circular-reveal/index.css": "./dist/circular-reveal/index.css",
+    "./sweep-reveal/index.css": "./dist/sweep-reveal/index.css"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist",
+    "prebuild": "npm run clean",
+    "build": "tsc && node scripts/copy-css-files.ts",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "phoenix": "npm run clean && rm -rf node_modules"
+  }
+}