Liquid Pill
Fills with liquid as the page scrolls. Spring physics, a sloshing surface, rising bubbles and a label that turns color under the liquid.
Status: Fluid ActiveVelocity: 4.5 rad/s
- Scroll Height
- 200 px
- Liquid Mass
- 6.7 ml
- State
- Charging
Progress6
Bars, rings, steps and liquids – progress you can watch, with real progressbar semantics.
Gradient Ring
Circular progress with a gradient stroke and the number in the middle. pathLength="100" keeps the math simple.
Steps
Done steps get a tick, the current one pulses gently, the line fills in between. aria-current="step" marks where you are.
- Brief – done
- Concept – done
- Design – current step
- Launch
Striped Bar
Moving stripes say "still working" even when the number does not change for a moment.
Uploading 12 images64%
Battery
Cells light up with the level, turn amber and then red when it gets low. Charging adds a bolt and a breathing top cell.
Reading
A thin bar fills as you read, the minutes left count down. Scroll the article – or bind it to the whole page.
Good brand systems start with listening. Before the first sketch, we sit with the people who will live with the brand every day.
Then come the constraints: where will the logo appear first, what does the website have to do on day one, what can wait?
Type, color and voice follow from there. Each decision is tested on real layouts, not on empty artboards.
The result is a system that grows with the company – documented, so that it keeps working without me in the room.
And then the best part: watching it out in the world, on signs, screens and in people’s hands.