import { forwardRef, useImperativeHandle, useRef } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const VinylIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const animationControls = useRef>>([]); const start = async () => { animationControls.current.forEach((control) => control.stop()); animationControls.current = []; // Rotate the vinyl record animationControls.current.push( animate( ".vinyl-disc", { rotate: [0, 360], }, { duration: 3, repeat: Infinity, ease: "linear", }, ), ); // Pulse the center dot animationControls.current.push( animate( ".center-dot", { scale: [1, 1.2, 1], }, { duration: 1, repeat: Infinity, ease: "easeInOut", }, ), ); }; const stop = () => { animationControls.current.forEach((control) => control.stop()); animationControls.current = []; animate( ".vinyl-disc", { rotate: 0, }, { duration: 0.5, ease: "easeOut", }, ); animate( ".center-dot", { scale: 1, }, { duration: 0.3, ease: "easeInOut", }, ); }; useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( {/* Vinyl disc */} {/* Center dot */} {/* Tonearm */} ); }, ); VinylIcon.displayName = "VinylIcon"; export default VinylIcon;

vinyl-icon

Installation