Dynamic Island on the Web

• Done Project
• Dynamic Island on the Web, written up in Recreating the Dynamic Island
• iPhone Playground

221111

• Applied Squircle
• Applied Quick Clipping with Framer Motion for performance

221110

• Equalizer
  • Base Length System
• Optimize Animations (css will-change)
• Removed Scrubber Toggle
• Squircle, failed

221109

• Finally, as the last step, the only thing left is the integration with my website!

221028

• Reverse Engineering Apple Music API
• I can now make API requests to find out what I was listening to.

221020

I finally got the knack for how to animate and accelerate things.

All I need to do now is to pack them with an API-style JSON payload.

That way, anyone can put whatever data they want...

221016

Stack

• Framer Motion seems appropriate.

Rough Idea

Different Sizes

Resources

• jhaemin/dynamic-island: A web implementation of the Dynamic Island
• Live Activities - System experiences - Components - Human Interface Guidelines - Design - Apple Developer