quattro4maggi 🍕
Production-grade React Native animation demos, built with Skia, Reanimated and WebGPU.
Four new demos every month. MIT licensed. Free, forever.
Clone them. Learn from them. Ship them.
quattro4maggi.com · @m090009
⭐ Star the repo to catch the monthly drops.
Demos
| Demo | Preview | Description |
|---|
| Wabi & More | | Interactive prism bubble with gesture-driven reveals, split-flap text, and particle effects |
| Ripple Effect | | Touch-reactive ripple shader with customizable colors |
| Scale Flip Card | | Card component that expands into a fullscreen portal with 3D flip animation |
| Text Flyin | | Kinetic text animation with staggered character fly-in effect |
| Liquid Metal | | Skia shader component with animated liquid metal effects and customizable colors |
| Live Border Card | | Animated glowing borders with rotating color gradients and customizable glow effects |
| Pull To Refresh | | Gesture-driven pull-to-refresh with a three-stage animation, switchable iOS/Android layout models, and a sticky Threads-style glyph header driven by the same lifecycle |
| Gargantua TypeGPU | | A full-screen WebGPU experience built with Expo Router, and TypeGPU |
| Soap Film | — | Animated soap-film iridescence you can disturb by dragging, with the thickness field and its color mapping kept as separate stages |
| Liquid Bubble Live | — | One draggable, pinchable glass bubble that refracts bouncing images live through a Skia backdrop shader |
| Liquid Bubble Interaction | — | A trigger bubble that blooms the greeting into four labelled glass bubbles that float and bounce in a single shader pass |
| Black Hole Text | — | A Skia atlas driven by a UI-thread worklet, moving a growing number of particles on simple Kepler orbits |
| Black Hole GPU | — | Three demos of a WebGPU black-hole vortex: compute shaders move huge particle counts, snapshotting any wrapped view and swallowing it |
| Skia + WebGPU Vortex | — | Skia content drawn straight into a WebGPU canvas and swallowed by the vortex, zero-copy because both run on the same Dawn device |
Quick Start
git clone https://github.com/ImCitizen13/quattro4maggi.git
cd quattro4maggi
bun install
bun run start
Tech Stack
Structure
src/
├── app/ # Expo Router routes
│ ├── index.tsx # Home gallery
│ └── [demo-name]/ # Individual demo routes
├── components/ # Demo-specific components
│ └── [demo-name]/
├── hooks/
└── lib/
├── animations/ # Animation constants
└── shaders/ # Skia shader definitions
assets/
├── demos/ # Preview captures
└── videos/
Breakdowns
Most React Native animations look good in isolation and fall apart in a real app.
Each demo has a written breakdown covering how it works, what runs on the UI thread and why, and how to adapt the pattern to your own codebase.
Read them at quattro4maggi.com — free, no signup.
Built by Mohamed Eltohamy — open for remote contract and part-time work.
meltohamy.dev · [email protected]
License
MIT — use freely in your projects. A star or mention is appreciated!
