Text Effects
Fluid and surprising typographic animations to capture attention.
Pro Flip Words
Character-by-character animation with particle tracking and blur transitions.
Build your app
fast
API Reference
Available configuration to customize the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| words | { text: string; color?: string }[] | — | Array of words to cycle through. You can optionally specify a color for the cursor and the text. |
| duration | number | — | Time in ms each word is displayed. Default: 3000. |
| staggerDelay | number | — | Delay in seconds between each letter animating. Default: 0.04. |
| blurEffect | boolean | — | Whether to apply a blur effect during transition. Default: true. |
| cursorColor | string | — | Fallback color for the tracking dot cursor if no color is specified in the current word. Default: '#3b82f6'. |
Velocity Marquee
Hollow outlined marquee that reacts to scroll inertia with dynamic rotation and acceleration.
THE UI FACTORY PREMIUM TEXT EFFECTS ✦THE UI FACTORY PREMIUM TEXT EFFECTS ✦THE UI FACTORY PREMIUM TEXT EFFECTS ✦THE UI FACTORY PREMIUM TEXT EFFECTS ✦
API Reference
Available configuration to customize the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text to display in the marquee. |
| baseVelocity | number | — | Base speed of the marquee. Negative values move left. Default: 2. |
| separator | string | — | The character to use as a separator between text repetitions. Default: '✦'. |
| strokeWidth | number | — | The thickness of the hollow text stroke in pixels. Default: 4. |
Magnetic Decoder
Reveals the text with a hacker Matrix effect and performs a physical 3D flip with chromatic aberration on hover.
SYSTEM BREACH
API Reference
Available configuration to customize the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text to be decoded. The effect applies only to the last word. |
| speed | number | — | Decoding speed in ms per iteration. Default: 50. |
| triggerOnView | boolean | — | Whether to trigger the effect when scrolled into view. Default: false. |
| loop | boolean | — | Whether the decoding effect should repeat automatically. Default: false. |
| loopDelay | number | — | Time in ms before restarting the loop. Default: 3000. |