KQ-1197 · KETTLE/STEAM
Kettle Steam
An inline loader drawn as a stovetop kettle coming to the boil: bubbles rise in its round sight glass, faster and more of them as it heats, and steam curls from the spout as filled ribbons whose curl travels up them, leaning away from the pointer on the drift spring. Given progress, heat is the progress — the bezel round the glass fills like a dial and the lid rattles near the top — and at 1 the whistle flips open on the recoil spring while the steam straightens into a jet, then settles into a still wisp and the frame loop stops; without it, the kettle simmers. The kettle is a real button: held with the pointer, Space or Enter it turns up the flame (a boost in on snap, out on drift, the body dipping on flick), and pressed at the boil it blows the whistle.
Fieldline digest simmeringHold to turn up the heat.
heating · 0%
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/kettle-steam
Props
- label
- string
- default "Loading"
- What is on the boil: the loader's accessible name, shown beside the kettle unless hideLabel.
- hideLabel
- boolean
- default false
- Keep the label for assistive technology only.
- size
- number
- default 24
- The glyph's box in px, crisp from 16 to 64. Below 24 the sight glass, knob and handle grip drop out; below 44 the whistle flap, sheen and third wisp.
- speed
- number
- default 1
- How fast the water churns, the steam curls and the jet runs, 0.5 to 2.
- progress
- number
- default —
- How close to the boil, 0 to 1; the label becomes a progressbar. Omitted, the kettle simmers. At 1 the whistle flips open and the steam jets, then everything comes to rest.
- steam
- number
- default 0.6
- How much steam, 0 (a faint thread) to 1 (a dense plume of three wisps at 44 px and up).
- body
- "steel" | "enamel" | "copper"
- default "steel"
- The kettle's finish, as fixed pigments that read the same in both themes.
- sound
- boolean
- default false
- A hum while the kettle is held, pitched by the heat, and the whistle when it is pressed at the boil. Reaching the boil by itself is silent.
- disabled
- boolean
- default false
- The kettle keeps boiling but takes no presses and the steam ignores the pointer.
- className
- string
- default —
- Classes for the root, an inline-flex row of the kettle and its label.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Loading" | What is on the boil: the loader's accessible name, shown beside the kettle unless hideLabel. |
| hideLabel | boolean | false | Keep the label for assistive technology only. |
| size | number | 24 | The glyph's box in px, crisp from 16 to 64. Below 24 the sight glass, knob and handle grip drop out; below 44 the whistle flap, sheen and third wisp. |
| speed | number | 1 | How fast the water churns, the steam curls and the jet runs, 0.5 to 2. |
| progress | number | — | How close to the boil, 0 to 1; the label becomes a progressbar. Omitted, the kettle simmers. At 1 the whistle flips open and the steam jets, then everything comes to rest. |
| steam | number | 0.6 | How much steam, 0 (a faint thread) to 1 (a dense plume of three wisps at 44 px and up). |
| body | "steel" | "enamel" | "copper" | "steel" | The kettle's finish, as fixed pigments that read the same in both themes. |
| sound | boolean | false | A hum while the kettle is held, pitched by the heat, and the whistle when it is pressed at the boil. Reaching the boil by itself is silent. |
| disabled | boolean | false | The kettle keeps boiling but takes no presses and the steam ignores the pointer. |
| className | string | — | Classes for the root, an inline-flex row of the kettle and its label. |