Snapchat AR
Snapchat AR
ICON
When I saw this animation on Twitter I knew I had to recreate it. The combination of smooth transitions and subtle details perfectly captures the essence of iOS design.
Building the Battery Icon
Recreating Apple's low battery alert required careful attention to animation timing and visual hierarchy. The component is built with a three-state system: closed, expanded, and low power mode enabled.
Architecture
The core uses AnimatePresence with popLayout mode to smoothly transition between states.
The island container uses layout animations to naturally resize as content changes, while individual elements fade in with blur effects for that signature iOS polish.
Springs
For the spring, I kept it simple. I was mainly concerned with the duration. Luckily, Motion provides the ability to customize springs based on duration. Using this, I timed the recording and mapped it to the parameters. Then I edited them till it just felt right. I ended up with a spring configuration of the following.
