One rule runs the whole system: everything flows. Nothing jumps, and no edge ever changes speed in an instant: every move starts from rest and lands softly, and each hands the eye on to the next. At rest the loft is its two beads. A small drop forms high above them, centre first; after a breath, in which it draws itself out a little as a hanging drop does, it lets go. As it falls the beads close and rise to meet it, as fast as it falls; the loft slows it and takes it at its waist, and loft and drop sink together under its weight and spring back. Held there, the drop opens into the mark, and the beads ride out with its widest point until they let go and rest. The last frame is the static mark, exactly.
The frame the drop opens from. The beads have moved in from their rest to take it at its waist; loft and drop are sinking together under its weight. Nothing has been placed yet: every bar is about to open onto the dashed track it ends on, and the beads will ride out with it to theirs.
Every frame at 30 a second, as drawn. There are no cuts: from one frame to the next every bar and bead moves a little, or not at all. The marked frames are where a named moment begins, each one already under way before the last has finished.
Four sequences, one motion language: the same three curves, the same eased fall, the same give. Whatever falls in is slowed by the loft before it is taken. Nothing loops for decoration: in the product the mark moves when something is dropped in and rests when the work is done. The specimens below repeat so they can be read.
App launch, once per session. A small drop forms above the loft and falls; the beads move in, take it at its waist and give with it. Held, it opens into the mark, and the beads let go to their rest.
One file forms above a bead and drops. The loft slows it, and the bead takes it in: the file slides on down into the bead as the bead and the nearest feet give. The drop's outline never changes. Below 96 px the bead takes the file in without the fall.
Several files: up to three a period, alternating beads, each slowed and taken in the same way, in the order they arrive.
Leaving. The drop folds back into a small drop, outer bars leading, the beads closing on it; a breath; then it is drawn in, and as the last of it goes the beads close over it until the loft is one bead, holding it and giving under its weight. Then the loft opens again into its two beads. Nothing is thrown out; it ends on the empty loft.
Shown at actual size. The motion is drawn from the vector frames at any size from 48 px, here at 160, 96, 64 and 48. At 48–64 px the small falling drop's gaps are under a pixel, so it falls as a tone and resolves into bars as it opens; from 48 to 95 px a bead takes a file in without the fall. Below 48 px the mark is static on the pixel grid, with its beads: 9 bars at 32 px, 7 at 24, and a solid drop at 16, as in the client's own 16 px trim.
The mark is 1.8 × the wordmark's cap height, the client's own ratio, with its waist line on the middle of the x-height. The word stays still while the mark moves. It is set here in a stand-in face; the client's wordmark artwork replaces it.
Units are the canon's own: bar width 2.0, track pitch 3.0, corner radius 0.353 × width, beads at ±19.895, waist line at y 35.903.
| At | Moment | What happens |
|---|
Delivered with this study: the frame set as droploft-frames.json (every sequence sampled at 60 fps: each frame's bars and beads with position, length, width and corner; the named moments; the curves, fall and spring; the box, anchor, size and queue rules); Lottie files for all six sequences in light and ink at 60 fps, a keyframe on every frame; transparent animated PNGs of every sequence at 48, 64 and 96 px and of the reveal at 540 px; 60 fps PNG sequences of the reveal; every named moment as an SVG in currentColor; MP4, WebM and GIF renders on dark and light that play once; the static mark in its own box; and the icons — pixel designs from 16 to 96 px — as SVG, PNG and ICO.