# Release rocket
> Release animation with a pixel rocket: a three-second countdown, smoke on the pad, then liftoff while the stars streak past.
- Element: `<px-launch>`
- React: `import { PxLaunch } from "@/components/lumesec/px-launch"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-launch.json
- Page: https://elements.lumesec.ai/components/pixel-lab/launch



Live preview: https://elements.lumesec.ai/view/px-launch

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-launch.js"></script>

<px-launch version="v2.14"></px-launch>
```

## Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

## Installation

```bash
npx shadcn@latest add @lumesec/px-launch
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-launch.json
```

## Usage

React:

```tsx
import { PxLaunch } from "@/components/lumesec/px-launch";

export function Example() {
  return (
    <PxLaunch version="v2.14" />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-launch.js"></script>

<px-launch version="v2.14"></px-launch>
```

## 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

| Attribute | React prop | Type     | Default | Description                                                                                         |
| --------- | ---------- | -------- | ------- | --------------------------------------------------------------------------------------------------- |
| `version` | `version`  | `string` | `v2.14` | Version 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.

| Event      | React prop   | Detail | Description                                                     |
| ---------- | ------------ | ------ | --------------------------------------------------------------- |
| `liftoff`  | `onLiftoff`  | `{}`   | Fires when the countdown reaches zero and the rocket lifts off. |
| `launched` | `onLaunched` | `{}`   | Fires when the rocket has left the frame.                       |

### Methods

Call them on the element, for example through a React ref.

| Method | Description                                                                                               |
| ------ | --------------------------------------------------------------------------------------------------------- |
| `go()` | Starts the countdown when the rocket is on the pad, or lands it again after a launch. Ignored mid-flight. |

### Properties

| Property              | Type     | Description                          |
| --------------------- | -------- | ------------------------------------ |
| `version` (read-only) | `string` | The `version` attribute, or `v2.14`. |

## Accessibility

* The canvas has `role="img"` and a fixed `aria-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](/docs/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 `liftoff` and `launched` to 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.