# Temperature fire
> Temperature slider drawn as a pixel fire simulation: low values leave embers, high values burn tall and Wild throws sparks.
- Element: `<px-flame>`
- React: `import { PxFlame } from "@/components/lumesec/px-flame"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-flame.json
- Page: https://elements.lumesec.ai/components/pixel-lab/flame



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

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

<px-flame value="0.9"></px-flame>
```

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

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

## Usage

React:

```tsx
import { PxFlame } from "@/components/lumesec/px-flame";

export function Example() {
  return (
    <PxFlame value={0.9} />
  );
}
```

HTML:

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

<px-flame value="0.9"></px-flame>
```

## Behaviour

Model temperature as a real fire simulation. Low values leave embers, “Creative” burns tall, and “Wild” starts throwing sparks.

## API reference

### Attributes

| Attribute | React prop | Type     | Default | Description                                                   |
| --------- | ---------- | -------- | ------- | ------------------------------------------------------------- |
| `value`   | `value`    | `number` | `0.9`   | Starting temperature from 0 to 2. Read once on first connect. |

### Events

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

| Event    | React prop | Detail              | Description                                                                              |
| -------- | ---------- | ------------------- | ---------------------------------------------------------------------------------------- |
| `change` | `onChange` | `{ value: number }` | Fires when a drag ends and on each arrow-key step, with the temperature in steps of 0.1. |

### Methods

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

| Method               | Description                                                                                                     |
| -------------------- | --------------------------------------------------------------------------------------------------------------- |
| `set(value: number)` | Sets the temperature and updates the readout and ARIA values without firing `change`. The value is not clamped. |

## Keyboard

| Keys                  | Action                        |
| --------------------- | ----------------------------- |
| ArrowRight / ArrowUp  | Raise the temperature by 0.1. |
| ArrowLeft / ArrowDown | Lower the temperature by 0.1. |

## Accessibility

* The canvas is focusable with `role="slider"`, `aria-label="Temperature"`, `aria-valuemin="0"` and `aria-valuemax="2"`.
* `aria-valuenow` and `aria-valuetext` (for example "0.9, Balanced") follow the value.
* The readout above the fire is an `aria-live="polite"` region.
* Reduced motion: the flying embers at high values are skipped and the readout changes without the roll; the fire simulation keeps running.

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

* Labels: up to 0.35 Precise, up to 0.85 Balanced, up to 1.35 Creative, above that Wild. Embers start at 1.4.
* Pointer input snaps to 0.1. The canvas is 190px tall and animates continuously while on screen.