Skip to content

Latest commit

 

History

History
70 lines (51 loc) · 2.38 KB

README.md

File metadata and controls

70 lines (51 loc) · 2.38 KB

quattro4maggi

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

🌐 quattro4maggi.com · 𝕏 @m090009

Demos

Demo Preview Description
Scale Flip Card scale-flip-card Card component that expands into a fullscreen portal with 3D flip animation
Text Flyin text-flyin Kinetic text animation with staggered character fly-in effect
Liquid Metal liquid-metal Skia shader component with animated liquid metal effects and customizable colors
Live Border Card live-border-card Animated glowing borders with rotating color gradients and customizable glow effects

Quick Start

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

# Install
bun install

# Run
bun run start

Tech Stack

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
│   └── text-vertical-move/ # Text vertical move experiment
├── 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!