# Pattern lock
> 3x3 pattern lock with a pixel trail; skipped middle nodes join automatically, a wrong pattern shatters and falls, a right one turns green.
- Element: `<px-pattern>`
- React: `import { PxPattern } from "@/components/lumesec/px-pattern"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-pattern.json
- Page: https://elements.lumesec.ai/components/pixel-lab/pattern



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

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

<px-pattern></px-pattern>
```

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

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

## Usage

React:

```tsx
import { PxPattern } from "@/components/lumesec/px-pattern";

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

HTML:

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

<px-pattern></px-pattern>
```

## Behaviour

Draw through the nodes to unlock. The trail is pixels, skipped middle nodes join automatically, a wrong pattern shatters and falls, and the right one goes green node by node.

## API reference

### Attributes

| Attribute | React prop | Type     | Default     | Description                                                                                                                                     |
| --------- | ---------- | -------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| `pattern` | `pattern`  | `string` | `0,3,6,7,8` | The correct pattern as comma-separated node indexes 0 to 8, row by row from the top left. Read when a pattern is checked and when Show me runs. |

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event    | React prop | Detail | Description                                               |
| -------- | ---------- | ------ | --------------------------------------------------------- |
| `unlock` | `onUnlock` | `{}`   | Fires when the drawn pattern matches `pattern`.           |
| `fail`   | `onFail`   | `{}`   | Fires when a pattern of two or more nodes does not match. |

### Methods

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

| Method    | Description                                                                                                       |
| --------- | ----------------------------------------------------------------------------------------------------------------- |
| `demo()`  | Draws the correct pattern node by node, then checks it. Ignored while already running or after a correct pattern. |
| `reset()` | Clears the current pattern and returns to the idle prompt.                                                        |

### Properties

| Property             | Type       | Description                                       |
| -------------------- | ---------- | ------------------------------------------------- |
| `secret` (read-only) | `number[]` | The `pattern` attribute parsed into node indexes. |

## Accessibility

* The canvas has `role="img"` and `aria-label="Pattern lock. Use Show me to watch the right pattern."`.
* The status text under the grid is an `aria-live="polite"` region that reports success or "Wrong pattern".
* Drawing requires a pointer; "Show me" is a native button.
* Reduced motion: the wrong-pattern shake and the success sparks are skipped; the falling debris still animates.

## 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 `--destructive`, `--foreground`, `--lumesec`, `--lumesec-success` and `--muted-foreground`.

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

## Notes

* The match is exact and ordered, and the pattern is checked in the browser from a visible attribute, so this is a UI pattern, not a security control.
* The default pattern is an L. The host carries `data-state="ok"` or `data-state="wrong"`; it resets 2.4 seconds after a match and 1.2 seconds after a failure.
* The canvas is a fixed 216 by 216px.