Low Battery Notification

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.1

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.

const transitions = {
  blur: {
    initial: { opacity: 0, filter: "blur(16px)" },
    animate: { opacity: 1, filter: "blur(0px)" },
    exit: { opacity: 0, filter: "blur(16px)" },
  },
};

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.

transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}

Footnotes

  1. Recording was taken from @BetaProfiles on Twitter. ↩

If you've enjoyed this guide and found it useful, please consider donating to support my work by visiting my donation page. Your contribution helps cover the costs of research, writing and hosting and keeps me motivated to create more in-depth tutorials.

Every bit of support makes a meaningful difference.

→ Consider Supporting