gclass-anims 1.0.0-beta.22.2 → 1.0.0-beta.24

package/AnimToggle.js

@@ -1,7 +1,14 @@
   import initListeners from './Listeners.js'
   import { defaults, animations } from './Config.js'
   import { gsap } from 'gsap'
-
+import { GSDevTools } from 'gsap/all'
+// GSDevTools is intentionally NOT registered at module scope. This module is
+// imported by index.js, and package.json declares "sideEffects": false-a
+// bundler is then free to drop the registration, leaving gclassDev() to call
+// GSDevTools.create() against an unregistered plugin. It is also unnecessary:
+// gclassDev() is usable standalone (the docs site and dev-react-strict both
+// call it without ever calling initAnimations()), so registration must happen
+// at the point of use instead of at import time.
 // localStorage key controlling whether the GSAP animation system is mounted.
 const STORAGE_KEY = 'gclass-animations-enabled'
 // localStorage key for a forced reduced-motion override (see
@@ -46,7 +53,7 @@ function readReducedOverride() {
 //   - Otherwise, if the user HAS an explicit stored choice, respect it
 //     (override wins), even under reduced motion.
 //   - Otherwise (no stored value) fall back to the default, which is ON unless
-//     reduced motion is detected - in which case animations are off.
+//     reduced motion is detected-in which case animations are off.
 function getEnabled() {
   if (forcedReduced) return false
   return stored === null ? !reduced : stored
@@ -118,7 +125,7 @@ let bootTimeout = null
 let bootStyle = null
 let hasBooted = false // true after first hard-load boot, skips boot on SPA path changes (remains false until first boot, resets on hard reload)
 
-// Runtime config for gclassOpts — 0 = defaults (no throttle, default GSAP ticker)
+// Runtime config for gclassOpts-0 = defaults (no throttle, default GSAP ticker)
 let currentThrottle = 0
 let currentFps = 0
 const configSubscribers = new Set()
@@ -144,7 +151,7 @@ function normalizeGclassArgs(throttlePerFrame, fps) {
 
 /**
  * Change GClass runtime options on the fly without reload.
- * gclassOpts(throttlePerFrame, fps) — both optional numbers.
+ * gclassOpts(throttlePerFrame, fps)-both optional numbers.
  * gclassOpts() or gclassOpts(undefined, undefined) resets to defaults (no throttle, default ticker).
  * Also accepts gclassOpts({throttlePerFrame, fps}).
  * Example low-end button: onClick={() => gclassOpts(1, 30)}
@@ -181,16 +188,55 @@ const readBootTime = (els, fallback) => {
   return max ?? fallback
 }
 
+/**
+ * Create GSDevTools UI styled like doc/ (Header.jsx:8 slate-800/50 ring + layout.js:85 slate-950).
+ * Accepts: gclassDev() | gclassDev("width:50%; bottom:30px") | gclassDev({width:"50%"}) | gclassDev({css:{}, minimal:true, animation:tl})
+ */
+export function gclassDev(cssOrOpts){
+  // Register at point of use-see the note at the top of this file.
+  gsap.registerPlugin(GSDevTools)
+  const docCss = {
+    backgroundColor: "rgba(15,23,42,0.96)", // slate-900 ~ doc bg-slate-950/900
+    border: "1px solid rgba(51,65,85,0.8)", // ring-slate-700 Header.jsx:8
+    borderRadius: "12px", // rounded-xl
+    boxShadow: "0 0 0 1px rgba(51,65,85,0.5), 0 8px 32px rgba(0,0,0,0.45)",
+    backdropFilter: "blur(8px)",
+    color: "#e2e8f0", // slate-200
+    bottom: "16px",
+    width: "92%",
+    maxWidth: "860px",
+    left: "50%",
+    transform: "translateX(-50%)",
+  }
+  let opts = {}
+  let css = docCss
+  if (typeof cssOrOpts === "string") {
+    css = cssOrOpts // verbatim string: "width:50%; bottom:30px"
+  } else if (cssOrOpts && typeof cssOrOpts === "object") {
+    // {width:"50%", bottom:"30px"} shorthand OR {css:{}, animation, minimal,...} full opts
+    const hasFullOpts = "css" in cssOrOpts || "animation" in cssOrOpts || "container" in cssOrOpts || "minimal" in cssOrOpts || "id" in cssOrOpts
+    if (hasFullOpts) {
+      const { css: userCss, ...rest } = cssOrOpts
+      opts = rest
+      if (typeof userCss === "string") css = userCss
+      else if (userCss && typeof userCss === "object") css = { ...docCss, ...userCss }
+    } else {
+      css = { ...docCss, ...cssOrOpts }
+    }
+  }
+  return GSDevTools.create({ css, ...opts })
+}
+
 // Boots the GSAP animation system unless animations are disabled (stored "off"
 // or reduced-motion fallback with no explicit choice). Idempotent: calling it
 // again tears down any previous run first.
 // Now also handles boot screen: any HTML/JSX with `.boot-up` anywhere is treated as the boot overlay.
-// No separate initBoot needed - just call initAnimations().
+// No separate initBoot needed-just call initAnimations().
 // Boot stops all DOM rendering for defaults.bootTime (overwritten by boot-time-N class).
 // throttlePerFrame / fps: forwarded to gclassOpts-equivalent runtime.
-//   initAnimations(throttlePerFrame, fps) — positional numbers, 0/undefined = defaults
-//   initAnimations({throttlePerFrame, fps}) — object overload
-//   initAnimations() — uses last gclassOpts values (defaults on first call)
+//   initAnimations(throttlePerFrame, fps)-positional numbers, 0/undefined = defaults
+//   initAnimations({throttlePerFrame, fps})-object overload
+//   initAnimations()-uses last gclassOpts values (defaults on first call)
 export function initAnimations(throttlePerFrame, fps) {
   // gclassOpts-style normalization: (throttle, fps) positional or {throttlePerFrame, fps} object
   // no args -> fallback to last gclassOpts values (defaults 0 = no throttle, default ticker)
@@ -210,9 +256,9 @@ export function initAnimations(throttlePerFrame, fps) {
     else gsap.ticker.fps(0)
   }
   if (typeof window === 'undefined' || !getEnabled()) return
-  // boot already in progress (first mount in StrictMode) - ignore second mount
+  // boot already in progress (first mount in StrictMode)-ignore second mount
   if (bootTimeout) {
-    console.log(`[initAnimations] boot already in progress - ignoring duplicate call`)
+    console.log(`[initAnimations] boot already in progress-ignoring duplicate call`)
     return
   }
   if (cleanup) { cleanup(); cleanup = null }
@@ -220,7 +266,7 @@ export function initAnimations(throttlePerFrame, fps) {
   if (bootStyle) { bootStyle.remove(); bootStyle = null; document.documentElement.classList.remove('gclass-booting') }
 
   const hideBootEls = (els) => {
-    // React-safe: don't el.remove() - React owns the nodes and will throw
+    // React-safe: don't el.remove()-React owns the nodes and will throw
     // insertBefore/removeChild on next commit if we mutate outside React.
     // Hiding keeps React's tree intact but visually removes boot screen.
     els.forEach(el => {
@@ -234,12 +280,12 @@ export function initAnimations(throttlePerFrame, fps) {
   if (!bootEls.length) {
     // no .boot-up -> completely skip boot
   } else if (bootEls.length > 1) {
-    console.error(`[initAnimations] Multiple .boot-up elements detected (${bootEls.length}) - skipping all boot animations`, bootEls)
+    console.error(`[initAnimations] Multiple .boot-up elements detected (${bootEls.length})-skipping all boot animations`, bootEls)
     hideBootEls(bootEls)
     hasBooted = true
     // fall through to normal initListeners without pausing DOM
   } else if (hasBooted && !bootTimeout) {
-    // path change after already booted (SPA navigation) - skip boot, hard reload resets hasBooted
+    // path change after already booted (SPA navigation)-skip boot, hard reload resets hasBooted
     console.log(`[initAnimations] skipping boot on path change (already booted)`, bootEls)
     hideBootEls(bootEls)
     hasBooted = true
@@ -265,7 +311,7 @@ export function initAnimations(throttlePerFrame, fps) {
     // ensure boot els are visible even if nested inside hidden ancestors
     bootEls.forEach(el => { el.style.visibility = 'visible' })
 
-    // animations inside boot screen must play while rest of DOM is hidden - init scoped to boot-up
+    // animations inside boot screen must play while rest of DOM is hidden-init scoped to boot-up
     bootCleanup = initListeners(bootEl, effThrottle)
 
     bootTimeout = setTimeout(() => {
@@ -300,7 +346,7 @@ export function initAnimations(throttlePerFrame, fps) {
       }
 
       if (!cfg || !from) {
-        console.warn(`[initAnimations] boot-end-${name} has no from state - removing without animation`)
+        console.warn(`[initAnimations] boot-end-${name} has no from state-removing without animation`)
         finish()
         return
       }

package/Animations.js

@@ -2,12 +2,32 @@ import { DrawSVGPlugin, Flip, MotionPathPlugin, ScrambleTextPlugin, SplitText, T
 import { gsap } from "gsap";
 import { defaults } from './Config.js'
 
-gsap.registerPlugin(Flip)
-gsap.registerPlugin(SplitText)
-gsap.registerPlugin(TextPlugin)
-gsap.registerPlugin(DrawSVGPlugin)
-gsap.registerPlugin(MotionPathPlugin)
-gsap.registerPlugin(ScrambleTextPlugin)
+// Plugins are deliberately NOT registered here at module scope.
+//
+// package.json declares "sideEffects": false, which tells a consumer's
+// bundler that importing this module has no observable side effects and that
+// it may be dropped entirely when nothing is imported from it. Registering
+// plugins on import contradicts that promise: a bundler that tree-shakes this
+// module away silently un-registers SplitText / DrawSVG / ScrambleText and the
+// corresponding classes then throw at runtime, with a stack trace that points
+// nowhere useful.
+//
+// Registration is therefore deferred to registerPlugins() below, which
+// initListeners() calls (Listeners.js). This module stays safe to import for
+// side-effect-free helpers, and the whole set is registered exactly once.
+let pluginsRegistered = false
+export function registerPlugins() {
+    if (pluginsRegistered) return
+    pluginsRegistered = true
+    gsap.registerPlugin(
+        Flip,
+        SplitText,
+        TextPlugin,
+        DrawSVGPlugin,
+        MotionPathPlugin,
+        ScrambleTextPlugin,
+    )
+}
 
 // --- Breakpoint helpers for modifiers (xs/s/m/l/xl) -------------------------
 // Lazy to avoid circular init (Config.js <-> Animations.js)
@@ -322,7 +342,14 @@ export function splitPaths (paths){
     const path = toSplit[0]
     if (!path) return newPaths
     if (path._gcSplitPaths?.[0]?.isConnected) return path._gcSplitPaths
+    // Only SVG <path> elements can be split. A non-path target (or a detached
+    // node) makes MotionPathPlugin.getRawPath return undefined, and the
+    // .map() below then throws and takes the whole engine init down with it.
+    // Bail out quietly instead: draw-split is a decorative extra and a
+    // misapplied class must never be fatal.
+    if (path.nodeType !== 1 || path.tagName?.toLowerCase() !== "path" || !path.isConnected) return newPaths
     const rawPath = MotionPathPlugin.getRawPath(path)
+    if (!rawPath || !Array.isArray(rawPath)) return newPaths
     const parent = path.parentNode
     const attributes = [...path.attributes]
     newPaths = rawPath.map(segment => {

package/CHANGELOG.md

@@ -2,21 +2,49 @@
 
 All notable changes to `gclass-anims` will be documented in this file.
 
+## [1.0.0-beta.24] - 2026-10-05
+### Added
+- **`.gc-tween-[...]` escape hatch** - write GSAP vars inline when the menu has no class for it. `class="gc-tween-[y:40,opacity:0]"` plays **from** those values **to** the element's live resting state (read via `getComputedStyle`), so end values follow CSS / dark mode / breakpoints instead of being frozen into the class. Multiple `gc-tween-[...]` classes on one element **merge** (both properties end up on one tween). Modifiers work as usual: `.time-N`, `.ease-*`, `.order`, `.priority-N`, `.delay-N`, `.reduced`, `.preserve`, and `bp:` gating (`m:gc-tween-[...]`). Trigger prefixes mirror the `css-*` grammar: `hover-gc-tween-[...]`, `click-gc-tween-[...]`.
+- **`.gc-tl` timeline host + `.gc-<n>-[...]` ordered steps** - `class="gc-tl gc-1-[y:40] gc-2-[opacity:1] gc-3-[scale:0.8]"` builds a `gsap.timeline()` with one tween per step, sorted ascending by the numeric prefix regardless of attribute order. Numbered steps imply a timeline, so `.gc-tl` is optional but expresses intent.
+- **Per-step control keys inside the bracket** - `time:` / `dur:` overrides that step's duration (class-level `.time-N` still sets the default for steps that don't), `ease:` overrides the step's ease, and `at:` sets the GSAP **position** parameter (`at:0`, `at:">"`, `at:"+=0.2"`, `at:"<"`) for overlapping steps. These are consumed by the engine and never reach GSAP as properties.
+- `.delay-N` is now a real modifier-a plain additive offset applied **after** the `.order` / `.priority-N` delay, so `order delay-2` shifts the stagger and `priority-3 delay-1` composes. `Config.js:23` previously promised `delay` support that no code implemented.
+- `registerPlugins()` is exported, so a consumer can register the plugin set explicitly without booting the engine.
+
+### Fixed
+- **Consumer-package corruption via `sideEffects: false`.** All GSAP plugin registration moved out of module scope into `initListeners()` (`registerPlugins()` in `Animations.js`, plus the existing `TextPlugin`/`ScrollTrigger`/`SplitText` call). `package.json` declares `sideEffects: false`, which tells a consumer's bundler it may drop a module that only registers plugins on import-silently un-registering `SplitText` / `DrawSVG` / `ScrambleText` and making the matching classes throw at runtime inside someone else's app. Importing the package for helpers is now genuinely side-effect free. This also removes the duplicate `SplitText` / `TextPlugin` registration that existed at both module scope and init time.
+- **`gclassDev()` no longer depends on import order.** `GSDevTools` registration moved from `AnimToggle.js` module scope into the body of `gclassDev()`, so it works whether or not `initAnimations()` has run. The docs site and `dev-react-strict` both call `gclassDev()` standalone and were relying on the module-scope registration.
+- **Breakpoint tables are no longer frozen at import.** `Listeners.js` computed `bpNames` / `bpMap` / `bpPrefixRE` as module-scope `const`s, so assigning `defaults.breakpoints` after import was silently ignored. They are now derived lazily and memoised on the identity of the `defaults.breakpoints` object (port of the lazy `getBpDataMod()` approach `Animations.js` already used).
+- **`css-<prop>-<from>-<to>` now merges instead of first-match-wins.** `parseCssAnim` returned on the first matching class, so an element could carry exactly one `css-*` animation and any further classes were ignored. All matching classes now merge into a single tween; a later class for the same property wins, and the first trigger prefix seen decides spawn/hover/click/loop for the whole element.
+- **`.appear` on dynamically inserted `.gc` elements.** `setupGcAnims` is registered in the MutationObserver appear batch as well as the initial load pass, matching `setupCssAnims`.
+
+### Changed
+- `dist/` is now minified with source maps (`minify: true`, `sourcemap: true` in `vite.lib.config.js`). ESM 95.7 kB → 74.7 kB (gzip 19.6 kB), CJS 97.7 kB → 57.7 kB (gzip 17.5 kB). Source maps keep stack traces resolvable to the original `Listeners.js` / `Animations.js` lines. Note: `minify: 'esbuild'` fails on a clean install here because this repo has no direct `esbuild` dependency (Vite 8 delegates to rolldown)-`minify: true` is the portable form.
+- **Removed `defaults.textStagger`.** Declared in `Config.js`, typed in `index.d.ts`, and documented on the defaults page, but read by nothing-stagger is derived arithmetically in `playText`. Deleted from all three rather than wired up, because making it the default would silently change the timing of every existing text animation.
+- `index.d.ts` drift fixed: `initListeners` was declared as a **default** export while `index.js` re-exports it **named**, so `import initListeners from 'gclass-anims'` type-checked and then returned `undefined` at runtime; `Example` was typed but never exported (`index.js` omits it) and is now removed; `Defaults` now declares `breakpoints`, without which `defaults.breakpoints = {...}` was a type error and the whole `m:` system was unconfigurable in TypeScript; `finalOpacity`, `stashText`, `spawnClipReveal`, `curtainHorizontal`, `curtainVertical` and `scrambleSegments` now have declarations (all six ship in the bundle).
+
+### Notes for consumers
+- **One bracket group per `.gc` class.** Tailwind re-lexes bracket contents as standalone candidates, so a second bracket group leaks real CSS into your stylesheet: `gc-tween-[y:40]` emits nothing, but `gc-tween-[y:40]-[y:0]` makes Tailwind emit `.[y:0] { y: 0 }`. The parser only ever accepts one group, and `dev-react-strict/src/__tests__/gc-tween.test.jsx` asserts this against real Tailwind (with a control case proving the harness can detect a leak at all). For a two-value tween use two numbered steps, or the existing `css-<prop>-<from>-<to>`.
+- `.randomize-*` does not reach `.gc` tweens-it is injected by monkey-patching `gsap.fromTo` inside `play()`-built tweens only.
+- `demo/` is legacy: those static pages predate the docs site and are not wired into anything. Their `gclass-bundle.js` is a stale prebuilt bundle (dated 2026-08-27) and nothing in the repo regenerates it, so treat that directory as historical rather than a live example. `dist/` is the current build.
+
+## [1.0.0-beta.23] - 2026-09-09
+- Added `gclassDev()` helper-`AnimToggle.js:185` `gclassDev(cssOrOpts)` wraps `GSDevTools.create()` with doc-styled defaults (`slate-900` `rgba(15,23,42,0.96)`, `slate-700` border, `rounded-xl`, `backdrop-blur`). Accepts `gclassDev()` (defaults), `gclassDev("width:50%; bottom:30px")` (CSS string), `gclassDev({width:"50%"})` (style object shorthand), or `gclassDev({css, animation, minimal, ...})` (full `GSDevTools` opts). Registers `GSDevTools` via `gsap.registerPlugin(GSDevTools)` (`AnimToggle.js:4`), re-exported from `index.js:1` and typed in `index.d.ts:35`.
+
 ## [1.0.0-beta.22.2] - 2026-09-06
-- Fixed `m:order` (and any `bp:order` / `bp:priority-*` / `bp:ease-*` / `bp:time-*`) disabling the entire `scroll` animation on smaller screens — `Listeners.js:1200,1232,1262` previously wrapped `setupScroll` / `playText` scroll variants in generic `runWithBreakpoint(el, ...)` which gated on *any* `bp:*` class on the element (so `m:order` gated `scroll`). Now uses per-animation `qAllAllVariants` + `runWithBreakpointForSel` (`".scroll"`, `".scroll-progress"`, `tSel`) so only a true `m:scroll` / `m:spawn-*` gates its own animation; unrelated modifiers like `m:order` only affect `hasGClass("order")` / `readTiming` (stagger) and `spawn-*` + `scroll` still play on all sizes (without stagger on <m). Keeps live `gsap.matchMedia` handling for true breakpoint-gated scroll. Reverts `HowWorkSection.jsx` workaround from `m:order` back to plain `order` for the default staggered landing.
+- Fixed `m:order` (and any `bp:order` / `bp:priority-*` / `bp:ease-*` / `bp:time-*`) disabling the entire `scroll` animation on smaller screens-`Listeners.js:1200,1232,1262` previously wrapped `setupScroll` / `playText` scroll variants in generic `runWithBreakpoint(el, ...)` which gated on *any* `bp:*` class on the element (so `m:order` gated `scroll`). Now uses per-animation `qAllAllVariants` + `runWithBreakpointForSel` (`".scroll"`, `".scroll-progress"`, `tSel`) so only a true `m:scroll` / `m:spawn-*` gates its own animation; unrelated modifiers like `m:order` only affect `hasGClass("order")` / `readTiming` (stagger) and `spawn-*` + `scroll` still play on all sizes (without stagger on <m). Keeps live `gsap.matchMedia` handling for true breakpoint-gated scroll. Reverts `HowWorkSection.jsx` workaround from `m:order` back to plain `order` for the default staggered landing.
 
 ## [1.0.0-beta.22.1] - 2026-09-06
-- Fixed `.order` stagger grouping bug — `Listeners.js:76` `wrapQAll` now preserves DOM order via `body *` filter + `elementMatchesSel` (was `Set([...spawn-up], [...spawn-down])` grouping by type, now top-to-bottom as `qAll` does). Fixes `doc` `spawn` and landing `order` appearing all over.
+- Fixed `.order` stagger grouping bug-`Listeners.js:76` `wrapQAll` now preserves DOM order via `body *` filter + `elementMatchesSel` (was `Set([...spawn-up], [...spawn-down])` grouping by type, now top-to-bottom as `qAll` does). Fixes `doc` `spawn` and landing `order` appearing all over.
 - No API change from `beta.22`.
 
 ## [1.0.0-beta.22] - 2026-09-06
-- Added responsive breakpoints — `Config.js:75` `defaults.breakpoints {xs:475,s:640,m:768,l:1024,xl:1280}` (single-letter `s/m/l` avoids Tailwind `sm/md/lg` collision). Usage `m:spawn-up`, `l:float`, `xs:spawn-up`. Gating is live via `gsap.matchMedia` (`Listeners.js:26,202`).
-- Added breakpoint-aware modifiers — `m:amount-20`, `m:time-2`, `m:ease-bounce`, `m:priority-3`, `m:chars-[...]`, `m:spawn-num-10` etc. Mobile-first largest active wins (`Listeners.js:237` `getActivePrefixedClass`, `Animations.js:13` lazy helpers). Covers `amount-`, `time-`, `priority-`, `edelay-`, `etime-`, `stagger-`, `fill-time-`, `reveal-delay-`, `spawn-num-`, `progress-start-`, etc.
-- Fixed runtime `customAnims` re-normalization — `Listeners.js:190` now calls `normalize(customAnims)` inside `initListeners()` so `customAnims.push()` before next `init` is picked up.
-- Added ESM + CJS dual build — `vite.lib.config.js` (Vite lib) builds `dist/gclass.esm.js` + `dist/gclass.cjs` (`gsap` external); `package.json:4` bumped to `beta.22`, `main/module` point to `dist/`, `exports: {import, require}`, `sideEffects:false`, `prepublishOnly: build`.
-- Fixed CJS `gsap` interop — `Animations.js:2`/`Listeners.js:1`/`AnimToggle.js:3`/`CustomAnims.js:1` now `import {gsap} from 'gsap'` (named import) for correct `require('gsap').gsap` interop.
-- Added `dev-react-strict` test harness — `vitest` + `jsdom` + `src/__tests__/breakpoints.test.jsx` (14 tests: gating, modifiers, Tailwind coexistence, StrictMode) + `BreakpointHarness.jsx` visual; `vite.config.js` test config.
-- Documented breakpoints — `doc/src/app/documentation/responsive-design/page.js` (was duplicate `optimization`).
+- Added responsive breakpoints-`Config.js:75` `defaults.breakpoints {xs:475,s:640,m:768,l:1024,xl:1280}` (single-letter `s/m/l` avoids Tailwind `sm/md/lg` collision). Usage `m:spawn-up`, `l:float`, `xs:spawn-up`. Gating is live via `gsap.matchMedia` (`Listeners.js:26,202`).
+- Added breakpoint-aware modifiers-`m:amount-20`, `m:time-2`, `m:ease-bounce`, `m:priority-3`, `m:chars-[...]`, `m:spawn-num-10` etc. Mobile-first largest active wins (`Listeners.js:237` `getActivePrefixedClass`, `Animations.js:13` lazy helpers). Covers `amount-`, `time-`, `priority-`, `edelay-`, `etime-`, `stagger-`, `fill-time-`, `reveal-delay-`, `spawn-num-`, `progress-start-`, etc.
+- Fixed runtime `customAnims` re-normalization-`Listeners.js:190` now calls `normalize(customAnims)` inside `initListeners()` so `customAnims.push()` before next `init` is picked up.
+- Added ESM + CJS dual build-`vite.lib.config.js` (Vite lib) builds `dist/gclass.esm.js` + `dist/gclass.cjs` (`gsap` external); `package.json:4` bumped to `beta.22`, `main/module` point to `dist/`, `exports: {import, require}`, `sideEffects:false`, `prepublishOnly: build`.
+- Fixed CJS `gsap` interop-`Animations.js:2`/`Listeners.js:1`/`AnimToggle.js:3`/`CustomAnims.js:1` now `import {gsap} from 'gsap'` (named import) for correct `require('gsap').gsap` interop.
+- Added `dev-react-strict` test harness-`vitest` + `jsdom` + `src/__tests__/breakpoints.test.jsx` (14 tests: gating, modifiers, Tailwind coexistence, StrictMode) + `BreakpointHarness.jsx` visual; `vite.config.js` test config.
+- Documented breakpoints-`doc/src/app/documentation/responsive-design/page.js` (was duplicate `optimization`).
 
 ## [1.0.0-beta.21] - 2026-9-3
 - Added a `gclassOpts()` function that controls the animation fps and observer throttling
@@ -48,22 +76,22 @@ All notable changes to `gclass-anims` will be documented in this file.
 
 ## [1.0.0-beta.12] - 2026-08-26
 
-- Fixed `scramble` with `scroll-progress` throwing `can't convert undefined to object` - `computeTo` (`Listeners.js:424`) and scrub `to` builder (`Listeners.js:867`) now guard `from` (`scramble` has no `from`).
+- Fixed `scramble` with `scroll-progress` throwing `can't convert undefined to object`-`computeTo` (`Listeners.js:424`) and scrub `to` builder (`Listeners.js:867`) now guard `from` (`scramble` has no `from`).
 
 ## [1.0.0-beta.11] - 2026-08-26
 
-- Fixed `.draw-split` infinite loop when paired with `.appear` - `splitPaths` (`Animations.js:244`) now strips `appear`/`scroll`/`scroll-progress`/`draw`/`draw-split`/`data-gsap-*` from cloned segments, marks children with `data-gsap-split` + `contain:paint`/`will-change:transform` isolation, and prevents `appearObserver` (`Listeners.js:1559`) re-triggering. Also isolated `draw-split` demos in docs.
+- Fixed `.draw-split` infinite loop when paired with `.appear`-`splitPaths` (`Animations.js:244`) now strips `appear`/`scroll`/`scroll-progress`/`draw`/`draw-split`/`data-gsap-*` from cloned segments, marks children with `data-gsap-split` + `contain:paint`/`will-change:transform` isolation, and prevents `appearObserver` (`Listeners.js:1559`) re-triggering. Also isolated `draw-split` demos in docs.
 
 ## [1.0.0-beta.10] - 2026-08-26
 
-- Added `.randomize-<prop>-[min]-[max]` - randomize spawn start values per element (e.g. `randomize-rotation-[-90]-[90]`, `randomize-x-[-40]-[40]`). Re-rolls on every replay (`.scroll` re-enter, `.appear`).
-- Added `.draw` - stroke-draw reveal for SVG paths using DrawSVGPlugin (`drawSVG: 0% → 100%`).
-- Added `.draw-split` - draws multi-segment SVG paths sequentially at constant pen speed (splits paths with multiple `M` commands into individual strokes).
-- Added `.scramble` - text resolves from empty through scrambled characters into real content (ScrambleTextPlugin). Supports `.reveal-delay-N`, `.chars-[...]`, `.amount-N`, `.scramble-rtl`.
-- Added `.scramble-all` - variant of scramble with no empty start; the finished string flips to garbage as a whole then sweeps back.
-- Added `.scroll-frame` - use a scrollable container as the ScrollTrigger scroller for nested `.scroll` / `.scroll-progress` elements (innermost `.scroll-frame` ancestor wins).
-- Fixed `spawn-text-*` (SplitText) not working correctly on flex containers - text runs are now wrapped in block containers before splitting to preserve flex layout, spacing, and line grouping.
+- Added `.randomize-<prop>-[min]-[max]`-randomize spawn start values per element (e.g. `randomize-rotation-[-90]-[90]`, `randomize-x-[-40]-[40]`). Re-rolls on every replay (`.scroll` re-enter, `.appear`).
+- Added `.draw`-stroke-draw reveal for SVG paths using DrawSVGPlugin (`drawSVG: 0% → 100%`).
+- Added `.draw-split`-draws multi-segment SVG paths sequentially at constant pen speed (splits paths with multiple `M` commands into individual strokes).
+- Added `.scramble`-text resolves from empty through scrambled characters into real content (ScrambleTextPlugin). Supports `.reveal-delay-N`, `.chars-[...]`, `.amount-N`, `.scramble-rtl`.
+- Added `.scramble-all`-variant of scramble with no empty start; the finished string flips to garbage as a whole then sweeps back.
+- Added `.scroll-frame`-use a scrollable container as the ScrollTrigger scroller for nested `.scroll` / `.scroll-progress` elements (innermost `.scroll-frame` ancestor wins).
+- Fixed `spawn-text-*` (SplitText) not working correctly on flex containers-text runs are now wrapped in block containers before splitting to preserve flex layout, spacing, and line grouping.
 
-## [1.0.0-beta.9] - Previous release
+## [1.0.0-beta.9]-Previous release
 
 - See git history for earlier changes.

package/Config.js

@@ -66,7 +66,6 @@ export const defaults = {
   effectOffset: 20,
   progressStart: "top bottom",
   progressEnd: "center center",
-  textStagger: 0.03,
   typewriterSplitCharDuration: 0.05,
   minTextPartDuration: 0.3,
   revealDelay:0,