# Split-flap board
> Split-flap departure board whose tiles flip through the alphabet and cascade left to right on each new message.
- Element: `<px-splitflap>`
- React: `import { PxSplitflap } from "@/components/lumesec/px-splitflap"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-splitflap.json
- Page: https://elements.lumesec.ai/components/pixel-lab/splitflap



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

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

<px-splitflap></px-splitflap>
```

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

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-splitflap.json
```

## Usage

React:

```tsx
import { PxSplitflap } from "@/components/lumesec/px-splitflap";

export function Example() {
  return (
    <PxSplitflap />
  );
}
```

HTML:

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

<px-splitflap></px-splitflap>
```

## Behaviour

A departure board of flip tiles. Each tile flips through the alphabet until it lands on its letter, with the flaps cascading left to right, so status changes feel like an announcement.

## API reference

### Attributes

| Attribute  | React prop | Type     | Default                                                                                      | Description                                                                                                |
| ---------- | ---------- | -------- | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| `messages` | `messages` | `string` | `OPUS 5.5 ULTRACODE\|CONTEXT 64% · OK\|4 AGENTS RUNNING\|DEPLOY 14:02 LIVE\|SPEED 182 TOK/S` | Messages separated by `\|`. Read each time the board advances, so a change shows from the next message on. |

### Methods

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

| Method                  | Description                                                                     |
| ----------------------- | ------------------------------------------------------------------------------- |
| `next()`                | Advances to the next message and restarts the auto-advance timer.               |
| `show(message: string)` | Flips the board to an arbitrary message without changing the rotation position. |

### Properties

| Property               | Type       | Description                                                  |
| ---------------------- | ---------- | ------------------------------------------------------------ |
| `messages` (read-only) | `string[]` | The `messages` attribute split on `\|`, or the default list. |

## Accessibility

* The canvas has `role="img"` and its `aria-label` is set to the current message as written.
* "Next message" is a native button; clicking the canvas does the same but the canvas is not focusable.
* Reduced motion: tiles switch straight to their target character without flipping.

## 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` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-fg` and `--ui-muted`.

## Notes

* The board has 18 tiles. Messages are upper-cased, padded or cut to 18 characters, and any character outside A to Z, 0 to 9 and `. : - / · % + >` shows as a blank tile.
* The board advances every 5.6 seconds while it is on screen. Characters are drawn in the monospace font, digits in the accent colour.
* The canvas height is set from its width so the tiles keep their proportions.