Morphing Animation

FREE

A morphing animation for elements

Demo

Morphing Animation
Exclusive Launch 50% offspots left: 0 / 50
3D Cube - happy face3D Cube - Happy Face
$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.

morphing-animation.tsx
"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.

global.css

@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:

PropertyTypeDefaultDescription
childrenReactNode-The content to animate
durationstring"8s"The duration of the animation
activebooleantrueWhether the animation is active
delaystring"0s"The delay of the animation
classNamestring""Additional CSS classes
intensity"subtle" | "medium" | "strong""medium"The intensity of the animation

Usage Examples

Subtle
Medium
Strong