frilo / Coin Bloom
Motion exploration for the frilo mark. Sep 2026.
Summary
The frilo mark is sixteen rays around an empty center. It reads as a loading spinner. It was also always meant to be coins. Coin Bloom makes both readings literal: every ray is a coin seen edge-on. The mark loads, the coins turn to face you, and they turn back into the mark. One asset covers the logo, the loader and the brand film.
The idea#
frilo designs products where thinking and money meet: AI and web3. The mark had to carry both.
- Thought is the loading state. A spinner is the universal sign that a machine is working.
- Money is the coin. Seen side-on, a coin is a line. Sixteen lines in a ring are the mark.
So the logo holds still as a spinner and moves as currency. Nothing is added to the mark. The animation only rotates what is already there.
The system#
One rule: every loop starts and ends on the exact mark. Motion is a detour, never a new logo.
| Parameter | Signature value | Role |
|---|---|---|
| Coins | 16 × 40 px, 7 px thick | Edge-on thickness equals the ray weight |
| Loop | 3.2 s | Hold, bloom, return |
| Curve | cubic-bezier(.87,0,.13,1) | Expo in-out. Still, whip, settle |
| Stagger | 0.38 s spread, clockwise | Opens as a ripple, not a switch |
| Bloom | 18 px outward push at peak | The ring breathes open |
| Ring | Turns 90° (four ray steps) per loop | Seamless: the end frame is the start frame |
Built as real CSS 3D (each coin is a cylinder: two faces plus a shaded rim), not video. About 4 KB, GPU composited, sharp at any size, and it rests on the static mark when a visitor has reduced motion on.
Iterations#
Eighteen variations on the same engine, in five families:
- Tempo: Snap (1.5 s, UI feedback), Fluid (4.4 s sine), Spring and Jelly (physical overshoot).
- Order: Mirror, Alternate, Quadrants, Shuffle. The stagger pattern changes the meaning: symmetric reads calm, shuffled reads as data arriving.
- Turn: Somersault (full 360° flip), Peek (open and fold back).
- Space: Orbit wave (an endless spinner), Stack (coins pile into a column toward the camera), Lift (coins rise into perspective).
- Proportion: Long rays (12), Stubby (24), Chunky (8, holds at favicon size), Hairline (32).
Decision#
Signature stays the primary mark animation. The expo curve gives it a held breath before each move, which reads as intent rather than decoration. Two supporting cuts go into the system:
- Snap for product micro-feedback (saves, confirms).
- Orbit wave for indefinite loading, where a hold would read as a freeze.
Where it lives#
- Site loading state and hero (live CSS 3D).
- Email signature and Slack (GIF, first frame is the static mark for clients that do not animate).
- X and LinkedIn (MP4 loops).
- Static contexts keep the still mark: favicon, OG image, avatar.