1

Rocket Launch

A hand-drawn rocket illustration that ignites its engines and lifts off the pad on demand, with a reset back to rest.

Interaction Type

Click Launch to ignite the engines and lift off; Reset returns the rocket to the pad.

Props

Options you can pass to customize this component.

Prop
Type
Description
launchLabel
string

Label for the button that starts the launch sequence. Defaults to "Launch".

resetLabel
string

Label for the button that resets the rocket to the pad. Defaults to "Reset".

onLaunch
() => void

Called once the rocket leaves the pad, after the ignition delay.

onReset
() => void

Called when the reset button returns the rocket to the pad.

className
string

Extra classes merged onto the root element.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/rocket-launch.json

How to use

import { RocketLaunchIllustration } from "@/components/illustration/rocket-launch"

export function Example() {
  return <RocketLaunchIllustration />
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
npx shadcn@latest addhttps://ui.nexvyn.dev/r/rocket-launch.json