DocsComponentsBlog
Star us
Docs

Icon Ripple

Create a ripple animation on an icon

Installation

Install dependencies

npm install lucide-react

Run the following command

It will create a new file called icon-ripple.tsx inside the components/animata/icon directory.

mkdir -p components/animata/icon && touch components/animata/icon/icon-ripple.tsx

Paste the code

Open the newly created file and paste the following code:

"use client";
 
import { Mic } from "lucide-react";
 
import { cn } from "@/lib/utils";
 
interface IconRippleProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * Icon we want to have.
   */
  icon: React.ElementType;
  /**
   * Size of Icon
   */
  iconSize?: number;
  /**
   * Color of the Icon
   */
  iconColor?: string;
  /**
   * Border color that will have ripple animation
   */
  borderColor?: string;
  /**
   * Padding around the icon
   */
  inset?: string;
}
 
export default function IconRipple({
  icon: Icon = Mic,
  iconSize = 24,
  iconColor = "#ddd",
  borderColor = "#ddd",
  inset = "10px",
}: IconRippleProps) {
  const customBorderStyle = {
    borderColor,
  };
  const insetStyle = {
    top: `-${inset}`,
    bottom: `-${inset}`,
    left: `-${inset}`,
    right: `-${inset}`,
  };
 
  return (
    <div className={cn("group relative flex items-center justify-center")}>
      <Icon size={iconSize} color={iconColor} />
      <div
        className={cn("absolute -inset-4 animate-ping rounded-full border-2")}
        style={{ ...customBorderStyle, ...insetStyle }}
      />
    </div>
  );
}

Credits

Built by Aashish Katila

Edit this page on GitHub
Hover InteractionDisclose Image