Maja-Ani - Interactive Animation Showcase

A comprehensive collection of 25 interactive canvas-based animations built with React, TypeScript, and modern web technologies. This project demonstrates advanced creative coding techniques including particle systems, physics simulations, 3D projections, and procedural generation.

Features

25 Unique Animation Themes

• Neural Net - Fluid particle network with mouse repulsion physics
• Matrix Rain - Classic falling code effect
• Electric Circuits - Neon circuit board pathfinding
• Star Field - 3D warp speed star field with perspective
• Orbital Waves - Sine wave grid visualization
• Hex Halo - Hexagonal grid with wave propagation
• Neon Vortex - Spiral particle vortex
• Cyber City - Isometric cityscape with wave animation
• Poly Mesh - Interactive triangular mesh grid
• Golden Flow - Flowing golden particles
• Digital Koi - Realistic koi fish simulation with multiple varieties
• Bamboo Wind - Nature-inspired animation
• Gravity Well - Physics-based gravity simulation
• Fractal Glass - Fractal pattern generation
• Polygon Flock - Boids flocking algorithm
• Hyper Tunnel - 3D kaleidoscope tunnel effect
• Neon Jellyfish - Deep sea jellyfish with tentacle physics
• Neon City Run - Synthwave parallax cityscape
• Paper Flotilla - Origami-style animation
• Magma Fissure - Volcanic particle effects
• Glacial Wind - Antarctic glacial storm simulation
• Aurora Borealis - Multilayered northern lights physics
• Solar System - Interactive orbital diagram with probe telemetry
• Starry Night - Impressionist impasto flow-field renderer
• Quantum Warp - Relativistic Schwarzschild singularity simulator

Interactive Elements

• Mouse Tracking - Most animations respond to cursor movement
• Scroll Effects - Parallax and speed variations on scroll
• Fully Responsive - Adapts to all screen sizes
• Theme Switching - Seamless transitions between 25 themes
• High Performance - Optimized rendering targeting 60 FPS

Quick Start

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/ChilliRoger/maja-ani.git

# Navigate to project directory
cd maja-ani

# Install dependencies
npm install

# Start development server
npm run dev

The application will be available at http://localhost:3000

Build for Production

# Create optimized production build
npm run build

# Preview production build
npm run preview

Technology Stack

Technology	Version	Purpose
React	19.2.1	UI Framework
TypeScript	5.8.2	Type Safety
Vite	6.2.0	Build Tool & Dev Server
Tailwind CSS	3.x	Styling Framework
Lucide React	0.556.0	Icon Library

Project Structure

maja-ani/
├── components/
│   ├── Layout Components
│   │   ├── Navbar.tsx          # Navigation bar with theme icons
│   │   ├── Hero.tsx            # Hero section with theme switcher
│   │   ├── Features.tsx        # Feature cards grid
│   │   └── Footer.tsx          # Footer with links
│   │
│   └── Animation Components (25)
│       ├── ParticleBackground.tsx
│       ├── MatrixRain.tsx
│       ├── ElectricCircuits.tsx
│       ├── StarField.tsx
│       ├── DigitalKoi.tsx
│       └── ... (20 more)
│
├── App.tsx                     # Main application & theme system
├── index.tsx                   # Application entry point
├── index.html                  # HTML template
├── vite.config.ts             # Vite configuration
├── tsconfig.json              # TypeScript configuration
└── package.json               # Project dependencies

Theme System

Each theme consists of:

type ThemeConfig = {
  id: string;              // Unique identifier
  name: string;            // Display name
  component: React.FC;     // Animation component
  colors: {
    primary: string;       // Tailwind color name
    text: string;          // Text color class
    bg: string;            // Background color class
    border: string;        // Border color class
    hover: string;         // Hover state class
    accent: string;        // Accent/shadow class
  }
}

Configuration

Vite Configuration

• Server Port: 3000
• Host: 0.0.0.0 (network accessible)
• Path Alias: @/ points to project root

TypeScript Configuration

• Target: ES2022
• Module: ESNext
• JSX: react-jsx
• Experimental Decorators: Enabled

Animation Techniques

Canvas Rendering Patterns

All animations follow consistent patterns:

1. Setup Phase

   • Canvas ref initialization
   • Resize event handlers
   • Mouse/scroll event listeners

2. Animation Loop

   • requestAnimationFrame for 60 FPS
   • State updates and physics calculations
   • Canvas rendering with trails/effects

3. Cleanup

   • Cancel animation frames
   • Remove event listeners

Performance Optimizations

• Trail effects instead of full canvas clears
• Particle count limits based on screen size
• Efficient collision detection
• Throttled resize handlers
• Minimal re-renders with React refs

📝 Code Examples

Creating a Custom Animation

import React, { useEffect, useRef } from 'react';

export const CustomAnimation: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    let w = canvas.width = window.innerWidth;
    let h = canvas.height = window.innerHeight;
    
    const animate = () => {
      // Your animation logic here
      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
      ctx.fillRect(0, 0, w, h);
      
      // Drawing code...
      
      requestAnimationFrame(animate);
    };

    animate();

    return () => {
      // Cleanup
    };
  }, []);

  return <canvas ref={canvasRef} className="fixed inset-0" />;
};

Adding a New Theme

// In App.tsx
{
  id: 'custom',
  name: 'Custom Theme',
  component: CustomAnimation,
  colors: {
    primary: 'purple',
    text: 'text-purple-500',
    bg: 'bg-purple-500',
    border: 'border-purple-500',
    hover: 'hover:bg-purple-600',
    accent: 'shadow-purple-500/50'
  }
}

Contributing

Contributions are welcome! Please follow these guidelines:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Contribution Ideas

• Add new animation themes
• Improve performance optimizations
• Add accessibility features
• Create animation presets/settings
• Add unit tests
• Improve mobile experience

License

This project is licensed under the MIT License - see the LICENSE file for details.

👤 Author

ChilliRoger

• GitHub: @ChilliRoger
• Repository: maja-ani

Browser Support

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)

Future Enhancements

• Animation export (video/GIF)
• Settings panel for customization
• Reduced motion support
• Performance monitoring dashboard
• Keyboard navigation
• Animation presets
• Share functionality
• Mobile touch gestures

Support

If you encounter any issues or have questions:

1. Check existing Issues
2. Create a new issue with detailed description
3. Include browser version and console errors

---

Copyright © 2026 ChilliRoger. All rights reserved.