import { forwardRef, useImperativeHandle, useCallback } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const SkullEmoji = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = useCallback(async () => { animate( ".skull-head", { rotate: [0, -8, 8, -8, 8, -4, 4, 0], y: [0, -2, 0, -2, 0, -1, 0], }, { duration: 0.6, ease: "easeInOut", }, ); animate( ".skull-eye-left, .skull-eye-right", { scale: [1, 1.3, 0.8, 1.2, 1], }, { duration: 0.6, ease: "easeInOut", }, ); await animate( ".skull-tooth", { y: [0, -3, 0, -2, 0, -3, 0], }, { duration: 0.5, ease: "easeInOut", delay: 0.1, }, ); await animate( ".skull-head", { y: [0, -4, 0], scale: [1, 1.05, 1], }, { duration: 0.3, ease: "easeOut", }, ); }, [animate]); const stop = useCallback(() => { animate( ".skull-head, .skull-eye-left, .skull-eye-right, .skull-tooth", { rotate: 0, y: 0, scale: 1 }, { duration: 0.2, ease: "easeInOut" }, ); }, [animate]); useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( ); }, ); SkullEmoji.displayName = "SkullEmoji"; export default SkullEmoji;

skull-emoji

Installation