Release rocket
Release animation with a pixel rocket: a three-second countdown, smoke on the pad, then liftoff while the stars streak past.
Playground
Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.
<PxLaunch version="v2.14" />
Installation
pnpm dlx shadcn@latest add @lumesec/px-launchFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/px-launch.jsonUsage
import { PxLaunch } from "@/components/lumesec/px-launch";
export function Example() {
return (
<PxLaunch version="v2.14" />
);
}Behaviour
A pixel rocket: a big countdown, smoke on the pad, then liftoff with a flame trail while the stars streak past. Land it again afterwards.
API reference
Attributes
versionReact propversionTypestringDefaultv2.14Version shown in the "Launched · <version> is live" status. Read when the rocket leaves the frame.
Events
Events bubble and cross the shadow boundary unless the description says otherwise.
liftoffReact proponLiftoffDetail{}Fires when the countdown reaches zero and the rocket lifts off.
launchedReact proponLaunchedDetail{}Fires when the rocket has left the frame.
Methods
Call them on the element, for example through a React ref.
go()Starts the countdown when the rocket is on the pad, or lands it again after a launch. Ignored mid-flight.
Properties
version (read-only)TypestringThe version attribute, or v2.14.
Accessibility
- The canvas has
role="img"and a fixedaria-label="Rocket on the launch pad"; the countdown numbers are drawn on the canvas in the monospace font and are not announced. - The status line is an
aria-live="polite"region that announces Countdown, Liftoff, Launched and Landing. - The Launch / Land it control is a native button, disabled during the countdown, flight and landing.
- Reduced motion: the rocket does not shake, no exhaust or smoke is drawn and the stars do not scroll or streak; the rocket still rises and lands.
Theming
The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.
This component reads --foreground, --lumesec, --lumesec-success and --muted-foreground.
To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-fg, --ui-muted and --ui-ok.
Notes
- The component does not publish anything; use
liftoffandlaunchedto hook in real work. - The host carries
data-state="gone"while the rocket is away. The canvas is 236px tall and animates continuously while on screen.
Related
Was this page helpful?