Pulse
Why
A home can have lights, heating, locks and batteries that need attention at the same time. Pulse groups related readings and controls into circular objects, then brings alerts to the front. The layers keep other channels visible while you deal with the alert.
Systems and channels
Each system is a circular object with a few channels, such as temperature, mode and fan speed. The active channel sits in front; the others appear as larger, fainter rings behind it. An alert brings its channel forward. Once resolved, the channel moves back behind the active one.
Why round
The center shows the channel name, its current value and a short explanation. The ring around it holds the control: a band to drag, segments to tap or named options to choose from.
Round things also stack. Put a larger ring behind a smaller one and the eye reads depth without a shadow or a blur. The layers of a system are rings of growing size, each one a bit further back.
Depth has to mean something
Pulse uses depth for three things, in this order of importance.
- What is active. The front layer is the one you read and use.
- What is urgent. An alert raises its layer. A more serious one displaces it; a resolved one goes back on its own.
- How much room. A system comes closer when something needs focus, and steps back when nothing does.
Layer movement follows changes in priority or navigation. The pointer also tilts the object a few degrees to make the depth easier to see.
Several alerts
When several alerts are active, these five rules determine which one stays in front and how the others appear.
| Rule | What it does |
|---|---|
| Stable | The one in front stays. Only a more serious one displaces it. The others wait in order of arrival. |
| One wave | Only the front alert calls. The ones waiting are their layers behind, in their color, named. |
| Seen | An alert you have seen goes behind and stops calling. It comes back if its text changes. |
| Summary | With many alerts, the board queues them by urgency and its center holds the most serious; you open one, resolve it, come back. |
| Locked | After a layer change the controls lock for a moment, so a nervous tap does not resolve two things. |
Against layer confusion
Layers in depth are easy to overdo. These are the rules that keep them readable, and the code enforces them.
- At most three visible layers. The rest are counted and named, not drawn. The viewer can raise it to five on a large screen.
- Only the front layer has a face and a full disc. Behind: a ring and a label.
- The front stroke is twice the one behind. The hierarchy reads without color.
- Labels are staggered, never on the same line.
- The alert carries the weight: a deeper tone, a heavier ring, a wave, on the ring, the segment or the label. The disc is never painted, and nothing that calls grows.
- In segments, only the failing one is painted, and the call comes out of there.
- Never two layers at the same radius. Each step grows by at least 42 percent.
- The 3D container takes no clicks. The layers do. Tapping a ring brings it forward.
When to open a detail view
Tapping the disc opens a detail view when there is more to show: history, a camera image, a long list, a color wheel or individual entities. Controls that fit on the ring, such as a temperature dial or an alarm mode, stay there.
Command feedback
A control pulses while a command is on its way and settles when the source reports the new state. If the command is refused, the value comes back, the control keeps a red outline and a Retry appears. When a command needs a code first, a keypad asks for it before anything is sent.
One way to read time
A ring that shows time is a window, not a clock face. Now is always at the top and the past runs clockwise into it, fainter the older; the slot past now stays empty, the seam. No numerals on the rim, one tick at now, at most a notch where a month turns. The clock time, when it matters, is text in the face. The day of a sensor, the day of the lights, the orbit's changes and the month all read this way, so nobody has to guess where noon is.
Two registers
A ring can be a gauge or an instrument. A gauge is read: thin strokes, tabular numbers, high contrast. An instrument is felt: filled arcs, overlap, asymmetry. Pulse is a gauge in front and an instrument behind: the layers behind are the ambient, the front layer is the data.
Motion
| What | How long |
|---|---|
| Hover, focus, press | 150 to 200 ms |
| A layer comes forward | 800 ms, easing out |
| Zoom between levels | 800 ms |
| A minor alert calls | every 1.6 s |
| A critical alert calls | every 0.9 s |
| A system calls on the board | a wave every 2.6 s, or 1.5 s if critical |
Nothing moves without a cause: a reading changed, something is urgent, you went somewhere. With prefers-reduced-motion the calls and the travel are gone; the hierarchy stays, by contrast and position.
How we got here
- Composite icons: a glyph and two related rings, not two random data points.
- Depth has to mean something: active, urgent, room.
- Layers seen head-on; the tilt only explains.
- Four domains, a home, a car, a pet, a server, and one engine for all of them.
- Waves instead of shakes: what needs attention calls.
- Several alerts, five rules.
- Home Assistant as the first real source, and everything it taught: rooms, scenes, the gear, the card.