{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "bug-01", "title": "bug-01", "description": "Animated bug icon", "dependencies": [ "motion" ], "files": [ { "path": "icons/bug-01.tsx", "content": "'use client';\n\nimport type { Variants } from 'motion/react';\nimport { motion, useAnimation } from 'motion/react';\nimport type { HTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useIconAnimation } from '@/lib/use-icon-animation';\nimport { cn } from '@/lib/utils';\n\nexport interface Bug01IconHandle {\n startAnimation: () => void;\n stopAnimation: () => void;\n}\n\ninterface Bug01IconProps extends HTMLAttributes {\n size?: number;\n}\n\n// six deliberately mismatched leg cycles drift in and out of phase while the\n// shell makes a small irregular weight shift\nconst bugVariants: Variants = {\n normal: {\n transform: 'translate(0px, 0px) rotate(0deg)',\n transition: { type: 'spring', duration: 0.32, bounce: 0 },\n },\n animate: {\n transform: [\n 'translate(0px, 0px) rotate(0deg)',\n 'translate(0.42px, -0.45px) rotate(-0.9deg)',\n 'translate(-0.28px, -0.12px) rotate(0.65deg)',\n 'translate(0.55px, 0.08px) rotate(-1.15deg)',\n 'translate(-0.4px, -0.36px) rotate(1deg)',\n 'translate(0.18px, -0.52px) rotate(-0.4deg)',\n 'translate(0px, 0px) rotate(0deg)',\n ],\n transition: {\n duration: 1.12,\n ease: [0.77, 0, 0.175, 1],\n times: [0, 0.13, 0.31, 0.46, 0.68, 0.82, 1],\n repeat: Infinity,\n },\n },\n};\n\ninterface LegMotion {\n angles: number[];\n delay: number;\n duration: number;\n times: number[];\n}\n\nconst DEFAULT_LEG_MOTION: LegMotion = {\n angles: [0, 18, -7, 25, -15, 9, -22, 0],\n delay: 0,\n duration: 0.83,\n times: [0, 0.11, 0.24, 0.39, 0.55, 0.7, 0.86, 1],\n};\n\nconst LEG_MOTIONS: readonly LegMotion[] = [\n DEFAULT_LEG_MOTION,\n {\n angles: [0, -12, 23, -19, 8, -25, 14, 0],\n delay: 0.05,\n duration: 0.91,\n times: [0, 0.16, 0.29, 0.43, 0.6, 0.76, 0.9, 1],\n },\n {\n angles: [0, 21, -16, 7, -24, 18, -9, 0],\n delay: 0.11,\n duration: 0.84,\n times: [0, 0.09, 0.22, 0.38, 0.57, 0.71, 0.89, 1],\n },\n {\n angles: [0, -22, 11, -17, 24, -6, 15, 0],\n delay: 0.02,\n duration: 1.03,\n times: [0, 0.14, 0.31, 0.45, 0.62, 0.78, 0.91, 1],\n },\n {\n angles: [0, 14, -20, 9, -16, 22, -7, 0],\n delay: 0.14,\n duration: 0.88,\n times: [0, 0.12, 0.26, 0.47, 0.59, 0.74, 0.87, 1],\n },\n {\n angles: [0, -18, 8, -22, 16, -10, 20, 0],\n delay: 0.08,\n duration: 0.96,\n times: [0, 0.18, 0.33, 0.48, 0.64, 0.79, 0.92, 1],\n },\n];\n\nconst randomLegVariants: Variants = {\n normal: { transform: 'rotate(0deg)' },\n animate: (legIndex: number) => {\n const legMotion = LEG_MOTIONS[legIndex] ?? DEFAULT_LEG_MOTION;\n\n return {\n transform: legMotion.angles.map((angle) => `rotate(${angle}deg)`),\n transition: {\n delay: legMotion.delay,\n duration: legMotion.duration,\n ease: 'linear',\n times: legMotion.times,\n repeat: Infinity,\n },\n };\n },\n};\n\nconst Bug01Icon = forwardRef(\n ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {\n const controls = useAnimation();\n const { handleMouseEnter, handleMouseLeave } = useIconAnimation({\n controls,\n loops: true,\n onMouseEnter,\n onMouseLeave,\n ref,\n });\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n );\n }\n);\n\nBug01Icon.displayName = 'Bug01Icon';\n\nexport { Bug01Icon };\n", "type": "registry:ui" }, { "path": "lib/use-icon-animation.ts", "content": "'use client';\n\nimport type { LegacyAnimationControls } from 'motion/react';\nimport { useReducedMotion } from 'motion/react';\nimport type {\n ForwardedRef,\n MouseEventHandler,\n} from 'react';\nimport { useCallback, useImperativeHandle, useRef } from 'react';\n\nexport interface AnimatedIconHandle {\n startAnimation: () => void;\n stopAnimation: () => void;\n}\n\ninterface UseIconAnimationOptions {\n controls: LegacyAnimationControls;\n loops?: boolean;\n onMouseEnter?: MouseEventHandler;\n onMouseLeave?: MouseEventHandler;\n ref: ForwardedRef;\n}\n\nexport function useIconAnimation({\n controls,\n loops = false,\n onMouseEnter,\n onMouseLeave,\n ref,\n}: UseIconAnimationOptions) {\n const shouldReduceMotion = useReducedMotion();\n const isControlledRef = useRef(false);\n const isPlayingRef = useRef(false);\n const runRef = useRef(0);\n\n const startAnimation = useCallback(() => {\n if (shouldReduceMotion || isPlayingRef.current) return;\n\n isPlayingRef.current = true;\n const run = ++runRef.current;\n controls.set('normal');\n void controls.start('animate').then(() => {\n if (runRef.current === run) isPlayingRef.current = false;\n });\n }, [controls, shouldReduceMotion]);\n\n const stopAnimation = useCallback(() => {\n if (!loops) return;\n\n runRef.current++;\n isPlayingRef.current = false;\n void controls.start('normal');\n }, [controls, loops]);\n\n useImperativeHandle(\n ref,\n () => {\n isControlledRef.current = true;\n return { startAnimation, stopAnimation };\n },\n [startAnimation, stopAnimation]\n );\n\n const handleMouseEnter = useCallback>(\n (event) => {\n onMouseEnter?.(event);\n if (!isControlledRef.current) startAnimation();\n },\n [onMouseEnter, startAnimation]\n );\n\n const handleMouseLeave = useCallback>(\n (event) => {\n onMouseLeave?.(event);\n if (!isControlledRef.current) stopAnimation();\n },\n [onMouseLeave, stopAnimation]\n );\n\n return { handleMouseEnter, handleMouseLeave };\n}\n", "type": "registry:lib" } ], "type": "registry:ui" }