@emekaugbanu/trigr 0.4.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +14 -19
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -6,17 +6,12 @@
6
6
  - [Landing Page](https://emeka-ugbanu-hub.github.io/Trigr/example) — real-world demo showcasing every feature
7
7
 
8
8
  ```bash
9
- npm install trigr
9
+ npm install @emekaugbanu/trigr
10
10
  ```
11
11
 
12
- ---
13
-
14
- ## How it works
15
-
16
- trigr maps content shape to animation behavior. Use the React components for full trigger/lifecycle management, or import the keyframes directly for use with Vue, Angular, Svelte, or vanilla JS via the Web Animations API.
17
-
18
12
  ```tsx
19
- import { Animate } from "trigr/text"
13
+ import { Animate } from "@emekaugbanu/trigr/text"
14
+ ```
20
15
 
21
16
  <Animate.Text trigger="change" animation="fadeSwap">
22
17
  <span>{label}</span>
@@ -30,10 +25,10 @@ The import tells trigr what kind of content is being animated. The `trigger` pro
30
25
  Each module is an independent subpath export. There is no root `import { Animate } from "trigr"` — pick the module you need:
31
26
 
32
27
  ```tsx
33
- import { Animate } from "trigr/text" // Animate.Text
34
- import { Animate } from "trigr/block" // Animate.Block, Parallax
35
- import { Animate } from "trigr/paragraph" // Animate.Paragraph
36
- import { Animate } from "trigr/list" // Animate.List
28
+ import { Animate } from "@emekaugbanu/trigr/text" // Animate.Text
29
+ import { Animate } from "@emekaugbanu/trigr/block" // Animate.Block, Parallax
30
+ import { Animate } from "@emekaugbanu/trigr/paragraph" // Animate.Paragraph
31
+ import { Animate } from "@emekaugbanu/trigr/list" // Animate.List
37
32
  ```
38
33
 
39
34
  This keeps the bundle small. Import only the modules you use and bundlers tree-shake the rest.
@@ -44,8 +39,8 @@ The animation data (presets, easing constants, keyframes) is available without R
44
39
 
45
40
  ```ts
46
41
  // Any framework — no React required
47
- import { presets, SPRING, SMOOTH } from "trigr/text/keyframes"
48
- import { presets, presetCategory } from "trigr/block/keyframes"
42
+ import { presets, SPRING, SMOOTH } from "@emekaugbanu/trigr/text/keyframes"
43
+ import { presets, presetCategory } from "@emekaugbanu/trigr/block/keyframes"
49
44
 
50
45
  el.animate(
51
46
  presets.fadeSwap.in,
@@ -206,7 +201,7 @@ For lists, exits fire automatically when a keyed child is removed:
206
201
  `trigr/text` — 75 presets for short inline text. The animation operates on words, characters, or labels. Nested styled children like `<span className="stat-value">200+</span>` are preserved through text-replacing animations (odometer, ticker, typewriter, scramble, decoder).
207
202
 
208
203
  ```tsx
209
- import { Animate } from "trigr/text"
204
+ import { Animate } from "@emekaugbanu/trigr/text"
210
205
 
211
206
  // Animate inside a styled child — .stat-value class stays attached
212
207
  <Animate.Text trigger="change" animation="odometer">
@@ -229,7 +224,7 @@ import { Animate } from "trigr/text"
229
224
  `trigr/paragraph` — 42 presets for prose. Animations use visual-line measurement for morphText and word/line-level effects. The paragraph wrapper stays intact.
230
225
 
231
226
  ```tsx
232
- import { Animate } from "trigr/paragraph"
227
+ import { Animate } from "@emekaugbanu/trigr/paragraph"
233
228
 
234
229
  <Animate.Paragraph trigger="scroll" animation="wordFadeIn" threshold={0.4}>
235
230
  <p>Motion should support reading, not interrupt it.</p>
@@ -251,7 +246,7 @@ import { Animate } from "trigr/paragraph"
251
246
  `trigr/list` — 55 presets for keyed collections. Handles staggered entrances, item presence (add/remove), reorder animation, parallax, marquee, and exit animations.
252
247
 
253
248
  ```tsx
254
- import { Animate } from "trigr/list"
249
+ import { Animate } from "@emekaugbanu/trigr/list"
255
250
 
256
251
  <Animate.List
257
252
  trigger="scroll"
@@ -282,7 +277,7 @@ import { Animate } from "trigr/list"
282
277
  `trigr/block` — 79 presets for single elements. Supports entrance/exit, scroll-linked parallax, hover states, cursor tracking, overlays, drag gesture, and shared layout transitions.
283
278
 
284
279
  ```tsx
285
- import { Animate } from "trigr/block"
280
+ import { Animate } from "@emekaugbanu/trigr/block"
286
281
 
287
282
  <Animate.Block trigger="scroll" animation="slideUp" threshold={0.5}>
288
283
  <section className="card">Analytics</section>
@@ -315,7 +310,7 @@ import { Animate } from "trigr/block"
315
310
  ### Parallax
316
311
 
317
312
  ```tsx
318
- import { Parallax } from "trigr/block"
313
+ import { Parallax } from "@emekaugbanu/trigr/block"
319
314
 
320
315
  <Parallax type="parallaxFast" strength={0.4}>
321
316
  <img src={hero} alt="" />
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@emekaugbanu/trigr",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "description": "Content-aware animation library for React. One import per content type. One prop to trigger.",
5
5
  "license": "MIT",
6
6
  "author": "Emeka Ugbanu",