Three into one
I saw Apple fold the signal, Wi-Fi and battery icons into a single ring and kept replaying it. So I rebuilt it in React and Motion to learn how it moves.
- Role
- Motion study
- Year
- 2026
- Built with
- React, Motion
- Inspired by
- Apple
The battery squeezes into a line, runs a loop around the Wi-Fi icon and unrolls into a ring. The signal bars drop to dots and swing into the gap it leaves.
I wanted to understand why it looked so good. So I went through the clip frame by frame and measured where every part was. Then I gave each part its own spring in Motion and tuned its stiffness, damping and start delay to match.
The numbers explained a lot. The dots are the only part with a visible bounce, because they get thrown into place. Everything else just settles.
The clip only goes one way, so the way back is my own. It runs quicker, and the three icons reform together instead of one at a time.
What surprised me most is how many pieces it takes. There are 15 springs, each starting at its own moment, and it still reads as one object changing shape.