Text Effect Configurable
MAX
A configurable text effect for elements
Demo
Animate your ideas with CSS
PREMIUM
MAX
Acquire the MAX Plan
Unlock unlimited potential with our most advanced features and priority support.
All updates
All animations
No subscriptions
No hidden fees
$19.99
Payment once and get lifetime access
Usage Example
// Basic character-by-character animation
<TextEffectConfigurable effect="slide" delay={0.1} duration={0.8}>
Animate your ideas with CSS
</TextEffectConfigurable>
// Fast scale animation
<TextEffectConfigurable
effect="scale"
delay={0.03}
duration={0.4}
as="h1"
className="text-4xl font-bold"
>
Quick Animation
</TextEffectConfigurable>
// Slow fade with custom styling
<TextEffectConfigurable
effect="fade"
delay={0.15}
duration={1.2}
className="text-blue-400"
>
Elegant and Slow
</TextEffectConfigurable>Properties
The TextEffectConfigurable component accepts the following props:
| Property | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The text content to animate |
as | ElementType | "div" | The HTML element to render |
effect | "fade" | "blur" | "slide" | "scale" | "rotate" | "fade" | The type of animation |
delay | number | 0.05 | Delay between each character animation (seconds) |
duration | number | 0.6 | Duration of each character animation (seconds) |
className | string | "" | Additional CSS classes |
Usage Examples
Scale Characters
Blur Effect
Rotate Text
Fade In
Fast Scale
