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

• Expo + Expo Router
• React Native Skia
• Reanimated 4
• React Native WebGPU + TypeGPU
• Bun

---

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!