Bell active icon

"use client"; import { motion, useAnimate } from "motion/react"; import { forwardRef, useImperativeHandle } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "@/icons/types"; export const BellActiveIcon = forwardRef( ({ size = 24, color = "currentColor", className = "", ...props }, ref) => { const [scope, animate] = useAnimate(); const startAnimation = async () => { animate( ".bell-body", { rotate: [0, -18, 16, -12, 9, -5, 3, 0] }, { duration: 1.4, ease: [0.36, 0.07, 0.19, 0.97], // custom spring-like easing times: [0, 0.12, 0.28, 0.44, 0.58, 0.72, 0.86, 1], }, ); animate( ".bell-arc", { rotate: [0, -10, 9, -7, 5, -3, 2, 0] }, { duration: 1.4, ease: [0.36, 0.07, 0.19, 0.97], times: [0, 0.12, 0.28, 0.44, 0.58, 0.72, 0.86, 1], delay: 0.06, }, ); }; const stopAnimation = () => { animate(".bell-body", { rotate: 0 }, { duration: 0.4, ease: "easeOut" }); animate(".bell-arc", { rotate: 0 }, { duration: 0.4, ease: "easeOut" }); }; useImperativeHandle(ref, () => ({ startAnimation, stopAnimation, })); return ( Bell active icon {/* Main bell + clapper — pivots from the hanging point */} ); }, ); BellActiveIcon.displayName = "BellActiveIcon";

Bell Active Icon

Installation