Rocket Launch

1'use client'
2 
3import {
4  forwardRef,
5  useEffect,
6  useId,
7  useImperativeHandle,
8  useRef,
9  useState,
10  type ComponentPropsWithoutRef,
11} from 'react'
12import { cn } from '@/lib/utils'
13 
14export type RocketLaunchPhase = 'idle' | 'igniting' | 'flying'
15 
16export type RocketLaunchHandle = {
17  launch: () => void
18  reset: () => void
19}
20 
21const IGNITION_DELAY_MS = 1400
22 
23export type RocketLaunchIllustrationProps = Readonly<
24  Omit<ComponentPropsWithoutRef<'div'>, 'onLaunch' | 'onReset'> & {
25    launchLabel?: string
26    resetLabel?: string
27    onLaunch?: () => void
28    onReset?: () => void
29    onPhaseChange?: (phase: RocketLaunchPhase) => void
30    showControls?: boolean
31  }
32>
33 
34function EngineFlame({
35  path,
36  hotPath,
37  flameGradId,
38  hotGradId,
39  turbId,
40  speed,
41}: Readonly<{
42  path: string
43  hotPath: string
44  flameGradId: string
45  hotGradId: string
46  turbId: string
47  speed: 'a' | 'b' | 'c' | 'd'
48}>) {
49  return (
50    <g filter={`url(#${turbId})`}>
51      <path
52        className={cn('rocket-flame-body', `rocket-flame-body-${speed}`)}
53        fill={`url(#${flameGradId})`}
54        d={path}
55      />
56      <path
57        className={cn('rocket-flame-hot', `rocket-flame-hot-${speed}`)}
58        fill={`url(#${hotGradId})`}
59        d={hotPath}
60      />
61    </g>
62  )
63}
64 
65export const RocketLaunchIllustration = forwardRef<
66  RocketLaunchHandle,
67  RocketLaunchIllustrationProps
68>(function RocketLaunchIllustration(
69  {
70    className,
71    launchLabel = 'Launch',
72    resetLabel = 'Reset',
73    onLaunch,
74    onReset,
75    onPhaseChange,
76    showControls = true,
77    ...props
78  },
79  ref,
80) {
81  const [phase, setPhaseState] = useState<RocketLaunchPhase>('idle')
82  const ignitionTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
83 
84  const uid = useId()
85  const flameGradId = `rocket-flame-grad-${uid}`
86  const hotGradId = `rocket-hot-grad-${uid}`
87  const turbId = `rocket-turb-${uid}`
88  const scope = `rocket-launch-${uid}`
89 
90  const setPhase = (next: RocketLaunchPhase) => {
91    setPhaseState(next)
92    onPhaseChange?.(next)
93  }
94 
95  useEffect(() => {
96    return () => {
97      if (ignitionTimer.current) clearTimeout(ignitionTimer.current)
98    }
99  }, [])
100 
101  const handleLaunch = () => {
102    if (phase !== 'idle') return
103    setPhase('igniting')
104    ignitionTimer.current = setTimeout(() => {
105      setPhase('flying')
106      onLaunch?.()
107    }, IGNITION_DELAY_MS)
108  }
109 
110  const handleReset = () => {
111    if (ignitionTimer.current) {
112      clearTimeout(ignitionTimer.current)
113      ignitionTimer.current = null
114// … truncated