@cosmictraveler002/anim-kit 1.0.0 → 1.2.0

package/dist/index.d.ts

@@ -7,26 +7,35 @@
  *   split()          text splitting with mask support
  *
  * Scroll effects:
- *   lineReveal()     masked staggered text reveal
+ *   lineReveal()     masked staggered text reveal (lines or chars)
  *   maskReveal()     inline overflow-hidden heading reveal
  *   revealRule()     line that draws to full width
+ *   unfoldReveal()   blocks that scale open from an edge
+ *   clipWipe()       clip-path inset wipe reveal
  *   parallax()       data-speed parallax
  *   horizontalScroll()   pinned horizontal gallery
  *   stackedCards() / stackedCardsPinned()   pinned card deck
  *   scatterText()    pinned horizontal band with per-char settle
  *   heroShrink()     media that scales down as it scrolls away
+ *   mediaSettle()    media that settles from a larger entrance scale
  *   navHide()        header that hides on scroll-down
  *   logoReveal()     SVG wordmark assembling letter by letter
  *
  * Infinite / loops:
  *   marquee()        dual-row constant-speed marquee
  *   dragStrip()      infinite draggable carousel with rotation
+ *   rollText()       rolling word rotator (seamless row loop)
+ *
+ * Text extras:
+ *   scrambleText()   decode / cipher reveal per character
+ *   flipWords()      words that glide between two layouts (FLIP)
  *
  * Micro-interactions:
  *   liquidButton()   SVG wave flood on hover
  *   underlineLink()  underline wipe on hover
  *   cursorFollower() spring-follow cursor tag
- *   counter()        tabular number ticker
+ *   magnetic()       elements that pull toward the pointer and spring back
+ *   counter()        tabular number ticker (timed or scroll-progress)
  *   audioBars()      equaliser visualiser
  *   themeReveal()    View Transitions circular wipe
  *   menuOverlay()    clip-path curtain menu
@@ -44,6 +53,10 @@ export { lineReveal } from "./effects/line-reveal.js";
 export type { LineRevealOptions } from "./effects/line-reveal.js";
 export { maskReveal, revealRule } from "./effects/mask-reveal.js";
 export type { MaskRevealOptions } from "./effects/mask-reveal.js";
+export { unfoldReveal } from "./effects/unfold-reveal.js";
+export type { UnfoldRevealOptions } from "./effects/unfold-reveal.js";
+export { clipWipe } from "./effects/clip-wipe.js";
+export type { ClipWipeOptions, ClipWipeFrom } from "./effects/clip-wipe.js";
 export { parallax } from "./effects/parallax.js";
 export type { ParallaxOptions } from "./effects/parallax.js";
 export { horizontalScroll } from "./effects/horizontal-scroll.js";
@@ -54,18 +67,28 @@ export { scatterText } from "./effects/scatter-text.js";
 export type { ScatterTextOptions } from "./effects/scatter-text.js";
 export { heroShrink } from "./effects/hero-shrink.js";
 export type { HeroShrinkOptions } from "./effects/hero-shrink.js";
+export { mediaSettle } from "./effects/media-settle.js";
+export type { MediaSettleOptions } from "./effects/media-settle.js";
 export { navHide } from "./effects/nav-hide.js";
 export type { NavHideOptions } from "./effects/nav-hide.js";
 export { logoReveal } from "./effects/logo-reveal.js";
 export type { LogoRevealOptions } from "./effects/logo-reveal.js";
 export { marquee } from "./effects/marquee.js";
 export type { MarqueeOptions } from "./effects/marquee.js";
+export { rollText } from "./effects/roll-text.js";
+export type { RollTextOptions } from "./effects/roll-text.js";
 export { dragStrip } from "./effects/drag-strip.js";
 export type { DragStripOptions } from "./effects/drag-strip.js";
+export { scrambleText } from "./effects/scramble-text.js";
+export type { ScrambleTextOptions } from "./effects/scramble-text.js";
+export { flipWords } from "./effects/flip-words.js";
+export type { FlipWordsOptions } from "./effects/flip-words.js";
 export { liquidButton, underlineLink } from "./effects/liquid-button.js";
 export type { LiquidButtonOptions } from "./effects/liquid-button.js";
 export { cursorFollower } from "./effects/cursor-follower.js";
 export type { CursorFollowerOptions } from "./effects/cursor-follower.js";
+export { magnetic } from "./effects/magnetic.js";
+export type { MagneticOptions } from "./effects/magnetic.js";
 export { counter, audioBars } from "./effects/counter.js";
 export type { CounterOptions, AudioBarsOptions, AudioBarsHandle } from "./effects/counter.js";
 export { themeReveal } from "./effects/theme-reveal.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAGH,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACxH,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAC3F,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAG1E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,YAAY,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAClE,YAAY,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,YAAY,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE5E,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,YAAY,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,YAAY,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAE9E,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAC9E,YAAY,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,YAAY,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,YAAY,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,YAAY,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,YAAY,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,YAAY,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,YAAY,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,YAAY,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAGhE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,YAAY,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,YAAY,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAGhE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACzE,YAAY,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,YAAY,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAE1E,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,YAAY,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE9F,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAElG,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEvF,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/index.js

@@ -7,26 +7,35 @@
  *   split()          text splitting with mask support
  *
  * Scroll effects:
- *   lineReveal()     masked staggered text reveal
+ *   lineReveal()     masked staggered text reveal (lines or chars)
  *   maskReveal()     inline overflow-hidden heading reveal
  *   revealRule()     line that draws to full width
+ *   unfoldReveal()   blocks that scale open from an edge
+ *   clipWipe()       clip-path inset wipe reveal
  *   parallax()       data-speed parallax
  *   horizontalScroll()   pinned horizontal gallery
  *   stackedCards() / stackedCardsPinned()   pinned card deck
  *   scatterText()    pinned horizontal band with per-char settle
  *   heroShrink()     media that scales down as it scrolls away
+ *   mediaSettle()    media that settles from a larger entrance scale
  *   navHide()        header that hides on scroll-down
  *   logoReveal()     SVG wordmark assembling letter by letter
  *
  * Infinite / loops:
  *   marquee()        dual-row constant-speed marquee
  *   dragStrip()      infinite draggable carousel with rotation
+ *   rollText()       rolling word rotator (seamless row loop)
+ *
+ * Text extras:
+ *   scrambleText()   decode / cipher reveal per character
+ *   flipWords()      words that glide between two layouts (FLIP)
  *
  * Micro-interactions:
  *   liquidButton()   SVG wave flood on hover
  *   underlineLink()  underline wipe on hover
  *   cursorFollower() spring-follow cursor tag
- *   counter()        tabular number ticker
+ *   magnetic()       elements that pull toward the pointer and spring back
+ *   counter()        tabular number ticker (timed or scroll-progress)
  *   audioBars()      equaliser visualiser
  *   themeReveal()    View Transitions circular wipe
  *   menuOverlay()    clip-path curtain menu
@@ -41,19 +50,27 @@ export { toArray, one, onReady, compose, raf, prefersReducedMotion } from "./cor
 /* ---- scroll effects ---- */
 export { lineReveal } from "./effects/line-reveal.js";
 export { maskReveal, revealRule } from "./effects/mask-reveal.js";
+export { unfoldReveal } from "./effects/unfold-reveal.js";
+export { clipWipe } from "./effects/clip-wipe.js";
 export { parallax } from "./effects/parallax.js";
 export { horizontalScroll } from "./effects/horizontal-scroll.js";
 export { stackedCards, stackedCardsPinned } from "./effects/stacked-cards.js";
 export { scatterText } from "./effects/scatter-text.js";
 export { heroShrink } from "./effects/hero-shrink.js";
+export { mediaSettle } from "./effects/media-settle.js";
 export { navHide } from "./effects/nav-hide.js";
 export { logoReveal } from "./effects/logo-reveal.js";
 /* ---- loops ---- */
 export { marquee } from "./effects/marquee.js";
+export { rollText } from "./effects/roll-text.js";
 export { dragStrip } from "./effects/drag-strip.js";
+/* ---- text extras ---- */
+export { scrambleText } from "./effects/scramble-text.js";
+export { flipWords } from "./effects/flip-words.js";
 /* ---- micro-interactions ---- */
 export { liquidButton, underlineLink } from "./effects/liquid-button.js";
 export { cursorFollower } from "./effects/cursor-follower.js";
+export { magnetic } from "./effects/magnetic.js";
 export { counter, audioBars } from "./effects/counter.js";
 export { themeReveal } from "./effects/theme-reveal.js";
 export { menuOverlay } from "./effects/menu-overlay.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,oBAAoB;AACpB,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAExH,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAG3F,8BAA8B;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAGlE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAG9E,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGhD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,qBAAqB;AACrB,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGpD,kCAAkC;AAClC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAGzE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAG9D,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAG1D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAEH,oBAAoB;AACpB,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAExH,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAG3F,8BAA8B;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGlD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAGlE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAG9E,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGhD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,qBAAqB;AACrB,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGlD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGpD,2BAA2B;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGpD,kCAAkC;AAClC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAGzE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAG9D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAG1D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/styles/anim-kit.css

@@ -43,6 +43,13 @@
   will-change: transform;
 }
 
+/* Per-char masks produced by lineReveal({ split: "chars" }) / split(). */
+.ak-char-mask {
+  display: inline-block;
+  overflow: clip;
+  vertical-align: bottom;
+}
+
 .ak-space {
   display: inline-block;
   white-space: pre;
@@ -197,6 +204,21 @@
   background: linear-gradient(to left, var(--ak-background, #fff) 0%, transparent 100%);
 }
 
+/* ------------------------------------------------------------------ */
+/* Rolling text (rollText)                                             */
+/* ------------------------------------------------------------------ */
+
+/* The effect measures a row, then sets the box height + overflow inline so
+   teardown can restore authored styles exactly. This is the authored base. */
+.ak-roll {
+  display: inline-block;
+  vertical-align: bottom;
+}
+
+.ak-roll__inner {
+  will-change: transform;
+}
+
 /* ------------------------------------------------------------------ */
 /* Drag strip                                                          */
 /* ------------------------------------------------------------------ */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cosmictraveler002/anim-kit",
-  "version": "1.0.0",
-  "description": "Modular, framework-agnostic animation library inspired by dzinrstudio.com — GSAP + ScrollTrigger + Lenis effects packaged as composable ES modules.",
+  "version": "1.2.0",
+  "description": "Modular, framework-agnostic animation library — GSAP + ScrollTrigger + Lenis effects packaged as composable ES modules.",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -68,12 +68,15 @@
   "publishConfig": {
     "access": "public"
   },
+  "engines": {
+    "node": ">=20.0.0"
+  },
   "dependencies": {
     "gsap": "^3.13.0",
     "lenis": "^1.3.11"
   },
   "devDependencies": {
-    "jsdom": "^30.1.1",
+    "jsdom": "^25.0.1",
     "tsup": "^8.5.1",
     "typescript": "^5.7.3"
   }

package/src/core/gsap.ts

@@ -10,10 +10,11 @@ import { SplitText } from "gsap/SplitText";
 import { Draggable } from "gsap/Draggable";
 import { CustomEase } from "gsap/CustomEase";
 import { ScrollSmoother } from "gsap/ScrollSmoother";
+import { Flip } from "gsap/Flip";
 import { toArray } from "./util.js";
 import type { TargetLike } from "./types.js";
 
-export { gsap, ScrollTrigger, SplitText, Draggable, CustomEase, ScrollSmoother };
+export { gsap, ScrollTrigger, SplitText, Draggable, CustomEase, ScrollSmoother, Flip };
 
 /** Named eases recovered from dzinrstudio.com's bundles. */
 export const EASES = {
@@ -34,7 +35,7 @@ export function initGSAP(): void {
   if (initted || typeof window === "undefined") return;
   initted = true;
 
-  gsap.registerPlugin(ScrollTrigger, SplitText, Draggable, CustomEase);
+  gsap.registerPlugin(ScrollTrigger, SplitText, Draggable, CustomEase, Flip);
 
   // ScrollSmoother is a bonus for people who prefer it over Lenis; it is only
   // registered so `ScrollSmoother.create()` works if you call it yourself.

package/src/core/split.ts

@@ -42,12 +42,16 @@ export function split(target: Element | string, options: SplitOptions): SplitRes
 
   if (!el) return { elements: [], revert: () => {} };
 
+  const primary = Array.isArray(options.type) ? options.type[0] : options.type;
+
   // Prefer SplitText: it handles nested markup, <br> and font metrics properly.
   if (typeof SplitText !== "undefined" && SplitText?.create) {
     try {
       const st = SplitText.create(el, {
         type: options.type,
-        mask: options.mask ? "lines" : undefined,
+        // Mask the primary split type — "lines" for text reveals, "chars" for
+        // per-character masked reveals (each fragment gets a -mask wrapper).
+        mask: options.mask ? primary : undefined,
         linesClass: options.linesClass ?? "ak-line++",
         wordsClass: options.wordsClass ?? "ak-word++",
         charsClass: options.charsClass ?? "ak-char++",
@@ -98,6 +102,16 @@ function manualSplit(el: HTMLElement, options: SplitOptions): SplitResult {
     span.className = cls.replace("++", String(i));
     span.textContent = text;
     generated.push(span);
+    if (options.mask && type === "chars") {
+      // Mirror SplitText: each char inside an overflow-hidden mask wrapper.
+      // Return the wrapper so the caller inserts mask > span intact.
+      const mask = document.createElement("span");
+      mask.className = `${span.className}-mask`;
+      mask.style.overflow = "hidden";
+      mask.style.display = "inline-block";
+      mask.appendChild(span);
+      return mask;
+    }
     return span;
   };
 
@@ -131,7 +145,7 @@ function manualSplit(el: HTMLElement, options: SplitOptions): SplitResult {
   el.innerHTML = "";
   el.appendChild(frag);
 
-  if (options.mask) {
+  if (options.mask && type !== "chars") {
     gsap.set(generated, { display: "inline-block" });
   }
 

package/src/effects/clip-wipe.ts

@@ -0,0 +1,141 @@
+/**
+ * Clip wipe — a `clip-path: inset()` reveal.
+ *
+ * The element is collapsed behind one edge, corner (or inside a frame margin)
+ * and the inset animates to zero, wiping it into view:
+ *
+ *   from: "left"         inset(0 100% 0 0)   → grows rightward from the left edge
+ *   from: "right"        inset(0 0 0 100%)   → grows leftward from the right edge
+ *   from: "top"          inset(0 0 100% 0)   → grows downward from the top edge
+ *   from: "bottom"       inset(100% 0 0 0)   → grows upward from the bottom edge
+ *   from: "top-left"     inset(0 100% 100% 0)   → opens toward the bottom-right corner
+ *   from: "top-right"    inset(0 0 100% 100%)   → opens toward the bottom-left corner
+ *   from: "bottom-left"  inset(100% 100% 0 0)   → opens toward the top-right corner
+ *   from: "bottom-right" inset(100% 0 0 100%)   → opens toward the top-left corner
+ *   from: "frame"        inset(15% 15% 15% 15%) → opens out of a centered frame
+ *
+ * The wipe can also be bound to scroll progress (`scrub`), so the inset
+ * opens as the element travels through the viewport — the reveal then
+ * reverses with the scroll instead of playing once.
+ *
+ * Works on images, videos, blocks and text. destroy() kills the tween and
+ * removes the inline clip-path.
+ */
+import { gsap, ScrollTrigger, initGSAP } from "../core/gsap.js";
+import { guard } from "../core/guard.js";
+import { toArray } from "../core/util.js";
+import type { CommonOptions, Destroy, TargetLike } from "../core/types.js";
+
+export type ClipWipeFrom =
+  | "left"
+  | "right"
+  | "top"
+  | "bottom"
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right"
+  | "frame";
+
+export interface ClipWipeOptions extends CommonOptions {
+  /** Which edge or corner the wipe starts from. @default "left" */
+  from?: ClipWipeFrom;
+  /** Frame margin in % (only used when `from: "frame"`). @default 15 */
+  inset?: number;
+  /** Animation duration, seconds. @default 1 */
+  duration?: number;
+  /** GSAP ease. @default "power3.out" */
+  ease?: string;
+  /** Stagger between targets, seconds. @default 0.08 */
+  stagger?: number;
+  /** Delay before playing, seconds. @default 0 */
+  delay?: number;
+  /** "scroll" plays on enter, "immediate" plays at once. @default "scroll" */
+  mode?: "scroll" | "immediate";
+  /** ScrollTrigger start position. @default "top 85%" */
+  start?: string;
+  /** ScrollTrigger end position (scrub mode). @default "top 20%" */
+  end?: string;
+  /** Re-wipe when leaving / re-entering the viewport. @default false */
+  replay?: boolean;
+  /**
+   * Bind the wipe to scroll progress instead of playing it on enter —
+   * number = scrub smoothing seconds, `true` = immediate. unset = one-shot.
+   */
+  scrub?: number | boolean;
+}
+
+const FROM: Record<string, string> = {
+  left: "inset(0% 100% 0% 0%)",
+  right: "inset(0% 0% 0% 100%)",
+  top: "inset(0% 0% 100% 0%)",
+  bottom: "inset(100% 0% 0% 0%)",
+  "top-left": "inset(0% 100% 100% 0%)",
+  "top-right": "inset(0% 0% 100% 100%)",
+  "bottom-left": "inset(100% 100% 0% 0%)",
+  "bottom-right": "inset(100% 0% 0% 100%)",
+};
+const TO = "inset(0% 0% 0% 0%)";
+
+export function clipWipe(target: TargetLike, options: ClipWipeOptions = {}): Destroy {
+  initGSAP();
+
+  const {
+    from = "left",
+    inset = 15,
+    duration = 1,
+    ease = "power3.out",
+    stagger = 0.08,
+    delay = 0,
+    mode = "scroll",
+    start = "top 85%",
+    end = "top 20%",
+    replay = false,
+    scrub,
+  } = options;
+
+  const els = toArray<HTMLElement>(target);
+  if (!els.length) return () => {};
+
+  return guard(options, run);
+
+  function run(): Destroy {
+    const startClip = from === "frame" ? `inset(${inset}% ${inset}% ${inset}% ${inset}%)` : FROM[from];
+
+    gsap.set(els, { clipPath: startClip });
+
+    const vars: gsap.TweenVars = {
+      clipPath: TO,
+      duration,
+      ease,
+      stagger,
+      delay,
+      overwrite: "auto",
+    };
+    if (scrub !== undefined) {
+      vars.ease = "none";
+      vars.scrollTrigger = {
+        trigger: els[0],
+        start,
+        end,
+        scrub: scrub === true ? true : scrub,
+      };
+    } else if (mode === "scroll") {
+      vars.scrollTrigger = {
+        trigger: els[0],
+        start,
+        toggleActions: replay ? "play reverse play reverse" : "play none none none",
+      };
+    }
+
+    const tween = gsap.to(els, vars);
+    ScrollTrigger.refresh();
+
+    return () => {
+      tween.scrollTrigger?.kill();
+      tween.kill();
+      gsap.set(els, { clearProps: "clipPath" });
+      ScrollTrigger.refresh();
+    };
+  }
+}

package/src/effects/counter.ts

@@ -4,8 +4,11 @@
  * Drives an element's `textContent` from `from` to `to` with an easing curve,
  * optionally triggered by ScrollTrigger. Uses integer stepping so there is no
  * fractional flicker, and pairs with `tabular-nums` for stable layout.
+ * `progress: true` swaps the timed tween for a scrubbed one — the number
+ * follows scroll progress (a hero percentage readout).
  *
  *   counter("[data-count]", { to: 100, duration: 4, ease: "power1.inOut" })
+ *   counter("[data-progress]", { progress: true, pad: 2, suffix: "%" })
  */
 import { gsap, ScrollTrigger, initGSAP, killTweens } from "../core/gsap.js";
 import { guard } from "../core/guard.js";
@@ -27,7 +30,16 @@ export interface CounterOptions extends CommonOptions {
   suffix?: string;
   /** Animate when scrolled into view instead of immediately. @default false */
   onScroll?: boolean;
+  /**
+   * Drive the number from scroll progress instead of a timed tween: the value
+   * scrubs from `from` to `to` across `start` → `end`. Ignores `onScroll`.
+   * @default false
+   */
+  progress?: boolean;
+  /** ScrollTrigger start position (`onScroll` or `progress`). @default "top 90%" */
   start?: string;
+  /** ScrollTrigger end position (only with `progress`). @default "bottom top" */
+  end?: string;
   onComplete?: (value: number) => void;
 }
 
@@ -45,7 +57,9 @@ export function counter(target: TargetLike, options: CounterOptions = {}): Destr
     pad = 0,
     suffix = "",
     onScroll = false,
+    progress = false,
     start = "top 90%",
+    end = "bottom top",
     onComplete,
   } = options;
 
@@ -67,20 +81,26 @@ export function counter(target: TargetLike, options: CounterOptions = {}): Destr
         duration,
         ease,
         onUpdate: render,
-        onComplete: () => {
-          render();
-          onComplete?.(Math.round(state.v));
-        },
+        onComplete: progress
+          ? undefined
+          : () => {
+              render();
+              onComplete?.(Math.round(state.v));
+            },
       };
 
-      if (onScroll) {
+      if (progress) {
+        // Scroll-bound: value follows viewport progress, no timed completion.
+        vars.ease = "none";
+        vars.scrollTrigger = { trigger: el, start, end, scrub: true };
+      } else if (onScroll) {
         vars.scrollTrigger = { trigger: el, start, once: true };
       }
 
       tweens.push(gsap.to(state, vars));
     });
 
-    if (onScroll) ScrollTrigger.refresh();
+    if (onScroll || progress) ScrollTrigger.refresh();
 
     return () => {
       tweens.forEach((t) => {

package/src/effects/cursor-follower.ts

@@ -5,6 +5,10 @@
  * whole thing fades/blurs in when the pointer enters the hot zone. The label
  * uses `mix-blend-mode: exclusion` so it inverts over any background.
  *
+ * The tag is pinned `position: fixed` and driven in VIEWPORT space
+ * (clientX/clientY + offset), so it can live anywhere in the DOM — it only
+ * reacts while the pointer is over the zone.
+ *
  *   cursorFollower(zone, { follower: ".ak-cursor" })
  */
 import { gsap, initGSAP, killTweens } from "../core/gsap.js";
@@ -51,7 +55,11 @@ export function cursorFollower(
     };
 
     el.style.mixBlendMode = blendMode as never;
-    el.style.position = "absolute";
+    // Viewport space: position:fixed + clientX/clientY keeps the tag at the
+    // pointer wherever it sits in the DOM. (The old position:absolute +
+    // zone-relative math only lined up when the tag was a child of the zone —
+    // a body-level tag landed near the document origin instead, off-screen.)
+    el.style.position = "fixed";
     el.style.left = "0";
     el.style.top = "0";
     el.style.pointerEvents = "none";
@@ -61,10 +69,19 @@ export function cursorFollower(
     const xTo = gsap.quickTo(el, "x", { ...spring, duration: 0.4, ease: "power3" });
     const yTo = gsap.quickTo(el, "y", { ...spring, duration: 0.4, ease: "power3" });
 
+    // First move lands on the pointer; later moves spring after it — starting
+    // from (0,0), the spring would otherwise carry the tag in from the corner.
+    let snapped = false;
     const onMove = (e: PointerEvent) => {
-      const r = area.getBoundingClientRect();
-      xTo(e.clientX - r.left + offset);
-      yTo(e.clientY - r.top + offset);
+      const x = e.clientX + offset;
+      const y = e.clientY + offset;
+      if (snapped) {
+        xTo(x);
+        yTo(y);
+      } else {
+        gsap.set(el, { x, y });
+        snapped = true;
+      }
       if (fade) gsap.to(el, { opacity: 1, duration: 0.25, overwrite: "auto" });
     };