quattro4maggi

A collection of React Native animation experiments built with Skia and Reanimated.

🌐 quattro4maggi.com · 𝕏 @m090009

---

Demos

Demo	Preview	Description
Scale Flip Card		Animated card with 3D flip and portal expansion
Text Flyin		Kinetic text animation with staggered character fly-in

---

Quick Start

# Clone
git clone https://github.com/m090009/quattro4maggi.git
cd quattro4maggi

# Install
bun install

# Run
bun run start

---

Tech Stack

• Expo + Expo Router
• React Native Skia
• Reanimated

---

Structure

src/
├── app/                    # Expo Router routes
│   ├── index.tsx           # Home gallery
│   ├── bouncy-scale-ball/  # Bouncy ball with scale animation
│   ├── final-ripple/       # Polished ripple effect
│   ├── ripple-shader/      # Custom Skia ripple shader
│   ├── scale-flip-card/    # 3D flip card with portal
│   ├── shader-wrapper/     # Reusable shader wrapper
│   ├── shared-element/     # Shared element transitions
│   └── text-flyin/         # Kinetic text animation
├── components/             # Demo-specific components
│   └── [demo-name]/
├── hooks/
└── lib/
    ├── animations/         # Animation constants
    └── shaders/            # Skia shader definitions

---

License

MIT – feel free to use in your projects. A ⭐ or mention is appreciated!