use-scroll-animate 2.7.0 → 2.8.0

package/docs/components.md

@@ -192,6 +192,23 @@ Presets (`SPRING_PRESETS`): `default` (170/26), `gentle` (120/14), `wobbly` (180
 | `<usa-auto-skeleton>` | Automatic skeletons | `loading`; `data-no-skeleton` on children | `loading` |
 | `<usa-motion-switch>` · `setMotionIntensity()` | Global motion intensity | `labels`, `label` · `'off' \| 'low' \| 'normal' \| 'high'`, `persist` | `usa:change`; `--usa-motion`, `data-usa-motion` |
 
+### v2.8 additions to Text, Background & Windows
+
+| Element / API | Category | What it does | Key attributes |
+|---|---|---|---|
+| `<usa-wave-text>` | text | Letters bob in a wave | `amplitude` (0.25em), `speed` (1.6s), `stagger` (0.06s) |
+| `<usa-glitch>` | text | RGB-split glitch | `trigger` (`always` · `hover`), `intensity` (3px) |
+| `<usa-gradient-text>` | text | Flowing gradient fill | `colors`, `speed` (6s), `angle` (90) |
+| `<usa-handwriting>` | text | Stroke-by-stroke draw, then fill | `text`, `duration` (2400), `size` (64), `font`, `stroke`; `play()`, `usa:complete` |
+| `<usa-scroll-highlight>` | text | Words light up while reading / marker sweep | `mode` (`words` · `marker`), `dim` (0.2), `color`; `progress` |
+| `<usa-grid-glow>` | background | Grid lit around the pointer | `size` (32), `radius` (220), `color` |
+| `<usa-blobs>` | background | Fluid morphing blobs | `colors`, `speed` (1), `blur` (60) |
+| `<usa-water-ripple>` | background | Interactive water ripples (canvas) | `damping` (0.96), `strength` (1), `color` (`r,g,b`); `drop(x, y, s?)` |
+| `<usa-dot-network>` | background | Dot grid linking to the pointer (canvas) | `gap` (28), `radius` (140), `color` (`r,g,b`) |
+| `fluentPreset(opts)` | background | Windows 11 Fluent: variant + Mica tint + Acrylic + Reveal highlight | `reveal`, `mica`, `selector`, `root`; returns undo |
+
+WinUI 3 / WebView2 sample app: [`examples/webview2-winui/`](../examples/webview2-winui/).
+
 ## Frameworks
 
 Custom elements work in every framework. Register once (e.g. in your entry file), then use the tags.

package/docs/windows-apps.md

@@ -106,3 +106,14 @@ Link the bundle (or import it in your module graph) and install the site from Ed
 - Register only what you use (`define<Category>Components()` or single `define*()` calls) to keep start-up light.
 - Background effects (`<usa-aurora>`, `<usa-particles>`, `<usa-marquee>`) stop animating when off-screen and when the window is hidden/minimised (`document.hidden`).
 - All motion runs on the compositor (`transform` / `opacity`), so it stays smooth on integrated GPUs and in battery-saver mode; call `configureComponents({ reducedMotion: 'reduce' })` to force the calm variants (e.g. for a "Reduce animations" toggle in your app settings).
+
+## WinUI 3 sample app + Fluent preset (v2.8)
+
+[`examples/webview2-winui/`](../examples/webview2-winui/) is a complete WinUI 3 app (Windows App SDK, native **Mica** backdrop, full-window WebView2 with `SetVirtualHostNameToFolderMapping`) whose UI is a plain `index.html` using `components.umd.js`.
+
+```js
+import { fluentPreset } from 'use-scroll-animate/components/background';
+const off = fluentPreset({ reveal: true, mica: true }); // Fluent variant + Mica-style bg + Acrylic + Reveal highlight
+```
+
+`fluentPreset()` sets `variant="fluent"` page-wide (Segoe UI Variable, Windows 11 accent `#0067c0` / `#4cc2ff` dark, 8 px radii), tints the body like Mica (skip with `mica: false` when the host window already uses `MicaBackdrop`), turns `.usa-acrylic` / `[data-acrylic]` into Acrylic surfaces and adds Reveal highlight to buttons and `[data-fluent-reveal]` items. Reduced motion / reduced transparency / high contrast fall back to solid materials without Reveal tracking.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-scroll-animate",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "A lightweight, high-performance, dependency-free scroll animation library and animated UI components (Web Components) for the web and Windows web-view apps.",
   "type": "module",
   "main": "./dist/index.cjs",