Morphing Animation
FREE
A morphing animation for elements
Demo
Morphing Animation
Exclusive Launch 50% offspots left: 0 / 50
$39.99
$19.99
Payment once and get lifetime access
Access to all animations
All updates
All animations
No subscriptions
Installation
1
Copy and paste the following code into your project.
Add this component morphing-animation.tsx to your project.
"use client";
import type { ReactNode } from "react";
interface MorphingAnimationProps {
children: ReactNode;
duration?: string;
active?: boolean;
delay?: string;
className?: string;
intensity?: "subtle" | "medium" | "strong";
}
export function MorphingAnimation({
children,
duration = "8s",
active = true,
delay = "0s",
className = "",
intensity = "medium",
}: MorphingAnimationProps) {
// Define the animation class based on the intensity
const getAnimationClass = () => {
if (!active) return "";
switch (intensity) {
case "subtle":
return "animate-custom-morphing-subtle";
case "strong":
return "animate-custom-morphing-strong";
default:
return "animate-custom-morphing";
}
};
return (
<div
className={`${getAnimationClass()} ${className}`}
style={{
animationDuration: duration,
animationDelay: delay,
}}
>
{children}
</div>
);
}
2
Add the following keyframes to your global.css file.
@layer utilities {
// START HERE ------------------------------------------------------------
@keyframes custom-morphing {
0%, 100% {
border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
}
25% {
border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
}
50% {
border-radius: 50% 60% 50% 70%/40% 40% 60% 50%;
}
75% {
border-radius: 60% 40% 30% 60%/60% 50% 70% 30%;
}
}
@keyframes custom-morphing-subtle {
0%, 100% {
border-radius: 55% 45% 47% 53%/53% 48% 52% 47%;
}
25% {
border-radius: 48% 52% 53% 47%/51% 53% 47% 49%;
}
50% {
border-radius: 52% 48% 50% 50%/48% 47% 53% 52%;
}
75% {
border-radius: 53% 47% 48% 52%/52% 50% 50% 4
}
}
@keyframes custom-morphing-strong {
0%, 100% {
border-radius: 70% 30% 20% 80%/70% 20% 80% 30%;
}
25% {
border-radius: 20% 80% 80% 20%/40% 70% 30% 60%;
}
50% {
border-radius: 40% 60% 30% 70%/30% 30% 70% 70%;
}
75% {
border-radius: 70% 30% 20% 80%/50% 60% 70% 20%;
}
}
.animate-custom-morphing {
animation: custom-morphing 8s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.animate-custom-morphing-subtle {
animation: custom-morphing-subtle 8s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.animate-custom-morphing-strong {
animation: custom-morphing-strong 8s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
// END HERE ------------------------------------------------------------
}
3
Start using the animation
Usage Example
<MorphingAnimation
className="w-40 h-40 bg-gradient-to-br from-zinc-500 to-zinc-700 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-zinc-800 to-zinc-900 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
