Droploft motion identity

2026 · Motion identity, product states, code

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.

The live study plays the logo motion; drop a file on it to see the catch.

Enter the study
Loop · 0:20 — reveal, ready, drop, loading, progress, done, processing, done, put away, and back to the start.
Year
2026
Medium
Motion identity and product-state system, computed frame by frame in JavaScript; nothing is hand-keyframed
Delivered
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.

The Droploft mark: eleven rounded white bars of different lengths forming a raindrop shape, with a short bead either side, on dark green
Still · The mark — eleven bars, the drop held at its waist by two beads

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.

Reveal — the drop falls and is caught at its waist
Ingest — a file falls into a bead on the same spring
Put away — the drop folds back into the loft

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.

Nine frames of a single bar as a square gap travels down through it and leaves; labelled in milliseconds
Still · One gap, 0 to 828 ms — it sets off from rest just outside the end, keeps its 2 u size, leaves through the other end, and the bar closes behind it

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.

Ready, then a drop — the beads open and close on the landing
Loading — gaps falling, alternating sides
Progress, then done — the rings close each quarter
Processing — gaps rising, left to right
Done — the mark sinks and springs back
Error — the beads shake; 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, load, progress, process, done — one run through the states
Leave, load, error, process, done — a refusal, then recovery

Drop, then loft.

The live study plays the logo motion; drop a file on it to see the catch.

Enter the study