Temperature fire
Temperature slider drawn as a pixel fire simulation: low values leave embers, high values burn tall and Wild throws sparks.
Playground
Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.
<PxFlame value={0.9} />Installation
pnpm dlx shadcn@latest add @lumesec/px-flameFirst 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-flame.jsonUsage
import { PxFlame } from "@/components/lumesec/px-flame";
export function Example() {
return (
<PxFlame value={0.9} />
);
}Behaviour
Model temperature as a real fire simulation. Low values leave embers, “Creative” burns tall, and “Wild” starts throwing sparks.
API reference
Attributes
valueReact propvalueTypenumberDefault0.9Starting temperature from 0 to 2. Read once on first connect.
Events
Events bubble and cross the shadow boundary unless the description says otherwise.
changeReact proponChangeDetail{ 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.
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"andaria-valuemax="2". aria-valuenowandaria-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.
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.
Related
Was this page helpful?