{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "airplane-take-off-01", "title": "airplane-take-off-01", "description": "Animated airplane take off icon", "dependencies": [ "motion" ], "files": [ { "path": "icons/airplane-take-off-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 AirplaneTakeOff01IconHandle {\n startAnimation: () => void;\n stopAnimation: () => void;\n}\n\ninterface AirplaneTakeOff01IconProps extends HTMLAttributes {\n size?: number;\n}\n\n// one solid plane fully clears the frame before a second solid plane enters\n// and decelerates into the same runway slot\nconst departingPlaneVariants: Variants = {\n normal: {\n visibility: 'visible',\n transform: 'translate(0%, 0%) rotate(0deg)',\n transition: { duration: 0.18, ease: [0.23, 1, 0.32, 1] },\n },\n animate: {\n visibility: 'visible',\n transform: [\n 'translate(0%, 0%) rotate(0deg)',\n 'translate(3%, -1%) rotate(-0.5deg)',\n 'translate(12%, -7%) rotate(-2deg)',\n 'translate(28%, -18%) rotate(-4deg)',\n 'translate(50%, -33%) rotate(-7deg)',\n 'translate(76%, -49%) rotate(-8deg)',\n 'translate(104%, -65%) rotate(-6deg)',\n 'translate(122%, -76%) rotate(-4deg)',\n 'translate(122%, -76%) rotate(-4deg)',\n ],\n transition: {\n duration: 1.7,\n ease: 'linear',\n times: [0, 0.08, 0.18, 0.28, 0.37, 0.44, 0.49, 0.52, 1],\n },\n },\n};\n\nconst arrivingPlaneVariants: Variants = {\n normal: {\n visibility: 'visible',\n transform: 'translate(-122%, -70%) rotate(7deg)',\n transition: { duration: 0.16, ease: [0.23, 1, 0.32, 1] },\n },\n animate: {\n visibility: 'visible',\n transform: [\n 'translate(-122%, -70%) rotate(7deg)',\n 'translate(-122%, -70%) rotate(7deg)',\n 'translate(-108%, -62%) rotate(6deg)',\n 'translate(-82%, -48%) rotate(5deg)',\n 'translate(-56%, -32%) rotate(3.5deg)',\n 'translate(-32%, -17%) rotate(2deg)',\n 'translate(-14%, -6%) rotate(0.8deg)',\n 'translate(-3%, -0.8%) rotate(0.15deg)',\n 'translate(0%, 0%) rotate(0deg)',\n ],\n transition: {\n duration: 1.7,\n ease: 'linear',\n times: [0, 0.49, 0.53, 0.61, 0.7, 0.79, 0.88, 0.96, 1],\n },\n },\n};\n\nconst groundTreeVariants: Variants = {\n normal: { visibility: 'visible', transform: 'translateX(15px)' },\n animate: {\n visibility: 'visible',\n transform: [\n 'translateX(15px)',\n 'translateX(13px)',\n 'translateX(8px)',\n 'translateX(1px)',\n 'translateX(-7px)',\n 'translateX(-15px)',\n 'translateX(-22px)',\n ],\n transition: { duration: 1.7, ease: 'linear', times: [0, 0.08, 0.22, 0.4, 0.6, 0.78, 1] },\n },\n};\nconst generatedGeometryVariants: Variants = {\n normal: { visibility: 'hidden', transition: { duration: 0.08 } },\n animate: { visibility: 'visible', transition: { duration: 0.08 } },\n};\n\nconst AirplaneTakeOff01Icon = forwardRef(\n ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {\n const controls = useAnimation();\n const { handleMouseEnter, handleMouseLeave } = useIconAnimation({\n controls,\n loops: false,\n onMouseEnter,\n onMouseLeave,\n ref,\n });\n\n return (\n \n \n \n \n \n \n \n \n \n \n );\n }\n);\n\nAirplaneTakeOff01Icon.displayName = 'AirplaneTakeOff01Icon';\n\nexport { AirplaneTakeOff01Icon };\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" }