Build The Million-Dollar Animation
summary
Recreates the viral Telegram profile-to-droplet animation in Kotlin using Jetpack Compose Canvas, documenting the actual claim: math-heavy Bezier work first, then a simpler metaball trick — gooey (metaball) via blur + alpha-threshold — that replaces hundreds of hours of bespoke math. Ships a performant particle system (library v0.1.0) that updates with withFrameNanos and handles up to 10,000 particles, target-based per-frame interpolation, and provides API 33/31/21 fallbacks so the effect actually works across devices.
AI-written summary · about
chapters (19)
- 0:00Million-dollar animation intro
- 1:04Telegram animation contest
- 3:37Rebuilding in Kotlin/Compose
- 5:01Material 3 top app bar limits
- 7:55Custom dynamic top app bar
- 9:42Scroll progress animations
- 10:04Early Bezier curve attempts
- 13:55Gooey effect discovery
- 15:20Effect simplified in 3 lines
- 16:03Metaball render effect
- 19:14API compatibility handling
- 21:46API implementations compared
- 22:28Particles for visual depth
- 24:14withFrameNanos for precision
- 25:39Particles library intro
- 26:22Particle effects in production
- 27:26Layered final animation
- 28:54Key takeaways
- 29:57Q&A
related talks
32mJetpack Compose for Games & Animations
36mCreative Coding with Compose
39mMagic Sprinkles: Adding animations to your app with Jetpack Compose
36mPractical Magic with Animations in Compose
32mPractical Magic with Animations in Compose
36mPractical implementations of powerful UI expressions using Jetpack Compose
21mAnimations with Jetpack Compose
11mFrom Zero to Particles: Animated particles Workshop