usetypoui 1.0.0

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.
package/LICENSE ADDED
@@ -0,0 +1,9 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 0xDragoon
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6
+
7
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8
+
9
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,91 @@
1
+ # TYPO
2
+
3
+ Kinetic typography engine. One component, 25 text effects.
4
+
5
+ ```
6
+ npm install typoui
7
+ ```
8
+
9
+ Give it a string and an effect. It animates text with physics: liquid morph, glitch, typewriter with mistakes, handwriting simulation, gravity drop, magnetic repulsion from cursor, and 19 more.
10
+
11
+ ## Quick Start
12
+
13
+ ```jsx
14
+ import { Typo } from 'typoui'
15
+
16
+ <Typo text="hello world" effect="liquid" />
17
+ <Typo text="BREAKING" effect="glitch" loop />
18
+ <Typo text="Once upon a time..." effect="typewriter" duration={3000} />
19
+ <Typo text="Move your cursor" effect="magnetic" />
20
+ ```
21
+
22
+ ## 25 Effects
23
+
24
+ | Effect | Description |
25
+ |--------|------------|
26
+ | `liquid` | Characters morph and flow like water |
27
+ | `glitch` | Random offset, color split, character swap |
28
+ | `typewriter` | Types out with realistic timing and mistakes |
29
+ | `handwriting` | Pen stroke wobble, tilt, gradual reveal |
30
+ | `gravity` | Characters fall from above and bounce |
31
+ | `magnetic` | Characters repel from cursor position |
32
+ | `wave` | Sine wave propagation through text |
33
+ | `scramble` | Random characters resolve to real text |
34
+ | `fade` | Staggered fade-in with upward drift |
35
+ | `bounce` | Spring physics bounce per character |
36
+ | `split` | Characters fly in from random directions |
37
+ | `blur` | Focus sweep from blurry to sharp |
38
+ | `rotate` | Characters rotate into place |
39
+ | `scale` | Characters scale up from zero with elastic |
40
+ | `slide` | Characters slide in alternating directions |
41
+ | `rainbow` | Cycling hue per character |
42
+ | `neon` | Neon glow flicker effect |
43
+ | `matrix` | Green rain resolving to text |
44
+ | `shatter` | Text appears whole then shatters outward |
45
+ | `elastic` | Spring overshoot on each character |
46
+ | `breath` | Continuous gentle scale breathing (loops) |
47
+ | `flicker` | Random opacity like old film |
48
+ | `drip` | Characters drip downward like paint |
49
+ | `magnet` | Characters snap together from scattered |
50
+ | `phantom` | Ghost trails following each character |
51
+
52
+ ## Props
53
+
54
+ | Prop | Default | Description |
55
+ |------|---------|------------|
56
+ | `text` | required | Text to animate |
57
+ | `effect` | `'fade'` | Effect name |
58
+ | `duration` | `1000` | Animation duration in ms |
59
+ | `stagger` | `30` | Delay between characters in ms |
60
+ | `trigger` | `'mount'` | When to start: mount, hover, click, scroll, manual |
61
+ | `loop` | `false` | Loop the animation |
62
+ | `loopDelay` | `2000` | Delay between loops in ms |
63
+ | `color` | inherit | Text color |
64
+ | `fontSize` | inherit | Font size in px |
65
+ | `fontFamily` | inherit | Font family |
66
+ | `fontWeight` | inherit | Font weight |
67
+ | `interactive` | `true` | Cursor-reactive |
68
+ | `speed` | `1` | Speed multiplier |
69
+ | `intensity` | `1` | Effect intensity 0-1 |
70
+ | `as` | `'span'` | HTML tag to render |
71
+ | `onComplete` | - | Callback when done |
72
+
73
+ ## Vanilla JS
74
+
75
+ ```js
76
+ import { animateText } from 'typoui'
77
+
78
+ const el = document.querySelector('.title')
79
+ const stop = animateText(el, 'Hello World', 'gravity', { duration: 1500 })
80
+
81
+ // Later
82
+ stop()
83
+ ```
84
+
85
+ ## Disclaimer
86
+
87
+ Experimental, open-source software. Provided as-is. No warranties. DYOR. Built by [0xDragoon](https://github.com/dragoon0x).
88
+
89
+ ## License
90
+
91
+ MIT
@@ -0,0 +1,98 @@
1
+ import React from 'react';
2
+
3
+ type TypoEffect = 'liquid' | 'glitch' | 'typewriter' | 'handwriting' | 'gravity' | 'magnetic' | 'wave' | 'scramble' | 'fade' | 'bounce' | 'split' | 'blur' | 'rotate' | 'scale' | 'slide' | 'rainbow' | 'neon' | 'matrix' | 'shatter' | 'elastic' | 'breath' | 'flicker' | 'drip' | 'magnet' | 'phantom' | 'spiral' | 'cascade' | 'rubberband' | 'swing' | 'unfold' | 'pixelate' | 'spring' | 'tornado' | 'domino' | 'inflate' | 'x-ray' | 'ticker' | 'pop' | 'earthquake' | 'dissolve' | 'origami' | 'spotlight' | 'morse' | 'rippletext' | 'conveyor' | 'pendulum' | 'static' | 'emerge' | 'float' | 'vhs' | 'stamp' | 'orbit' | 'rewind' | 'thermal' | 'pulse' | 'slash' | 'cipher' | 'levitate' | 'whip' | 'cascade3d' | 'melt' | 'assemble' | 'vertigo' | 'radar' | 'firework' | 'telegraph' | 'unfurl' | 'sway' | 'jitter' | 'crash' | 'warp' | 'scatter' | 'tilt' | 'glow' | 'countdown' | 'ricochet';
4
+ type TypoTrigger = 'mount' | 'hover' | 'click' | 'scroll' | 'manual';
5
+ interface TypoConfig {
6
+ /** Text to animate */
7
+ text: string;
8
+ /** Effect type. Default: 'fade' */
9
+ effect?: TypoEffect;
10
+ /** Animation duration in ms. Default: 1000 */
11
+ duration?: number;
12
+ /** Stagger delay between characters in ms. Default: 30 */
13
+ stagger?: number;
14
+ /** When to trigger. Default: 'mount' */
15
+ trigger?: TypoTrigger;
16
+ /** Loop the animation. Default: false */
17
+ loop?: boolean;
18
+ /** Loop delay in ms. Default: 2000 */
19
+ loopDelay?: number;
20
+ /** CSS color. Default: 'inherit' */
21
+ color?: string;
22
+ /** Font size in px. Default: inherit */
23
+ fontSize?: number;
24
+ /** Font family. Default: inherit */
25
+ fontFamily?: string;
26
+ /** Font weight. Default: inherit */
27
+ fontWeight?: number | string;
28
+ /** Cursor-reactive (for magnetic, etc). Default: true */
29
+ interactive?: boolean;
30
+ /** Animation easing. Default: 'ease-out' */
31
+ easing?: string;
32
+ /** Custom CSS class */
33
+ className?: string;
34
+ /** Inline styles */
35
+ style?: Record<string, any>;
36
+ /** Callback when animation completes */
37
+ onComplete?: () => void;
38
+ /** Speed multiplier. Default: 1 */
39
+ speed?: number;
40
+ /** Intensity of the effect 0-1. Default: 1 */
41
+ intensity?: number;
42
+ }
43
+ interface TypoProps extends TypoConfig {
44
+ /** HTML tag to render. Default: 'span' */
45
+ as?: keyof HTMLElementTagNameMap;
46
+ }
47
+ interface CharState {
48
+ char: string;
49
+ index: number;
50
+ x: number;
51
+ y: number;
52
+ opacity: number;
53
+ scale: number;
54
+ rotation: number;
55
+ blur: number;
56
+ offsetX: number;
57
+ offsetY: number;
58
+ color: string;
59
+ progress: number;
60
+ velocity: number;
61
+ extra: Record<string, number>;
62
+ }
63
+ declare const ALL_EFFECTS: TypoEffect[];
64
+
65
+ declare function Typo({ text, effect, duration, stagger, trigger, loop, loopDelay, color, fontSize, fontFamily, fontWeight, interactive, easing, className, style, onComplete, speed, intensity, as: Tag, }: TypoProps): React.ReactElement<{
66
+ ref: any;
67
+ className: string | undefined;
68
+ style: React.CSSProperties;
69
+ onClick: (() => void) | undefined;
70
+ onMouseEnter: (() => void) | undefined;
71
+ 'aria-label': string;
72
+ role: any;
73
+ }, string | React.JSXElementConstructor<any>>;
74
+ declare function animateText(element: HTMLElement, text: string, effect: string, config?: Partial<TypoConfig>): () => void;
75
+
76
+ interface CharStyle {
77
+ opacity: number;
78
+ transform: string;
79
+ color?: string;
80
+ textShadow?: string;
81
+ filter?: string;
82
+ display?: string;
83
+ letterContent?: string;
84
+ }
85
+ type EffectFn = (p: number, i: number, total: number, t: number, cfg: EffectCtx) => CharStyle;
86
+ interface EffectCtx {
87
+ duration: number;
88
+ stagger: number;
89
+ intensity: number;
90
+ mouseX: number;
91
+ mouseY: number;
92
+ charRects: DOMRect[];
93
+ scrollProgress: number;
94
+ }
95
+ declare function getEffect(name: TypoEffect): EffectFn;
96
+ declare function getAllEffectNames(): TypoEffect[];
97
+
98
+ export { ALL_EFFECTS, type CharState, type CharStyle, type EffectCtx, type EffectFn, Typo, type TypoConfig, type TypoEffect, type TypoProps, type TypoTrigger, animateText, getAllEffectNames, getEffect };
@@ -0,0 +1,98 @@
1
+ import React from 'react';
2
+
3
+ type TypoEffect = 'liquid' | 'glitch' | 'typewriter' | 'handwriting' | 'gravity' | 'magnetic' | 'wave' | 'scramble' | 'fade' | 'bounce' | 'split' | 'blur' | 'rotate' | 'scale' | 'slide' | 'rainbow' | 'neon' | 'matrix' | 'shatter' | 'elastic' | 'breath' | 'flicker' | 'drip' | 'magnet' | 'phantom' | 'spiral' | 'cascade' | 'rubberband' | 'swing' | 'unfold' | 'pixelate' | 'spring' | 'tornado' | 'domino' | 'inflate' | 'x-ray' | 'ticker' | 'pop' | 'earthquake' | 'dissolve' | 'origami' | 'spotlight' | 'morse' | 'rippletext' | 'conveyor' | 'pendulum' | 'static' | 'emerge' | 'float' | 'vhs' | 'stamp' | 'orbit' | 'rewind' | 'thermal' | 'pulse' | 'slash' | 'cipher' | 'levitate' | 'whip' | 'cascade3d' | 'melt' | 'assemble' | 'vertigo' | 'radar' | 'firework' | 'telegraph' | 'unfurl' | 'sway' | 'jitter' | 'crash' | 'warp' | 'scatter' | 'tilt' | 'glow' | 'countdown' | 'ricochet';
4
+ type TypoTrigger = 'mount' | 'hover' | 'click' | 'scroll' | 'manual';
5
+ interface TypoConfig {
6
+ /** Text to animate */
7
+ text: string;
8
+ /** Effect type. Default: 'fade' */
9
+ effect?: TypoEffect;
10
+ /** Animation duration in ms. Default: 1000 */
11
+ duration?: number;
12
+ /** Stagger delay between characters in ms. Default: 30 */
13
+ stagger?: number;
14
+ /** When to trigger. Default: 'mount' */
15
+ trigger?: TypoTrigger;
16
+ /** Loop the animation. Default: false */
17
+ loop?: boolean;
18
+ /** Loop delay in ms. Default: 2000 */
19
+ loopDelay?: number;
20
+ /** CSS color. Default: 'inherit' */
21
+ color?: string;
22
+ /** Font size in px. Default: inherit */
23
+ fontSize?: number;
24
+ /** Font family. Default: inherit */
25
+ fontFamily?: string;
26
+ /** Font weight. Default: inherit */
27
+ fontWeight?: number | string;
28
+ /** Cursor-reactive (for magnetic, etc). Default: true */
29
+ interactive?: boolean;
30
+ /** Animation easing. Default: 'ease-out' */
31
+ easing?: string;
32
+ /** Custom CSS class */
33
+ className?: string;
34
+ /** Inline styles */
35
+ style?: Record<string, any>;
36
+ /** Callback when animation completes */
37
+ onComplete?: () => void;
38
+ /** Speed multiplier. Default: 1 */
39
+ speed?: number;
40
+ /** Intensity of the effect 0-1. Default: 1 */
41
+ intensity?: number;
42
+ }
43
+ interface TypoProps extends TypoConfig {
44
+ /** HTML tag to render. Default: 'span' */
45
+ as?: keyof HTMLElementTagNameMap;
46
+ }
47
+ interface CharState {
48
+ char: string;
49
+ index: number;
50
+ x: number;
51
+ y: number;
52
+ opacity: number;
53
+ scale: number;
54
+ rotation: number;
55
+ blur: number;
56
+ offsetX: number;
57
+ offsetY: number;
58
+ color: string;
59
+ progress: number;
60
+ velocity: number;
61
+ extra: Record<string, number>;
62
+ }
63
+ declare const ALL_EFFECTS: TypoEffect[];
64
+
65
+ declare function Typo({ text, effect, duration, stagger, trigger, loop, loopDelay, color, fontSize, fontFamily, fontWeight, interactive, easing, className, style, onComplete, speed, intensity, as: Tag, }: TypoProps): React.ReactElement<{
66
+ ref: any;
67
+ className: string | undefined;
68
+ style: React.CSSProperties;
69
+ onClick: (() => void) | undefined;
70
+ onMouseEnter: (() => void) | undefined;
71
+ 'aria-label': string;
72
+ role: any;
73
+ }, string | React.JSXElementConstructor<any>>;
74
+ declare function animateText(element: HTMLElement, text: string, effect: string, config?: Partial<TypoConfig>): () => void;
75
+
76
+ interface CharStyle {
77
+ opacity: number;
78
+ transform: string;
79
+ color?: string;
80
+ textShadow?: string;
81
+ filter?: string;
82
+ display?: string;
83
+ letterContent?: string;
84
+ }
85
+ type EffectFn = (p: number, i: number, total: number, t: number, cfg: EffectCtx) => CharStyle;
86
+ interface EffectCtx {
87
+ duration: number;
88
+ stagger: number;
89
+ intensity: number;
90
+ mouseX: number;
91
+ mouseY: number;
92
+ charRects: DOMRect[];
93
+ scrollProgress: number;
94
+ }
95
+ declare function getEffect(name: TypoEffect): EffectFn;
96
+ declare function getAllEffectNames(): TypoEffect[];
97
+
98
+ export { ALL_EFFECTS, type CharState, type CharStyle, type EffectCtx, type EffectFn, Typo, type TypoConfig, type TypoEffect, type TypoProps, type TypoTrigger, animateText, getAllEffectNames, getEffect };
package/dist/index.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";var at=Object.create;var H=Object.defineProperty;var st=Object.getOwnPropertyDescriptor;var ot=Object.getOwnPropertyNames;var it=Object.getPrototypeOf,ct=Object.prototype.hasOwnProperty;var pt=(r,e)=>{for(var s in e)H(r,s,{get:e[s],enumerable:!0})},Z=(r,e,s,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of ot(e))!ct.call(r,n)&&n!==s&&H(r,n,{get:()=>e[n],enumerable:!(i=st(e,n))||i.enumerable});return r};var lt=(r,e,s)=>(s=r!=null?at(it(r)):{},Z(e||!r||!r.__esModule?H(s,"default",{value:r,enumerable:!0}):s,r)),ut=r=>Z(H({},"__esModule",{value:!0}),r);var mt={};pt(mt,{ALL_EFFECTS:()=>Q,Typo:()=>J,animateText:()=>K,getAllEffectNames:()=>V,getEffect:()=>L});module.exports=ut(mt);var m=lt(require("react"));function c(r){return r<.5?2*r*r:-1+(4-2*r)*r}function _(r){return r*r*((1.70158+1)*r-1.70158)}function C(r){return r===0||r===1?r:Math.pow(2,-10*r)*Math.sin((r-.075)*(2*Math.PI)/.3)+1}function B(r,e,s){return Math.max(e,Math.min(s,r))}function p(r,e,s,i,n){let t=e*i/n;return B((r-t)/(1-t*(s>1?(s-1)/s:0)+.001),0,1)}var A="!@#$%^&*()_+-=[]{}|;:,.<>?/~`ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",G="\u30A2\u30A4\u30A6\u30A8\u30AA\u30AB\u30AD\u30AF\u30B1\u30B3\u30B5\u30B7\u30B9\u30BB\u30BD\u30BF\u30C1\u30C4\u30C6\u30C801",N={liquid(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=Math.sin(e*.5+i*3)*10*(1-t)*n.intensity,o=1+Math.sin(e*.8+i*4)*.3*(1-t)*n.intensity;return{opacity:c(t),transform:`translateY(${a}px) scaleY(${.5+t*.5+(o-1)*.2}) scaleX(${1+Math.sin(i*5+e)*.1*(1-t)})`,filter:t<.8?`blur(${(1-t)*2}px)`:void 0}},glitch(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=t<.7&&Math.random()>.6,o=a?(Math.random()-.5)*20*n.intensity:0,l=a?(Math.random()-.5)*8*n.intensity:0,u=a?(Math.random()-.5)*20:0;return{opacity:t>.1?1:0,transform:`translate(${o}px, ${l}px) skewX(${u}deg)`,color:a?Math.random()>.5?"#ff0040":"#00ffcc":void 0,textShadow:a?`${-o}px 0 #ff0040, ${o}px 0 #00ffcc`:void 0,letterContent:a&&Math.random()>.5?A[Math.floor(Math.random()*A.length)]:void 0}},typewriter(r,e,s,i,n){let t=Math.floor(r*s*1.3),a=e<=t,o=e===Math.min(t,s-1),l=Math.sin(e*7.3)>.7&&r*s>e-.5&&r*s<e+.3;return{opacity:a?1:0,transform:"none",letterContent:l?A[Math.floor(Math.abs(Math.sin(e*13.7))*26)]:void 0,textShadow:o?"none":void 0}},handwriting(r,e,s,i,n){let t=p(r,e,s,n.stagger*2,n.duration),a=Math.sin(e*3.7+i*2)*1.5*n.intensity,o=Math.cos(e*2.3+i*1.5)*1*n.intensity,l=Math.sin(e*1.7)*3*n.intensity,u=t<.3?t/.3:1;return{opacity:t>0?Math.min(1,t*2):0,transform:`translate(${a}px, ${o}px) rotate(${l*(1-t*.5)}deg) scale(${.8+u*.2})`}},gravity(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=-300*n.intensity,o=C(t),l=a*(1-o),u=(1-t)*(e%2?1:-1)*180*n.intensity;return{opacity:t>.05?1:0,transform:`translateY(${l}px) rotate(${u}deg)`}},magnetic(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=n.charRects[e];if(!a)return{opacity:c(t),transform:"none"};let o=a.left+a.width/2,l=a.top+a.height/2,u=o-n.mouseX,d=l-n.mouseY,h=Math.sqrt(u*u+d*d)+1,v=Math.min(30,3e3/h)*n.intensity*t,$=u/h*v,X=d/h*v;return{opacity:c(t),transform:`translate(${$}px, ${X}px)`}},wave(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=Math.sin(e*.4+i*4)*15*n.intensity,o=Math.sin(e*.3+i*3)*5*n.intensity;return{opacity:c(Math.min(1,t*1.5)),transform:`translateY(${a*t}px) rotate(${o*t}deg)`}},scramble(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=t>.7;return{opacity:t>.05?1:0,transform:a?"none":`translateY(${(Math.random()-.5)*4}px)`,letterContent:a?void 0:A[Math.floor(Math.random()*A.length)]}},fade(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration);return{opacity:c(t),transform:`translateY(${(1-c(t))*20*n.intensity}px)`}},bounce(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=-100*(1-C(t))*n.intensity;return{opacity:t>.05?1:0,transform:`translateY(${a}px)`}},split(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=e/s*Math.PI*2+e*.5,o=200*(1-c(t))*n.intensity,l=Math.cos(a)*o,u=Math.sin(a)*o;return{opacity:c(t),transform:`translate(${l}px, ${u}px) rotate(${(1-t)*360}deg)`}},blur(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=(1-c(t))*12*n.intensity;return{opacity:.3+t*.7,transform:`scale(${.9+t*.1})`,filter:`blur(${a}px)`}},rotate(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=(1-_(t))*(e%2?90:-90)*n.intensity;return{opacity:c(t),transform:`rotate(${a}deg) scale(${.5+t*.5})`}},scale(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=C(t);return{opacity:t>.05?1:0,transform:`scale(${a})`}},slide(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=(1-c(t))*60*n.intensity*(e%2?1:-1);return{opacity:c(t),transform:`translateX(${a}px)`}},rainbow(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=(e/s*360+i*100)%360;return{opacity:c(t),transform:`translateY(${(1-c(t))*15}px)`,color:`hsl(${a}, 80%, 65%)`}},neon(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=t>.3?Math.sin(i*20+e*5)>.3?1:.3:0,o=t>.5?`0 0 ${5+Math.sin(i*8+e)*3}px currentColor, 0 0 ${15+Math.sin(i*6+e*2)*5}px currentColor`:"none";return{opacity:t*a,transform:"none",textShadow:o}},matrix(r,e,s,i,n){let t=p(r,e,s,n.stagger*2,n.duration),a=t>.8,o=!a&&t>0;return{opacity:t>.05?1:0,transform:o?`translateY(${(1-t)*-30}px)`:"none",color:a?void 0:"#00ff41",letterContent:o?G[Math.floor(Math.random()*G.length)]:void 0,textShadow:o?"0 0 8px #00ff41":void 0}},shatter(r,e,s,i,n){if(r<.3)return{opacity:1,transform:"none"};let a=(r-.3)/(1-.3),o=(e*2.7+e*e*.3)%(Math.PI*2),l=a*300*n.intensity*(.5+Math.abs(Math.sin(e*1.7))*.5),u=Math.cos(o)*l,d=Math.sin(o)*l+a*a*200,h=a*(e%2?1:-1)*360;return{opacity:Math.max(0,1-a*1.5),transform:`translate(${u}px, ${d}px) rotate(${h}deg) scale(${1-a*.5})`}},elastic(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=C(t),o=t<.5?0:Math.sin(t*Math.PI*4)*5*(1-t)*n.intensity;return{opacity:t>.05?1:0,transform:`translateY(${-30*(1-a)+o}px) scaleX(${.8+a*.2+Math.sin(t*6)*.05})`}},breath(r,e,s,i,n){let t=Math.sin(i*2+e*.3)*.5+.5,a=1+t*.08*n.intensity,o=Math.sin(i*2+e*.3)*3*n.intensity;return{opacity:.7+t*.3,transform:`scale(${a}) translateY(${o}px)`}},flicker(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),o=Math.sin(i*30+e*17.3)*Math.cos(i*23+e*11.7)>0?1:.1;return{opacity:t*(t>.8?1:o),transform:`translateY(${(1-t)*10}px)`}},drip(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=t>.5?(t-.5)*2:0,o=1+a*.4*n.intensity*Math.abs(Math.sin(e*2.3)),l=a*20*n.intensity*Math.abs(Math.sin(e*3.1));return{opacity:c(t),transform:`translateY(${(1-t)*-30+l}px) scaleY(${o})`}},magnet(r,e,s,i,n){let t=p(r,e,s,n.stagger*.5,n.duration),a=1-_(Math.min(1,t*1.2)),o=Math.sin(e*7.3+1)*300*n.intensity,l=Math.cos(e*4.1+2)*200*n.intensity,u=Math.sin(e*5.7)*180*a;return{opacity:.3+t*.7,transform:`translate(${o*a}px, ${l*a}px) rotate(${u}deg)`}},phantom(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=Math.sin(i*3+e*.5)*5*n.intensity,o=.15+Math.sin(i*2+e)*.1;return{opacity:c(t),transform:`translateX(${a*(1-t*.5)}px)`,textShadow:t>.3?`${a}px ${a*.5}px 4px rgba(255,255,255,${o})`:"none"}},spiral(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=(1-c(t))*Math.PI*4+e*.3,o=(1-c(t))*200*n.intensity;return{opacity:c(t),transform:`translate(${Math.cos(a)*o}px, ${Math.sin(a)*o}px) rotate(${(1-t)*720}deg)`}},cascade(r,e,s,i,n){let t=p(r,e,s,n.stagger*1.5,n.duration),a=(1-c(t))*-80*n.intensity,o=(1-c(t))*-60*n.intensity;return{opacity:c(t),transform:`translate(${a}px, ${o}px)`}},rubberband(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=t<.4?1+t/.4*1.5*n.intensity:1+(1-(t-.4)/.6)*.3;return{opacity:t>.05?1:0,transform:`scaleX(${a}) scaleY(${2-a})`}},swing(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=Math.sin(t*Math.PI*3)*40*(1-t)*n.intensity;return{opacity:c(t),transform:`rotate(${a}deg) translateY(${(1-t)*-20}px)`}},unfold(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=(1-c(t))*90*n.intensity;return{opacity:c(t),transform:`perspective(400px) rotateX(${a}deg) translateY(${(1-t)*-15}px)`}},pixelate(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=t<.6?(Math.random()-.5)*6:0;return{opacity:t>.1?1:0,transform:`translate(${a}px, ${a}px) scale(${.5+t*.5})`,filter:t<.5?`blur(${(1-t*2)*4}px)`:void 0,letterContent:t<.4?"\u2588":void 0}},spring(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=Math.sin(t*Math.PI*5)*20*(1-t)*n.intensity;return{opacity:c(t),transform:`translateY(${a+(1-t)*-40}px)`}},tornado(r,e,s,i,n){let t=p(r,e,s,n.stagger*.5,n.duration),a=(1-t)*Math.PI*6,o=(1-c(t))*150*n.intensity,l=(1-t)*-200;return{opacity:c(t),transform:`translate(${Math.cos(a+e)*o}px, ${l+Math.sin(a)*20}px) rotate(${(1-t)*540}deg)`}},domino(r,e,s,i,n){let t=e*.08,a=B((r-t)/(1-t+.001),0,1),o=a<.5?(1-a*2)*90*n.intensity:Math.sin((a-.5)*Math.PI*4)*10*(1-a);return{opacity:a>.02?1:0,transform:`rotate(${o}deg)`}},inflate(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=C(t),o=Math.sin(t*Math.PI*3)*.1*(1-t);return{opacity:t>.05?1:0,transform:`scale(${a+o}) translateY(${(1-t)*20}px)`}},"x-ray"(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=t<.6;return{opacity:c(t),transform:`scale(${.95+t*.05})`,color:a?"transparent":void 0,textShadow:a?"0 0 1px currentColor":"none"}},ticker(r,e,s,i,n){let t=p(r,e,s,n.stagger*.8,n.duration),a=(1-c(t))*100*n.intensity;return{opacity:c(t),transform:`translateX(${a}px)`}},pop(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=t<.5?_(t*2)*1.3:1+(1-(t-.5)*2)*.3;return{opacity:t>.05?1:0,transform:`scale(${Math.max(0,a)})`}},earthquake(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=(1-t)*n.intensity,o=(Math.sin(i*40+e*7)*8+Math.cos(i*33+e*11)*4)*a,l=Math.cos(i*37+e*5)*5*a;return{opacity:c(Math.min(1,t*1.5)),transform:`translate(${o}px, ${l}px)`}},dissolve(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=Math.sin(e*13.7+i*5)*.5+.5,o=t>a*.7;return{opacity:o?c(t):0,transform:o?"none":`scale(0.5) translateY(${(Math.random()-.5)*10}px)`}},origami(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=(1-c(t))*180*n.intensity*(e%2?1:-1);return{opacity:c(t),transform:`perspective(300px) rotateY(${a}deg) scale(${.8+t*.2})`}},spotlight(r,e,s,i,n){let t=r*(s+4)-2,a=Math.abs(e-t),o=Math.max(0,1-a/3);return{opacity:o,transform:`scale(${.9+o*.1})`}},morse(r,e,s,i,n){let t=p(r,e,s,n.stagger*2,n.duration);return{opacity:Math.floor(t*6)%2===0||t>.8?t>.8?1:.7:0,transform:"none"}},rippletext(r,e,s,i,n){let t=Math.floor(s/2),o=Math.abs(e-t)*.04,l=B((r-o)/(1-o+.001),0,1),u=(1-C(l))*30*n.intensity;return{opacity:c(l),transform:`translateY(${u}px) scale(${.8+C(l)*.2})`}},conveyor(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=(1-c(t))*-90,o=(1-c(t))*40;return{opacity:c(t),transform:`translateX(${o}px) rotate(${a}deg)`}},pendulum(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=Math.sin(t*Math.PI*4)*25*(1-t)*n.intensity;return{opacity:c(t),transform:`rotate(${a}deg)`}},static(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=t<.7,o=a?(Math.random()-.5)*3:0,l=a?(Math.random()-.5)*3:0;return{opacity:a?Math.random()>.3?.6:.1:c(t),transform:`translate(${o}px,${l}px)`,letterContent:a&&Math.random()>.6?String.fromCharCode(9608+Math.floor(Math.random()*4)):void 0}},emerge(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=(1-c(t))*40*n.intensity;return{opacity:c(t),transform:`translateY(${a}px) scale(${.9+t*.1})`}},float(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=Math.sin(i*1.5+e*.4)*8*n.intensity*t,o=Math.cos(i*1.2+e*.6)*3*n.intensity*t;return{opacity:c(t),transform:`translate(${o}px, ${(1-t)*30+a}px)`}},vhs(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=t<.6,o=a?Math.sin(i*30+e)*10*n.intensity:0,l=a?Math.sin(i*20)*5:0;return{opacity:a?.5+Math.random()*.3:c(t),transform:`translateX(${o}px) skewX(${l}deg)`,color:a&&Math.random()>.8?"#ff0060":void 0}},stamp(r,e,s,i,n){let t=p(r,e,s,n.stagger*.5,n.duration),a=t<.3?3*(1-t/.3)+1:1+Math.sin((t-.3)*Math.PI*3)*.05*(1-t);return{opacity:t>.05?Math.min(1,t*3):0,transform:`scale(${a})`}},orbit(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=(1-c(t))*Math.PI*2+e*.5,o=(1-c(t))*100*n.intensity;return{opacity:c(t),transform:`translate(${Math.cos(a)*o}px, ${Math.sin(a)*o*.5}px)`}},rewind(r,e,s,i,n){let t=r<.4,a=t?r/.4:1-(r-.4)/.6,o=p(a,e,s,n.stagger,n.duration);return{opacity:c(o),transform:`translateX(${(1-c(o))*(t?-30:30)}px)`}},thermal(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=Math.sin(i*8+e*3)*3*(1-t*.5)*n.intensity,o=Math.cos(i*6+e*5)*2*(1-t*.5);return{opacity:c(t),transform:`translate(${a}px, ${o}px) scaleY(${1+Math.sin(i*10+e)*.03})`}},pulse(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=1+Math.sin(i*6+e*.3)*.1*n.intensity*t;return{opacity:c(t),transform:`scale(${a})`}},slash(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=(1-c(t))*50*n.intensity,o=(1-c(t))*-50*n.intensity;return{opacity:c(t),transform:`translate(${a}px, ${o}px)`}},cipher(r,e,s,i,n){let t=p(r,e,s,n.stagger*1.5,n.duration),a=Math.floor(t*5),o="0123456789",l;return t<.8&&(l=o[Math.floor(Math.abs(Math.sin(i*10+e*7))*10)]),{opacity:t>.03?1:0,transform:`translateY(${(1-t)*8}px)`,letterContent:l}},levitate(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=Math.sin(i*2+e*.5)*5*n.intensity*t,o=(1-c(t))*40+a;return{opacity:c(t),transform:`translateY(${-o}px)`}},whip(r,e,s,i,n){let t=p(r,e,s,n.stagger*.6,n.duration),a=t<.5?(1-t*2)*-200*n.intensity:Math.sin((t-.5)*Math.PI*4)*8*(1-t);return{opacity:t>.05?1:0,transform:`translateX(${a}px)`}},cascade3d(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=(1-c(t))*60*n.intensity,o=(1-c(t))*-100;return{opacity:c(t),transform:`perspective(500px) rotateX(${a}deg) translateZ(${o}px)`}},melt(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration);if(r<.3)return{opacity:1,transform:"none"};let a=(r-.3)/.7,o=a*60*n.intensity*(.5+Math.abs(Math.sin(e*2.7))*.5),l=1+a*.6;return{opacity:Math.max(0,1-a*1.2),transform:`translateY(${o}px) scaleY(${l}) scaleX(${1-a*.3})`}},assemble(r,e,s,i,n){let t=p(r,e,s,n.stagger*.4,n.duration),o=e%3,l=(o===0?-1:o===1?0:1)*150*(1-c(t))*n.intensity,u=(o===1?-1:1)*100*(1-c(t))*n.intensity,d=(1-t)*(o-1)*90;return{opacity:c(t),transform:`translate(${l}px, ${u}px) rotate(${d}deg)`}},vertigo(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=(1-c(t))*360*2*n.intensity,o=.1+c(t)*.9;return{opacity:c(t),transform:`rotate(${a}deg) scale(${o})`}},radar(r,e,s,i,n){let t=r*s*1.5,a=Math.abs(e-t),o=Math.max(0,1-a/2),l=e<t-2;return{opacity:l?1:o,transform:l?"none":`scale(${.8+o*.2})`,color:o>.5&&!l?"#4ade80":void 0}},firework(r,e,s,i,n){if(r<.2)return{opacity:0,transform:"none"};if(r<.5){let l=(r-.2)/.3,u=e/s*Math.PI*2,d=C(l)*200*n.intensity;return{opacity:1,transform:`translate(${Math.cos(u)*d}px, ${Math.sin(u)*d}px)`}}let t=(r-.5)/.5,a=e/s*Math.PI*2,o=(1-c(t))*200*n.intensity;return{opacity:1,transform:`translate(${Math.cos(a)*o}px, ${Math.sin(a)*o}px)`}},telegraph(r,e,s,i,n){let t=p(r,e,s,n.stagger*3,n.duration),a=t>0&&t<.8;return{opacity:t>.1?1:0,transform:a?`translateY(${Math.sin(i*20)*2}px)`:"none",letterContent:a&&t<.5?"\xB7":void 0}},unfurl(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=(1-c(t))*-90*n.intensity,o=(1-c(t))*-20;return{opacity:c(t),transform:`perspective(400px) rotateY(${a}deg) translateX(${o}px)`}},sway(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=Math.sin(i*1.5+e*.4)*8*n.intensity*t,o=Math.sin(i*1.2+e*.3)*4*n.intensity*t;return{opacity:c(t),transform:`rotate(${a}deg) translateX(${o}px) translateY(${(1-t)*20}px)`}},jitter(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=(1-t)*n.intensity,o=Math.sin(i*50+e*13)*4*a,l=Math.cos(i*47+e*9)*3*a,u=Math.sin(i*53+e*17)*5*a;return{opacity:c(Math.min(1,t*1.3)),transform:`translate(${o}px,${l}px) rotate(${u}deg)`}},crash(r,e,s,i,n){let t=p(r,e,s,n.stagger*.3,n.duration),a=t<.4?(1-t/.4)*-400*n.intensity:Math.sin((t-.4)*Math.PI*6)*5*(1-t),o=t>.35&&t<.5?.7:1;return{opacity:t>.02?1:0,transform:`translateY(${a}px) scaleY(${o}) scaleX(${2-o})`}},warp(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=(1-c(t))*Math.sin(e*1.5)*40*n.intensity,o=.2+c(t)*.8+Math.sin(t*Math.PI)*.3;return{opacity:c(t),transform:`translateX(${a}px) scaleX(${o})`}},scatter(r,e,s,i,n){if(r<.2)return{opacity:1,transform:"none"};if(r<.6){let l=(r-.2)/.4,u=Math.sin(e*5.3)*200*c(l)*n.intensity,d=Math.cos(e*3.7)*150*c(l)*n.intensity;return{opacity:1,transform:`translate(${u}px, ${d}px) rotate(${l*180*(e%2?1:-1)}deg)`}}let t=(r-.6)/.4,a=Math.sin(e*5.3)*200*(1-c(t))*n.intensity,o=Math.cos(e*3.7)*150*(1-c(t))*n.intensity;return{opacity:1,transform:`translate(${a}px, ${o}px) rotate(${(1-t)*180*(e%2?1:-1)}deg)`}},tilt(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=(1-c(t))*45*n.intensity,o=(1-c(t))*(e%2?20:-20)*n.intensity;return{opacity:c(t),transform:`perspective(400px) rotateX(${a}deg) rotateY(${o}deg)`}},glow(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),a=c(t)*12*n.intensity;return{opacity:c(t),transform:`scale(${.95+t*.05})`,textShadow:`0 0 ${a}px currentColor, 0 0 ${a*2}px currentColor`}},countdown(r,e,s,i,n){let t=p(r,e,s,n.stagger*.5,n.duration),a=Math.floor((1-t)*4),o=["","1","2","3"],l=t<.7;return{opacity:t>.05?1:0,transform:l?`scale(${1.2-t*.3})`:`scale(${C(Math.min(1,(t-.7)/.3))})`,letterContent:l&&a>0?o[a]:void 0}},ricochet(r,e,s,i,n){let t=p(r,e,s,n.stagger,n.duration),o=t*3,l=Math.floor(o),u=o-l,d=l%2===0?-1:1,h=Math.pow(.6,l),v=(1-t)*d*150*h*n.intensity*Math.cos(u*Math.PI),$=(1-t)*-100*h*Math.abs(Math.sin(u*Math.PI));return{opacity:t>.02?1:0,transform:`translate(${v}px, ${$}px)`}}};function L(r){return N[r]||N.fade}function V(){return Object.keys(N)}function J({text:r,effect:e="fade",duration:s=1e3,stagger:i=30,trigger:n="mount",loop:t=!1,loopDelay:a=2e3,color:o,fontSize:l,fontFamily:u,fontWeight:d,interactive:h=!0,easing:v="ease-out",className:$,style:X,onComplete:k,speed:T=1,intensity:P=1,as:g="span"}){let x=(0,m.useRef)(null),I=(0,m.useRef)([]),E=(0,m.useRef)(0),Y=(0,m.useRef)(0),R=(0,m.useRef)({x:0,y:0}),[y,f]=(0,m.useState)(n==="mount"),[S,U]=(0,m.useState)([]),F=(0,m.useRef)(0),j=r.split(""),q=(0,m.useCallback)(()=>{let M=performance.now();Y.current||(Y.current=M);let b=(M-Y.current)*T,w=Math.min(1,b/s);F.current+=.016*T;let O=L(e),D=I.current.map(W=>W?.getBoundingClientRect()||new DOMRect),nt={duration:s,stagger:i,intensity:P,mouseX:R.current.x,mouseY:R.current.y,charRects:D,scrollProgress:0},et=j.map((W,rt)=>O(w,rt,j.length,F.current,nt));U(et),w<1||e==="breath"||e==="wave"||e==="magnetic"||e==="rainbow"?E.current=requestAnimationFrame(q):t?setTimeout(()=>{Y.current=0,F.current=0,E.current=requestAnimationFrame(q)},a):k?.()},[r,e,s,i,T,P,t,a,k]);(0,m.useEffect)(()=>(y&&(Y.current=0,F.current=0,E.current=requestAnimationFrame(q)),()=>{E.current&&cancelAnimationFrame(E.current)}),[y,q]),(0,m.useEffect)(()=>{n==="mount"&&f(!0)},[n]),(0,m.useEffect)(()=>{if(!h)return;let M=b=>{R.current={x:b.clientX,y:b.clientY}};return window.addEventListener("mousemove",M,{passive:!0}),()=>window.removeEventListener("mousemove",M)},[h]),(0,m.useEffect)(()=>{if(n!=="scroll")return;let M=new IntersectionObserver(([b])=>{b.isIntersecting&&!y&&f(!0)},{threshold:.3});return x.current&&M.observe(x.current),()=>M.disconnect()},[n,y]);let z=(0,m.useCallback)(()=>{(n==="hover"||n==="click")&&!y&&f(!0),n==="manual"&&(Y.current=0,F.current=0,f(!0))},[n,y]),tt={display:"inline-flex",flexWrap:"wrap",color:o,fontSize:l?`${l}px`:void 0,fontFamily:u,fontWeight:d,...X};return m.default.createElement(g,{ref:x,className:$,style:tt,onClick:n==="click"?z:void 0,onMouseEnter:n==="hover"?z:void 0,"aria-label":r,role:"text"},j.map((M,b)=>{let w=S[b],O=w?{display:"inline-block",opacity:w.opacity,transform:w.transform,color:w.color||void 0,textShadow:w.textShadow||void 0,filter:w.filter||void 0,transition:"none",whiteSpace:M===" "?"pre":void 0,willChange:"transform, opacity"}:{display:"inline-block",opacity:n==="mount"?0:1,whiteSpace:M===" "?"pre":void 0};return m.default.createElement("span",{key:b,ref:D=>{I.current[b]=D},style:O,"aria-hidden":"true"},w?.letterContent||M)}))}function K(r,e,s,i){let n=e.split("");r.innerHTML="";let t=[];for(let g of n){let x=document.createElement("span");x.style.display="inline-block",x.style.willChange="transform, opacity",g===" "&&(x.style.whiteSpace="pre"),x.textContent=g,r.appendChild(x),t.push(x)}let a=L(s),o=i?.duration||1e3,l=i?.stagger||30,u=i?.intensity||1,d=i?.speed||1,h=0,v=0,$=0,X=0,k=0,T=g=>{X=g.clientX,k=g.clientY};window.addEventListener("mousemove",T,{passive:!0});function P(g){h||(h=g);let x=(g-h)*d,I=Math.min(1,x/o);v+=.016*d;let E=t.map(y=>y.getBoundingClientRect()),Y={duration:o,stagger:l,intensity:u,mouseX:X,mouseY:k,charRects:E,scrollProgress:0};for(let y=0;y<t.length;y++){let f=a(I,y,t.length,v,Y),S=t[y].style;S.opacity=String(f.opacity),S.transform=f.transform,f.color&&(S.color=f.color),f.textShadow&&(S.textShadow=f.textShadow),f.filter&&(S.filter=f.filter),f.letterContent?t[y].textContent=f.letterContent:t[y].textContent=n[y]}let R=["breath","wave","magnetic","rainbow"].includes(s);I<1||R?$=requestAnimationFrame(P):i?.loop&&setTimeout(()=>{h=0,$=requestAnimationFrame(P)},i.loopDelay||2e3)}return $=requestAnimationFrame(P),()=>{cancelAnimationFrame($),window.removeEventListener("mousemove",T)}}var Q=["liquid","glitch","typewriter","handwriting","gravity","magnetic","wave","scramble","fade","bounce","split","blur","rotate","scale","slide","rainbow","neon","matrix","shatter","elastic","breath","flicker","drip","magnet","phantom","spiral","cascade","rubberband","swing","unfold","pixelate","spring","tornado","domino","inflate","x-ray","ticker","pop","earthquake","dissolve","origami","spotlight","morse","rippletext","conveyor","pendulum","static","emerge","float","vhs","stamp","orbit","rewind","thermal","pulse","slash","cipher","levitate","whip","cascade3d","melt","assemble","vertigo","radar","firework","telegraph","unfurl","sway","jitter","crash","warp","scatter","tilt","glow","countdown","ricochet"];0&&(module.exports={ALL_EFFECTS,Typo,animateText,getAllEffectNames,getEffect});
package/dist/index.mjs ADDED
@@ -0,0 +1 @@
1
+ import G,{useRef as P,useEffect as H,useState as V,useCallback as J}from"react";function c(a){return a<.5?2*a*a:-1+(4-2*a)*a}function _(a){return a*a*((1.70158+1)*a-1.70158)}function w(a){return a===0||a===1?a:Math.pow(2,-10*a)*Math.sin((a-.075)*(2*Math.PI)/.3)+1}function B(a,e,s){return Math.max(e,Math.min(s,a))}function p(a,e,s,i,n){let t=e*i/n;return B((a-t)/(1-t*(s>1?(s-1)/s:0)+.001),0,1)}var A="!@#$%^&*()_+-=[]{}|;:,.<>?/~`ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",Z="\u30A2\u30A4\u30A6\u30A8\u30AA\u30AB\u30AD\u30AF\u30B1\u30B3\u30B5\u30B7\u30B9\u30BB\u30BD\u30BF\u30C1\u30C4\u30C6\u30C801",N={liquid(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=Math.sin(e*.5+i*3)*10*(1-t)*n.intensity,o=1+Math.sin(e*.8+i*4)*.3*(1-t)*n.intensity;return{opacity:c(t),transform:`translateY(${r}px) scaleY(${.5+t*.5+(o-1)*.2}) scaleX(${1+Math.sin(i*5+e)*.1*(1-t)})`,filter:t<.8?`blur(${(1-t)*2}px)`:void 0}},glitch(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=t<.7&&Math.random()>.6,o=r?(Math.random()-.5)*20*n.intensity:0,l=r?(Math.random()-.5)*8*n.intensity:0,u=r?(Math.random()-.5)*20:0;return{opacity:t>.1?1:0,transform:`translate(${o}px, ${l}px) skewX(${u}deg)`,color:r?Math.random()>.5?"#ff0040":"#00ffcc":void 0,textShadow:r?`${-o}px 0 #ff0040, ${o}px 0 #00ffcc`:void 0,letterContent:r&&Math.random()>.5?A[Math.floor(Math.random()*A.length)]:void 0}},typewriter(a,e,s,i,n){let t=Math.floor(a*s*1.3),r=e<=t,o=e===Math.min(t,s-1),l=Math.sin(e*7.3)>.7&&a*s>e-.5&&a*s<e+.3;return{opacity:r?1:0,transform:"none",letterContent:l?A[Math.floor(Math.abs(Math.sin(e*13.7))*26)]:void 0,textShadow:o?"none":void 0}},handwriting(a,e,s,i,n){let t=p(a,e,s,n.stagger*2,n.duration),r=Math.sin(e*3.7+i*2)*1.5*n.intensity,o=Math.cos(e*2.3+i*1.5)*1*n.intensity,l=Math.sin(e*1.7)*3*n.intensity,u=t<.3?t/.3:1;return{opacity:t>0?Math.min(1,t*2):0,transform:`translate(${r}px, ${o}px) rotate(${l*(1-t*.5)}deg) scale(${.8+u*.2})`}},gravity(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=-300*n.intensity,o=w(t),l=r*(1-o),u=(1-t)*(e%2?1:-1)*180*n.intensity;return{opacity:t>.05?1:0,transform:`translateY(${l}px) rotate(${u}deg)`}},magnetic(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=n.charRects[e];if(!r)return{opacity:c(t),transform:"none"};let o=r.left+r.width/2,l=r.top+r.height/2,u=o-n.mouseX,m=l-n.mouseY,d=Math.sqrt(u*u+m*m)+1,C=Math.min(30,3e3/d)*n.intensity*t,M=u/d*C,S=m/d*C;return{opacity:c(t),transform:`translate(${M}px, ${S}px)`}},wave(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=Math.sin(e*.4+i*4)*15*n.intensity,o=Math.sin(e*.3+i*3)*5*n.intensity;return{opacity:c(Math.min(1,t*1.5)),transform:`translateY(${r*t}px) rotate(${o*t}deg)`}},scramble(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=t>.7;return{opacity:t>.05?1:0,transform:r?"none":`translateY(${(Math.random()-.5)*4}px)`,letterContent:r?void 0:A[Math.floor(Math.random()*A.length)]}},fade(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration);return{opacity:c(t),transform:`translateY(${(1-c(t))*20*n.intensity}px)`}},bounce(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=-100*(1-w(t))*n.intensity;return{opacity:t>.05?1:0,transform:`translateY(${r}px)`}},split(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=e/s*Math.PI*2+e*.5,o=200*(1-c(t))*n.intensity,l=Math.cos(r)*o,u=Math.sin(r)*o;return{opacity:c(t),transform:`translate(${l}px, ${u}px) rotate(${(1-t)*360}deg)`}},blur(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=(1-c(t))*12*n.intensity;return{opacity:.3+t*.7,transform:`scale(${.9+t*.1})`,filter:`blur(${r}px)`}},rotate(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=(1-_(t))*(e%2?90:-90)*n.intensity;return{opacity:c(t),transform:`rotate(${r}deg) scale(${.5+t*.5})`}},scale(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=w(t);return{opacity:t>.05?1:0,transform:`scale(${r})`}},slide(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=(1-c(t))*60*n.intensity*(e%2?1:-1);return{opacity:c(t),transform:`translateX(${r}px)`}},rainbow(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=(e/s*360+i*100)%360;return{opacity:c(t),transform:`translateY(${(1-c(t))*15}px)`,color:`hsl(${r}, 80%, 65%)`}},neon(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=t>.3?Math.sin(i*20+e*5)>.3?1:.3:0,o=t>.5?`0 0 ${5+Math.sin(i*8+e)*3}px currentColor, 0 0 ${15+Math.sin(i*6+e*2)*5}px currentColor`:"none";return{opacity:t*r,transform:"none",textShadow:o}},matrix(a,e,s,i,n){let t=p(a,e,s,n.stagger*2,n.duration),r=t>.8,o=!r&&t>0;return{opacity:t>.05?1:0,transform:o?`translateY(${(1-t)*-30}px)`:"none",color:r?void 0:"#00ff41",letterContent:o?Z[Math.floor(Math.random()*Z.length)]:void 0,textShadow:o?"0 0 8px #00ff41":void 0}},shatter(a,e,s,i,n){if(a<.3)return{opacity:1,transform:"none"};let r=(a-.3)/(1-.3),o=(e*2.7+e*e*.3)%(Math.PI*2),l=r*300*n.intensity*(.5+Math.abs(Math.sin(e*1.7))*.5),u=Math.cos(o)*l,m=Math.sin(o)*l+r*r*200,d=r*(e%2?1:-1)*360;return{opacity:Math.max(0,1-r*1.5),transform:`translate(${u}px, ${m}px) rotate(${d}deg) scale(${1-r*.5})`}},elastic(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=w(t),o=t<.5?0:Math.sin(t*Math.PI*4)*5*(1-t)*n.intensity;return{opacity:t>.05?1:0,transform:`translateY(${-30*(1-r)+o}px) scaleX(${.8+r*.2+Math.sin(t*6)*.05})`}},breath(a,e,s,i,n){let t=Math.sin(i*2+e*.3)*.5+.5,r=1+t*.08*n.intensity,o=Math.sin(i*2+e*.3)*3*n.intensity;return{opacity:.7+t*.3,transform:`scale(${r}) translateY(${o}px)`}},flicker(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),o=Math.sin(i*30+e*17.3)*Math.cos(i*23+e*11.7)>0?1:.1;return{opacity:t*(t>.8?1:o),transform:`translateY(${(1-t)*10}px)`}},drip(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=t>.5?(t-.5)*2:0,o=1+r*.4*n.intensity*Math.abs(Math.sin(e*2.3)),l=r*20*n.intensity*Math.abs(Math.sin(e*3.1));return{opacity:c(t),transform:`translateY(${(1-t)*-30+l}px) scaleY(${o})`}},magnet(a,e,s,i,n){let t=p(a,e,s,n.stagger*.5,n.duration),r=1-_(Math.min(1,t*1.2)),o=Math.sin(e*7.3+1)*300*n.intensity,l=Math.cos(e*4.1+2)*200*n.intensity,u=Math.sin(e*5.7)*180*r;return{opacity:.3+t*.7,transform:`translate(${o*r}px, ${l*r}px) rotate(${u}deg)`}},phantom(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=Math.sin(i*3+e*.5)*5*n.intensity,o=.15+Math.sin(i*2+e)*.1;return{opacity:c(t),transform:`translateX(${r*(1-t*.5)}px)`,textShadow:t>.3?`${r}px ${r*.5}px 4px rgba(255,255,255,${o})`:"none"}},spiral(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=(1-c(t))*Math.PI*4+e*.3,o=(1-c(t))*200*n.intensity;return{opacity:c(t),transform:`translate(${Math.cos(r)*o}px, ${Math.sin(r)*o}px) rotate(${(1-t)*720}deg)`}},cascade(a,e,s,i,n){let t=p(a,e,s,n.stagger*1.5,n.duration),r=(1-c(t))*-80*n.intensity,o=(1-c(t))*-60*n.intensity;return{opacity:c(t),transform:`translate(${r}px, ${o}px)`}},rubberband(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=t<.4?1+t/.4*1.5*n.intensity:1+(1-(t-.4)/.6)*.3;return{opacity:t>.05?1:0,transform:`scaleX(${r}) scaleY(${2-r})`}},swing(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=Math.sin(t*Math.PI*3)*40*(1-t)*n.intensity;return{opacity:c(t),transform:`rotate(${r}deg) translateY(${(1-t)*-20}px)`}},unfold(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=(1-c(t))*90*n.intensity;return{opacity:c(t),transform:`perspective(400px) rotateX(${r}deg) translateY(${(1-t)*-15}px)`}},pixelate(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=t<.6?(Math.random()-.5)*6:0;return{opacity:t>.1?1:0,transform:`translate(${r}px, ${r}px) scale(${.5+t*.5})`,filter:t<.5?`blur(${(1-t*2)*4}px)`:void 0,letterContent:t<.4?"\u2588":void 0}},spring(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=Math.sin(t*Math.PI*5)*20*(1-t)*n.intensity;return{opacity:c(t),transform:`translateY(${r+(1-t)*-40}px)`}},tornado(a,e,s,i,n){let t=p(a,e,s,n.stagger*.5,n.duration),r=(1-t)*Math.PI*6,o=(1-c(t))*150*n.intensity,l=(1-t)*-200;return{opacity:c(t),transform:`translate(${Math.cos(r+e)*o}px, ${l+Math.sin(r)*20}px) rotate(${(1-t)*540}deg)`}},domino(a,e,s,i,n){let t=e*.08,r=B((a-t)/(1-t+.001),0,1),o=r<.5?(1-r*2)*90*n.intensity:Math.sin((r-.5)*Math.PI*4)*10*(1-r);return{opacity:r>.02?1:0,transform:`rotate(${o}deg)`}},inflate(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=w(t),o=Math.sin(t*Math.PI*3)*.1*(1-t);return{opacity:t>.05?1:0,transform:`scale(${r+o}) translateY(${(1-t)*20}px)`}},"x-ray"(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=t<.6;return{opacity:c(t),transform:`scale(${.95+t*.05})`,color:r?"transparent":void 0,textShadow:r?"0 0 1px currentColor":"none"}},ticker(a,e,s,i,n){let t=p(a,e,s,n.stagger*.8,n.duration),r=(1-c(t))*100*n.intensity;return{opacity:c(t),transform:`translateX(${r}px)`}},pop(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=t<.5?_(t*2)*1.3:1+(1-(t-.5)*2)*.3;return{opacity:t>.05?1:0,transform:`scale(${Math.max(0,r)})`}},earthquake(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=(1-t)*n.intensity,o=(Math.sin(i*40+e*7)*8+Math.cos(i*33+e*11)*4)*r,l=Math.cos(i*37+e*5)*5*r;return{opacity:c(Math.min(1,t*1.5)),transform:`translate(${o}px, ${l}px)`}},dissolve(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=Math.sin(e*13.7+i*5)*.5+.5,o=t>r*.7;return{opacity:o?c(t):0,transform:o?"none":`scale(0.5) translateY(${(Math.random()-.5)*10}px)`}},origami(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=(1-c(t))*180*n.intensity*(e%2?1:-1);return{opacity:c(t),transform:`perspective(300px) rotateY(${r}deg) scale(${.8+t*.2})`}},spotlight(a,e,s,i,n){let t=a*(s+4)-2,r=Math.abs(e-t),o=Math.max(0,1-r/3);return{opacity:o,transform:`scale(${.9+o*.1})`}},morse(a,e,s,i,n){let t=p(a,e,s,n.stagger*2,n.duration);return{opacity:Math.floor(t*6)%2===0||t>.8?t>.8?1:.7:0,transform:"none"}},rippletext(a,e,s,i,n){let t=Math.floor(s/2),o=Math.abs(e-t)*.04,l=B((a-o)/(1-o+.001),0,1),u=(1-w(l))*30*n.intensity;return{opacity:c(l),transform:`translateY(${u}px) scale(${.8+w(l)*.2})`}},conveyor(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=(1-c(t))*-90,o=(1-c(t))*40;return{opacity:c(t),transform:`translateX(${o}px) rotate(${r}deg)`}},pendulum(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=Math.sin(t*Math.PI*4)*25*(1-t)*n.intensity;return{opacity:c(t),transform:`rotate(${r}deg)`}},static(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=t<.7,o=r?(Math.random()-.5)*3:0,l=r?(Math.random()-.5)*3:0;return{opacity:r?Math.random()>.3?.6:.1:c(t),transform:`translate(${o}px,${l}px)`,letterContent:r&&Math.random()>.6?String.fromCharCode(9608+Math.floor(Math.random()*4)):void 0}},emerge(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=(1-c(t))*40*n.intensity;return{opacity:c(t),transform:`translateY(${r}px) scale(${.9+t*.1})`}},float(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=Math.sin(i*1.5+e*.4)*8*n.intensity*t,o=Math.cos(i*1.2+e*.6)*3*n.intensity*t;return{opacity:c(t),transform:`translate(${o}px, ${(1-t)*30+r}px)`}},vhs(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=t<.6,o=r?Math.sin(i*30+e)*10*n.intensity:0,l=r?Math.sin(i*20)*5:0;return{opacity:r?.5+Math.random()*.3:c(t),transform:`translateX(${o}px) skewX(${l}deg)`,color:r&&Math.random()>.8?"#ff0060":void 0}},stamp(a,e,s,i,n){let t=p(a,e,s,n.stagger*.5,n.duration),r=t<.3?3*(1-t/.3)+1:1+Math.sin((t-.3)*Math.PI*3)*.05*(1-t);return{opacity:t>.05?Math.min(1,t*3):0,transform:`scale(${r})`}},orbit(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=(1-c(t))*Math.PI*2+e*.5,o=(1-c(t))*100*n.intensity;return{opacity:c(t),transform:`translate(${Math.cos(r)*o}px, ${Math.sin(r)*o*.5}px)`}},rewind(a,e,s,i,n){let t=a<.4,r=t?a/.4:1-(a-.4)/.6,o=p(r,e,s,n.stagger,n.duration);return{opacity:c(o),transform:`translateX(${(1-c(o))*(t?-30:30)}px)`}},thermal(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=Math.sin(i*8+e*3)*3*(1-t*.5)*n.intensity,o=Math.cos(i*6+e*5)*2*(1-t*.5);return{opacity:c(t),transform:`translate(${r}px, ${o}px) scaleY(${1+Math.sin(i*10+e)*.03})`}},pulse(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=1+Math.sin(i*6+e*.3)*.1*n.intensity*t;return{opacity:c(t),transform:`scale(${r})`}},slash(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=(1-c(t))*50*n.intensity,o=(1-c(t))*-50*n.intensity;return{opacity:c(t),transform:`translate(${r}px, ${o}px)`}},cipher(a,e,s,i,n){let t=p(a,e,s,n.stagger*1.5,n.duration),r=Math.floor(t*5),o="0123456789",l;return t<.8&&(l=o[Math.floor(Math.abs(Math.sin(i*10+e*7))*10)]),{opacity:t>.03?1:0,transform:`translateY(${(1-t)*8}px)`,letterContent:l}},levitate(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=Math.sin(i*2+e*.5)*5*n.intensity*t,o=(1-c(t))*40+r;return{opacity:c(t),transform:`translateY(${-o}px)`}},whip(a,e,s,i,n){let t=p(a,e,s,n.stagger*.6,n.duration),r=t<.5?(1-t*2)*-200*n.intensity:Math.sin((t-.5)*Math.PI*4)*8*(1-t);return{opacity:t>.05?1:0,transform:`translateX(${r}px)`}},cascade3d(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=(1-c(t))*60*n.intensity,o=(1-c(t))*-100;return{opacity:c(t),transform:`perspective(500px) rotateX(${r}deg) translateZ(${o}px)`}},melt(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration);if(a<.3)return{opacity:1,transform:"none"};let r=(a-.3)/.7,o=r*60*n.intensity*(.5+Math.abs(Math.sin(e*2.7))*.5),l=1+r*.6;return{opacity:Math.max(0,1-r*1.2),transform:`translateY(${o}px) scaleY(${l}) scaleX(${1-r*.3})`}},assemble(a,e,s,i,n){let t=p(a,e,s,n.stagger*.4,n.duration),o=e%3,l=(o===0?-1:o===1?0:1)*150*(1-c(t))*n.intensity,u=(o===1?-1:1)*100*(1-c(t))*n.intensity,m=(1-t)*(o-1)*90;return{opacity:c(t),transform:`translate(${l}px, ${u}px) rotate(${m}deg)`}},vertigo(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=(1-c(t))*360*2*n.intensity,o=.1+c(t)*.9;return{opacity:c(t),transform:`rotate(${r}deg) scale(${o})`}},radar(a,e,s,i,n){let t=a*s*1.5,r=Math.abs(e-t),o=Math.max(0,1-r/2),l=e<t-2;return{opacity:l?1:o,transform:l?"none":`scale(${.8+o*.2})`,color:o>.5&&!l?"#4ade80":void 0}},firework(a,e,s,i,n){if(a<.2)return{opacity:0,transform:"none"};if(a<.5){let l=(a-.2)/.3,u=e/s*Math.PI*2,m=w(l)*200*n.intensity;return{opacity:1,transform:`translate(${Math.cos(u)*m}px, ${Math.sin(u)*m}px)`}}let t=(a-.5)/.5,r=e/s*Math.PI*2,o=(1-c(t))*200*n.intensity;return{opacity:1,transform:`translate(${Math.cos(r)*o}px, ${Math.sin(r)*o}px)`}},telegraph(a,e,s,i,n){let t=p(a,e,s,n.stagger*3,n.duration),r=t>0&&t<.8;return{opacity:t>.1?1:0,transform:r?`translateY(${Math.sin(i*20)*2}px)`:"none",letterContent:r&&t<.5?"\xB7":void 0}},unfurl(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=(1-c(t))*-90*n.intensity,o=(1-c(t))*-20;return{opacity:c(t),transform:`perspective(400px) rotateY(${r}deg) translateX(${o}px)`}},sway(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=Math.sin(i*1.5+e*.4)*8*n.intensity*t,o=Math.sin(i*1.2+e*.3)*4*n.intensity*t;return{opacity:c(t),transform:`rotate(${r}deg) translateX(${o}px) translateY(${(1-t)*20}px)`}},jitter(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=(1-t)*n.intensity,o=Math.sin(i*50+e*13)*4*r,l=Math.cos(i*47+e*9)*3*r,u=Math.sin(i*53+e*17)*5*r;return{opacity:c(Math.min(1,t*1.3)),transform:`translate(${o}px,${l}px) rotate(${u}deg)`}},crash(a,e,s,i,n){let t=p(a,e,s,n.stagger*.3,n.duration),r=t<.4?(1-t/.4)*-400*n.intensity:Math.sin((t-.4)*Math.PI*6)*5*(1-t),o=t>.35&&t<.5?.7:1;return{opacity:t>.02?1:0,transform:`translateY(${r}px) scaleY(${o}) scaleX(${2-o})`}},warp(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=(1-c(t))*Math.sin(e*1.5)*40*n.intensity,o=.2+c(t)*.8+Math.sin(t*Math.PI)*.3;return{opacity:c(t),transform:`translateX(${r}px) scaleX(${o})`}},scatter(a,e,s,i,n){if(a<.2)return{opacity:1,transform:"none"};if(a<.6){let l=(a-.2)/.4,u=Math.sin(e*5.3)*200*c(l)*n.intensity,m=Math.cos(e*3.7)*150*c(l)*n.intensity;return{opacity:1,transform:`translate(${u}px, ${m}px) rotate(${l*180*(e%2?1:-1)}deg)`}}let t=(a-.6)/.4,r=Math.sin(e*5.3)*200*(1-c(t))*n.intensity,o=Math.cos(e*3.7)*150*(1-c(t))*n.intensity;return{opacity:1,transform:`translate(${r}px, ${o}px) rotate(${(1-t)*180*(e%2?1:-1)}deg)`}},tilt(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=(1-c(t))*45*n.intensity,o=(1-c(t))*(e%2?20:-20)*n.intensity;return{opacity:c(t),transform:`perspective(400px) rotateX(${r}deg) rotateY(${o}deg)`}},glow(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),r=c(t)*12*n.intensity;return{opacity:c(t),transform:`scale(${.95+t*.05})`,textShadow:`0 0 ${r}px currentColor, 0 0 ${r*2}px currentColor`}},countdown(a,e,s,i,n){let t=p(a,e,s,n.stagger*.5,n.duration),r=Math.floor((1-t)*4),o=["","1","2","3"],l=t<.7;return{opacity:t>.05?1:0,transform:l?`scale(${1.2-t*.3})`:`scale(${w(Math.min(1,(t-.7)/.3))})`,letterContent:l&&r>0?o[r]:void 0}},ricochet(a,e,s,i,n){let t=p(a,e,s,n.stagger,n.duration),o=t*3,l=Math.floor(o),u=o-l,m=l%2===0?-1:1,d=Math.pow(.6,l),C=(1-t)*m*150*d*n.intensity*Math.cos(u*Math.PI),M=(1-t)*-100*d*Math.abs(Math.sin(u*Math.PI));return{opacity:t>.02?1:0,transform:`translate(${C}px, ${M}px)`}}};function q(a){return N[a]||N.fade}function et(){return Object.keys(N)}function rt({text:a,effect:e="fade",duration:s=1e3,stagger:i=30,trigger:n="mount",loop:t=!1,loopDelay:r=2e3,color:o,fontSize:l,fontFamily:u,fontWeight:m,interactive:d=!0,easing:C="ease-out",className:M,style:S,onComplete:k,speed:X=1,intensity:T=1,as:$="span"}){let f=P(null),I=P([]),Y=P(0),v=P(0),R=P({x:0,y:0}),[h,y]=V(n==="mount"),[E,K]=V([]),F=P(0),j=a.split(""),L=J(()=>{let x=performance.now();v.current||(v.current=x);let g=(x-v.current)*X,b=Math.min(1,g/s);F.current+=.016*X;let O=q(e),D=I.current.map(W=>W?.getBoundingClientRect()||new DOMRect),U={duration:s,stagger:i,intensity:T,mouseX:R.current.x,mouseY:R.current.y,charRects:D,scrollProgress:0},tt=j.map((W,nt)=>O(b,nt,j.length,F.current,U));K(tt),b<1||e==="breath"||e==="wave"||e==="magnetic"||e==="rainbow"?Y.current=requestAnimationFrame(L):t?setTimeout(()=>{v.current=0,F.current=0,Y.current=requestAnimationFrame(L)},r):k?.()},[a,e,s,i,X,T,t,r,k]);H(()=>(h&&(v.current=0,F.current=0,Y.current=requestAnimationFrame(L)),()=>{Y.current&&cancelAnimationFrame(Y.current)}),[h,L]),H(()=>{n==="mount"&&y(!0)},[n]),H(()=>{if(!d)return;let x=g=>{R.current={x:g.clientX,y:g.clientY}};return window.addEventListener("mousemove",x,{passive:!0}),()=>window.removeEventListener("mousemove",x)},[d]),H(()=>{if(n!=="scroll")return;let x=new IntersectionObserver(([g])=>{g.isIntersecting&&!h&&y(!0)},{threshold:.3});return f.current&&x.observe(f.current),()=>x.disconnect()},[n,h]);let z=J(()=>{(n==="hover"||n==="click")&&!h&&y(!0),n==="manual"&&(v.current=0,F.current=0,y(!0))},[n,h]),Q={display:"inline-flex",flexWrap:"wrap",color:o,fontSize:l?`${l}px`:void 0,fontFamily:u,fontWeight:m,...S};return G.createElement($,{ref:f,className:M,style:Q,onClick:n==="click"?z:void 0,onMouseEnter:n==="hover"?z:void 0,"aria-label":a,role:"text"},j.map((x,g)=>{let b=E[g],O=b?{display:"inline-block",opacity:b.opacity,transform:b.transform,color:b.color||void 0,textShadow:b.textShadow||void 0,filter:b.filter||void 0,transition:"none",whiteSpace:x===" "?"pre":void 0,willChange:"transform, opacity"}:{display:"inline-block",opacity:n==="mount"?0:1,whiteSpace:x===" "?"pre":void 0};return G.createElement("span",{key:g,ref:D=>{I.current[g]=D},style:O,"aria-hidden":"true"},b?.letterContent||x)}))}function at(a,e,s,i){let n=e.split("");a.innerHTML="";let t=[];for(let $ of n){let f=document.createElement("span");f.style.display="inline-block",f.style.willChange="transform, opacity",$===" "&&(f.style.whiteSpace="pre"),f.textContent=$,a.appendChild(f),t.push(f)}let r=q(s),o=i?.duration||1e3,l=i?.stagger||30,u=i?.intensity||1,m=i?.speed||1,d=0,C=0,M=0,S=0,k=0,X=$=>{S=$.clientX,k=$.clientY};window.addEventListener("mousemove",X,{passive:!0});function T($){d||(d=$);let f=($-d)*m,I=Math.min(1,f/o);C+=.016*m;let Y=t.map(h=>h.getBoundingClientRect()),v={duration:o,stagger:l,intensity:u,mouseX:S,mouseY:k,charRects:Y,scrollProgress:0};for(let h=0;h<t.length;h++){let y=r(I,h,t.length,C,v),E=t[h].style;E.opacity=String(y.opacity),E.transform=y.transform,y.color&&(E.color=y.color),y.textShadow&&(E.textShadow=y.textShadow),y.filter&&(E.filter=y.filter),y.letterContent?t[h].textContent=y.letterContent:t[h].textContent=n[h]}let R=["breath","wave","magnetic","rainbow"].includes(s);I<1||R?M=requestAnimationFrame(T):i?.loop&&setTimeout(()=>{d=0,M=requestAnimationFrame(T)},i.loopDelay||2e3)}return M=requestAnimationFrame(T),()=>{cancelAnimationFrame(M),window.removeEventListener("mousemove",X)}}var st=["liquid","glitch","typewriter","handwriting","gravity","magnetic","wave","scramble","fade","bounce","split","blur","rotate","scale","slide","rainbow","neon","matrix","shatter","elastic","breath","flicker","drip","magnet","phantom","spiral","cascade","rubberband","swing","unfold","pixelate","spring","tornado","domino","inflate","x-ray","ticker","pop","earthquake","dissolve","origami","spotlight","morse","rippletext","conveyor","pendulum","static","emerge","float","vhs","stamp","orbit","rewind","thermal","pulse","slash","cipher","levitate","whip","cascade3d","melt","assemble","vertigo","radar","firework","telegraph","unfurl","sway","jitter","crash","warp","scatter","tilt","glow","countdown","ricochet"];export{st as ALL_EFFECTS,rt as Typo,at as animateText,et as getAllEffectNames,q as getEffect};
package/package.json ADDED
@@ -0,0 +1,49 @@
1
+ {
2
+ "name": "usetypoui",
3
+ "version": "1.0.0",
4
+ "description": "Kinetic typography engine. 25 text effects: liquid morph, glitch, typewriter, handwriting, gravity, magnetic, wave, scramble, fade, bounce, split, and more. One component. Physics-driven. Cursor-reactive.",
5
+ "main": "dist/index.js",
6
+ "module": "dist/index.mjs",
7
+ "types": "dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "types": "./dist/index.d.ts",
11
+ "import": "./dist/index.mjs",
12
+ "require": "./dist/index.js"
13
+ }
14
+ },
15
+ "files": ["dist", "README.md", "LICENSE"],
16
+ "scripts": {
17
+ "build": "tsup src/index.ts --format esm,cjs --dts --clean --minify --external react --external react-dom",
18
+ "dev": "tsup src/index.ts --format esm,cjs --dts --watch --external react --external react-dom",
19
+ "test": "node test/run.js",
20
+ "typecheck": "tsc --noEmit",
21
+ "prepublishOnly": "npm run build"
22
+ },
23
+ "peerDependencies": {
24
+ "react": ">=18.0.0",
25
+ "react-dom": ">=18.0.0"
26
+ },
27
+ "peerDependenciesMeta": {
28
+ "react": { "optional": true },
29
+ "react-dom": { "optional": true }
30
+ },
31
+ "devDependencies": {
32
+ "@types/react": "^18.2.0",
33
+ "@types/react-dom": "^18.2.0",
34
+ "react": "^18.2.0",
35
+ "react-dom": "^18.2.0",
36
+ "tsup": "^8.0.0",
37
+ "typescript": "^5.3.0"
38
+ },
39
+ "keywords": [
40
+ "typography", "kinetic", "animation", "text-effect", "liquid", "glitch",
41
+ "typewriter", "handwriting", "gravity", "magnetic", "wave", "scramble",
42
+ "react", "creative-coding", "motion", "portfolio", "landing-page"
43
+ ],
44
+ "author": "0xDragoon",
45
+ "license": "MIT",
46
+ "repository": { "type": "git", "url": "https://github.com/dragoon0x/typo" },
47
+ "homepage": "https://dragoon0x.github.io/typo/",
48
+ "sideEffects": false
49
+ }