@maxigarcia/theme-transitions 0.2.0 → 0.3.0

package/README.md

@@ -1,6 +1,6 @@
 # @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.
+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**, **sweep**, or **fall** animation—no animation framework required.
 
 ## Install
 
@@ -14,20 +14,22 @@ npm install @maxigarcia/theme-transitions
 | --------------- | ---------------------------------------------------------------- |
 | Circular reveal | [src/circular-reveal/README.md](./src/circular-reveal/README.md) |
 | Sweep reveal    | [src/sweep-reveal/README.md](./src/sweep-reveal/README.md)       |
+| Fall            | [src/fall/README.md](./src/fall/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                                      |
+| Import                                              | Purpose                                                                         |
+| --------------------------------------------------- | ------------------------------------------------------------------------------- |
+| `@maxigarcia/theme-transitions`                     | `onCircularRevealAnimation`, `onSweepRevealAnimation`, `onFallAnimation`, types |
+| `@maxigarcia/theme-transitions/circular-reveal.css` | Styles for circular reveal                                                      |
+| `@maxigarcia/theme-transitions/fall.css`            | Styles for fall                                                                 |
+| `@maxigarcia/theme-transitions/sweep-reveal.css`    | Styles for sweep reveal                                                         |
 
 ## Live demo
 
-See the [app package](../app/) in this monorepo for an interactive landing page with both techniques.
+Go to the [demo](https://theme-transitions.vercel.app)
 
 ```bash
 # from monorepo root
@@ -45,17 +47,6 @@ npm run build -w @maxigarcia/theme-transitions
 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.js

@@ -1,5 +1,9 @@
 import { $html, $onTransitionEnd } from '../utils/index.js';
 export function onCircularRevealAnimation(apply, origin, options) {
+    if (!document.startViewTransition) {
+        apply();
+        return;
+    }
     const x = (origin.clientX / window.innerWidth) * 100;
     const y = (origin.clientY / window.innerHeight) * 100;
     const html = $html();
@@ -12,10 +16,6 @@ export function onCircularRevealAnimation(apply, origin, options) {
     }
     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');

package/dist/fall/index.css

@@ -0,0 +1,57 @@
+@keyframes theme-fall-out {
+  0% {
+    transform: translateY(0) scaleY(1) scaleX(1) skewY(0deg);
+  }
+
+  15% {
+    transform: translateY(3vh) scaleY(0.94) scaleX(1.02) skewY(1deg);
+  }
+
+  100% {
+    transform: translateY(105%) scaleY(0.75) scaleX(1.06) skewY(4deg);
+  }
+}
+
+html.fall::view-transition-old(root),
+html.fall::view-transition-new(root),
+html.fall::view-transition-old(*),
+html.fall::view-transition-new(*) {
+  mix-blend-mode: normal;
+}
+
+html.fall::view-transition-group(root),
+html.fall::view-transition-group(*) {
+  animation: none;
+  transform-origin: bottom center;
+  overflow: visible;
+}
+
+html.fall::view-transition-image-pair(root),
+html.fall::view-transition-image-pair(*) {
+  isolation: isolate;
+}
+
+html.fall::view-transition-old(root),
+html.fall::view-transition-old(*) {
+  animation: theme-fall-out var(--theme-fall-duration, 700ms) cubic-bezier(0.33, 0, 0.67, 0.15) forwards;
+  transform-origin: bottom center;
+  opacity: 1;
+  z-index: 1;
+}
+
+html.fall::view-transition-new(root),
+html.fall::view-transition-new(*) {
+  animation: none;
+  opacity: 1;
+  z-index: 0;
+}
+
+/* Reduce motion */
+@media (prefers-reduced-motion: reduce) {
+  html.fall::view-transition-old(root),
+  html.fall::view-transition-new(root),
+  html.fall::view-transition-old(*),
+  html.fall::view-transition-new(*) {
+    animation: none;
+  }
+}

package/dist/fall/index.d.ts

@@ -0,0 +1,6 @@
+export interface FallOptions {
+    /** Fall duration in milliseconds. Defaults to `700`. */
+    duration?: number;
+}
+export declare function onFallAnimation(apply: () => void, options?: FallOptions): void;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/fall/index.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IAC1B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,IAAI,EACjB,OAAO,CAAC,EAAE,WAAW,GACpB,IAAI,CAqBN"}

package/dist/fall/index.js

@@ -0,0 +1,17 @@
+import { $html } from '../utils/index.js';
+export function onFallAnimation(apply, options) {
+    if (!document.startViewTransition) {
+        apply();
+        return;
+    }
+    const duration = options?.duration ?? 700;
+    const html = $html();
+    html.classList.add('fall');
+    html.style.setProperty('--theme-fall-duration', `${duration}ms`);
+    const transition = document.startViewTransition(apply);
+    const animationComplete = () => {
+        html.classList.remove('fall');
+        html.style.removeProperty('--theme-fall-duration');
+    };
+    void transition.finished.finally(animationComplete);
+}

package/dist/index.d.ts

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

package/dist/index.d.ts.map

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

package/dist/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maxigarcia/theme-transitions",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "ISC",
   "homepage": "https://github.com/MaxiGarcia13/js-theme-animation-monorepo/tree/main/packages/theme-transitions#readme",
   "repository": {
@@ -31,8 +31,9 @@
       "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"
+    "./circular-reveal.css": "./dist/circular-reveal/index.css",
+    "./fall.css": "./dist/fall/index.css",
+    "./sweep-reveal.css": "./dist/sweep-reveal/index.css"
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",