Morphing Animation
MAX
A morphing animation for elements
Demo
Morphing Animation
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
<MorphingAnimation
className="w-40 h-40 bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center"
intensity="subtle"
>
<span className="text-white font-bold">Subtle</span>
</MorphingAnimation>
<MorphingAnimation
className="w-40 h-40 bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center"
intensity="medium"
>
<span className="text-white font-bold">Medium</span>
</MorphingAnimation>
<MorphingAnimation
className="w-40 h-40 bg-gradient-to-br from-rose-500 to-orange-500 flex items-center justify-center"
intensity="strong"
>
<span className="text-white font-bold">Strong</span>
</MorphingAnimation>Properties
The MorphingAnimation component accepts the following props:
| Property | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The content to animate |
duration | string | "8s" | The duration of the animation |
active | boolean | true | Whether the animation is active |
delay | string | "0s" | The delay of the animation |
className | string | "" | Additional CSS classes |
intensity | "subtle" | "medium" | "strong" | "medium" | The intensity of the animation |
Usage Examples
Subtle
Medium
Strong
