Droploft motion identity
The Droploft mark in motion, and a system of gaps in its own bars that shows what the product is doing: taking something in, working on it, done, or refusing.
- 2026
- Motion identity and product-state system, computed frame by frame in JavaScript; nothing is hand-keyframed
- Logo motion: reveal, ingest, put away (v13)Six product states and the hand-overs between them (v6.2)For developers: the engine, a parameter spec, Lottie, SVG and PNG exports
1The name is the motion
Droploft takes in scattered information, files and context and organises them into a structured space: the loft. The name is the motion: drop, falling; loft, held after the fall.
The mark is eleven rounded bars whose ends trace a raindrop. The bars are what the loft holds; the two beads at the drop's waist are the loft itself. One rule runs through all of it: nothing is ever thrown out of the loft.
2The logo motion
Reveal, 1.6 s. A small drop forms above the beads and falls. The beads close in and take it at its waist; loft and drop sink and spring back. The drop opens into the mark, centre first.
Ingest, 1.3 s. A file falls into a bead, which takes it in on the same spring. Put away, 1.3 s. The drop folds back and is drawn into the loft until only the beads remain, and from there the reveal can begin again.
Nothing jumps: no edge ever changes speed in an instant, checked at 1 kHz. Falls are slowed, not stopped, by eased-in gravity and a quintic brake, and one damped spring (2.2 Hz, ζ 0.6) takes every arrival.
3A gap is a passage, not a thing
The second brief was to let the mark serve the product's states. The inspiration was Pentagram's mark for TwelveLabs, a Muybridge horse drawn on fixed threads where all the motion lives in where each thread breaks. Droploft's version is gaps: empty squares in the vertical bars, under two hard rules. Gaps appear only in motion, so the mark at rest is always whole; and a gap never changes size.
A gap is one bar wide, 2 u. It enters and leaves only through a bar's end, starting and stopping at rest, and the bar closes behind it. Direction is the meaning: going down, things are coming in; going up, the loft is working on what it holds. Gaps travel only in the eight middle bars, so the drop's outline never changes.
4Six states
Ready. The beads open while a file hovers; on a drop they stay open as it falls and close exactly as it lands, the reveal's own catch. Loading. A gap falls every 0.25 s from a 16-second table: sides always alternate, never neighbours, never mirrors. Progress. Loading on a clock that glides from 0.25 to 0.75 s; a ring closes every quarter, and it is never still before 100 %.
Processing. Rising gaps sweep left to right, 0.18 s a column, never whole. Done. Once whole, mark and beads sink together and spring back on the reveal's spring. Error. The beads shake at once, together, while gaps already in flight land; nothing is thrown out.
5Hand-overs
States in the same direction hand over bar by bar: a bar joins the new state once its last gap has left and it has rested 120 ms, so loading turning into progress is invisible. A change of direction waits for the mark to be whole, then 0.4 s, so the loft is seen to hold what came in before it works on it. After a drop, each bar waits for its own give to settle, so the far side starts first.
Drop, then loft.
The live study plays the logo motion; drop a file on it to see the catch.
Enter the study
