A collection of animated React Native components built with Reanimated & Skia
⭐ Star this repo to stay updated with new animated components!
| ✨ Component | 💡 Description |
|---|---|
| 🎠 ParallaxCarousel | Scales and parallax-shifts cards based on position |
| 🎭 RevealMask | Circular mask that reveals content under user touch |
| 🌊 RippleCover | Adds water-like ripple distortion on interaction |
| 🎬 WaveFade | Diagonal fade/reveal animation for entry and exit transitions |
| Drag-to-reveal interactions with spring animations and velocity-based gestures | |
| 🔄 PullRefresh | Custom animated pull-to-refresh component with gesture tracking |
| 📚 StackCarousel | Stack-style carousel with infinite scrolling and snapping animations |
| 📖 ScrollStoryboard | Scroll-driven, direction-aware entry/exit animations with progress-based hooks |
| 🔍 ZoomCover | Pinch-to-zoom and pan gestures with configurable movement and scale boundaries |
| 🫗 LiquidPopup | Smooth liquid morphing animations between button and panel |
| 🍎 ThermalApple | Interactive thermal imaging effect with heat trails and flowing border animations |
| 🎞️ CardReel | Vertically scrollable card reel with dynamic scaling and opacity animations |
| 🔪 ParallaxSlices | Transforms children with automatic content segmentation for parallax effect |
| 👆 ActionSlider | Swipe-to-confirm slider with snap-back animations and progress tracking |
| ✍️ WaveText | Cascading color wave animation across individual text characters |
Each component is self-contained and ready to copy into your project. Simply:
- Copy the component file
- Install any required dependencies
- Import and use in your app
Most components require:
react-native-reanimated3.0+- Some components may use
@shopify/react-native-skia,react-native-gesture-handler
Specific requirements are listed in each component's README.
Found a bug, a problem or want to optimize or add a component? Feel free to open an issue or submit a pull request.
These components are built as experiments and reference implementations. They may not be fully production-ready out of the box and could require adjustments for your specific use cases. Think of them as solid starting points, you can enhance performance, add features, or adapt the styling and behavior to fit your app’s needs.
MIT License