# Flames

Small animated bars proving activity is flowing. CSS grade for list rows (cheap, many); signal-driven grade whose bar heights follow a real level.

Install: `npx candlelight-ds add flames`

Category: instrument · Grammar: G7

## Use when

Something is audibly/visibly running — a track, a job, a broadcast.

## Don't use when

Decoration. Flames mean activity; an idle state never wears them.

## States

- active (three CSS bars)
- signal-driven (scaleY follows the level)
- hidden when idle
- static under reduced motion

## Keyboard

- (none — pointer/semantic only)

## Acceptance tests

- aria-hidden — flames are a visual double of state that exists elsewhere in text.
- The CSS loop dies under prefers-reduced-motion (flame-bar).

## Files

- components/instruments/Flames.tsx

npm dependencies: @candlelight-ds/tokens, clsx, tailwind-merge

Rendered twin: https://candlelight-docs.vercel.app/components/flames · Full spec: https://candlelight-docs.vercel.app/spec.md