Liquid & Organic · Behaves like water
Fluid orb流体球
- material
- glassy
- responsive
A glass orb with layers of colour crossing and flowing inside it, its specular highlight following the pointer. When the pointer moves the orb seems to turn a little — that is the highlight moving, not the orb.
When to use it
For places where something with no physical form is the subject: an AI assistant, a loading state, live speech recognition. Its dimensionality comes from the highlight following the pointer, so on a touch screen with no pointer give it a default highlight position. And do not make it small — below about 120px it is just a coloured dot and you can no longer see anything flowing inside.
Parameters
orb Ø164px · 4 colour bands · sine-warped edges · sine-eased, per-frame loop · additive (lighter) · specular follows pointer, 140ms lag
Recipe
Fluid orb → 140msFluid orb → orb Ø164px · 4 colour bands · sine-warped edges · sine-eased, per-frame loop · additive (lighter) · specular follows pointer, 140ms lag
One sentence for your AI
Build a fluid orb: a 164px circle containing four colour bands, each with its top and bottom edges warped by two sines at different frequencies so they keep crossing and flowing. Composite the four with lighter (additive) over a dark base — and keep that base dark even in light mode, because additive layers over a bright base saturate to pure white and the bands disappear. Split the specular in two: one part follows the pointer (with a 140ms first-order lag, not glued to it), one is a fixed inner shadow weighting the lower edge. Finish with a 1px rim reflection just outside the circle so it reads as glass rather than a disc.