Clox Odyssey

A native Expo module that renders stunning 3D particle animations for iOS and Android. The particles dynamically form shapes based on user input, with a default spherical wave animation.

Features

• 🌀 3D Particle System - High-performance particle rendering using native graphics APIs
• 🔮 Dynamic Shape Morphing - Particles can form various shapes (sphere, cube, torus, etc.)
• 🎨 Customizable Appearance - Control particle colors, sizes, and animation parameters
• ⚡ Native Performance - Built with Metal (iOS) and OpenGL/Vulkan (Android) for smooth 60fps animations
• 📱 Cross-Platform - Consistent experience on both iOS and Android

Installation

yarn add clox-odyssey

For bare React Native projects, you must ensure that you have installed and configured the expo package before continuing.

Usage

import { CloxOdysseyView } from 'clox-odyssey';

export default function App() {
  return (
    <CloxOdysseyView
      style={{ flex: 1 }}
      shape="sphere"
      particleCount={1000}
      particleColor="#00FFFF"
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | shape | 'sphere' \| 'cube' \| 'torus' \| 'wave' | 'sphere' | The shape particles will form | | particleCount | number | 1000 | Number of particles to render | | particleColor | string | '#FFFFFF' | Color of the particles (hex) | | particleSize | number | 2 | Size of individual particles | | animationSpeed | number | 1.0 | Speed multiplier for animations | | autoRotate | boolean | true | Whether the shape auto-rotates |

Development

To run the example app:

# Install dependencies
yarn

# Build TypeScript
yarn build

# Run example app
cd example
yarn ios
# or
yarn android

License

MIT