MetaBall Animation in React Native

🚀 Overview

This project demonstrates an interactive MetaBall animation using React Native, Reanimated, and Skia. The animation features smooth physics-based motion, sticky and bouncy interactions, and visually appealing blur and gradient effects.

✨ Features

• 🌀 Smooth Metaball Effect with dynamic interactions
• 🔄 Realistic bouncing & physics-based motion
• 🎨 Glowing gradients and blur for stunning visuals
• 🎭 Touchable and draggable elements
• ⚡ Highly performant with Reanimated & Skia

🛠️ Tech Stack

• React Native
• Reanimated (for animations and physics-based effects)
• Skia (for rendering and visual effects)
• Gesture Handler (for interactive touch events)

📦 Installation

# Clone the repository
git clone https://github.com/v-kuper/Metaball.git
cd Metaball

# Install dependencies
yarn install  # or npm install

# Run the app
yarn start  # or npm start

📸 Preview

🚀 Check out the animation in action! 🎥

🏗️ Usage

Simply import the Metaball component into your React Native project:

import Metaball from './Metaball';

const App = () => {
  return <Metaball />;
};

export default App;

🎮 Controls

• Add ➝ Adds a new metaball
• Sticky Mode ➝ Snaps metaballs to the center
• Reset ➝ Resets the animation
• Moving Mode ➝ Toggles automatic movement

🎨 Customization

You can tweak the physics, color effects, and responsiveness:

• Adjust radius and speed in CircleItem.tsx
• Modify gradient colors in the SweepGradient component
• Change the blur intensity in the ColorMatrix

📝 License

This project is licensed under the MIT License.

Happy coding! 🚀