Liquid Morphism Cards
Exploring fluid animations and glassmorphism effects in Flutter using custom painters and shaders for next-generation UI experiences.
Why I Built This
Tech Stack
Technical Approach
I took a bottom-up approach, starting with Flutter's CustomPainter API to understand low-level rendering before abstracting into reusable components.
Research & Inspiration
Studied glassmorphism trends, analyzed implementations in SwiftUI and CSS, collected 50+ UI references from Dribbble and Behance.
Core Engine Development
Built a custom rendering engine using CustomPainter with support for real-time blur, gradient mesh, and noise textures.
Animation System
Implemented a physics-based animation controller that responds to touch velocity and device motion sensors.
Performance Optimization
Used RepaintBoundary, cached paint objects, and implemented LOD (Level of Detail) system for older devices.
Key Learnings
What worked, what didn't, and what I'd do differently.
What Worked
- CustomPainter with cached Paint objects achieved 60fps on mid-range devices
- Physics-based animations feel more natural than predefined curves
- Layer separation (blur layer, content layer, glow layer) simplified debugging
- Using device sensors for subtle parallax creates premium feel without effort
Challenges Faced
- Real-time shader compilation caused jank on first render — solved with warm-up
- Heavy blur on full-screen elements dropped to 30fps — needed LOD fallback
- Complex gradient meshes increased GPU memory significantly on older devices
Key Insights
The bigger lessons that go beyond this specific experiment.
Performance vs Aesthetics Trade-off
Premium effects are possible, but require graceful degradation. Always have a simpler fallback for lower-end devices.
Flutter's Hidden Power
Most developers use pre-built widgets, but CustomPainter unlocks near-native rendering performance with full control.
Motion Design Principles
Good animation isn't about flashy effects — it's about guiding user attention and providing feedback.