VFX Project (Zone Expansion Visuals)

✨ Features

• Immersive Domain Expansion: A massive, procedurally generated barrier effect with "Void" and "Malevolent Shrine" aesthetics.
• Dynamic Particle Systems: "Cursed Energy" effects using custom GLSL shaders for shockwaves and energy flow.
• Interactive Modes: Switch between character themes:
  • MODE: CYAN
  • MODE: RED
  • MODE: WHITE
• Cinematic Start: Begins with a dramatic high-angle view.
• Post-Processing: Bloom, Chromatic Aberration, and Impact Frames for anime-style impact.

🛠️ Tech Stack

• Framework: React + Vite
• 3D Engine: Three.js
• 3D Abstractions: React Three Fiber & Drei
• Styling: Tailwind CSS
• State Management: Zustand

🚀 Getting Started

Follow these steps to run the project locally.

Prerequisites

• Node.js (v16 or higher recommended)
• npm (usually comes with Node.js)

Installation

1. Clone the repository:

   git clone https://github.com/eter5nityforce-oss/Ryoiki-Tenkai.git

2. Install dependencies:

   npm install

Running Locally

Start the development server:

npm run dev

Open your browser and navigate to the URL shown in the terminal (usually http://localhost:5173).

🎮 Controls

• Mouse Drag: Rotate the camera view.
• Mouse Wheel: Zoom in/out.
• UI Buttons:
  • Click MODE: CYAN / RED / WHITE to switch between domain aesthetics.

📂 Project Structure

src/
├── components/
│   ├── ui/             # UI Overlay components
│   └── vfx/            # 3D Visual Effects components
│       ├── CursedEnergy.tsx    # Particle ring shockwaves (Shader)
│       ├── DomainBarrier.tsx   # The main domain sphere (Shader)
│       ├── DomainExpansion.tsx # Post-processing (Bloom, etc.)
│       └── FloatingDebris.tsx  # Floating geometric objects
├── Scene.tsx           # Main 3D scene composition
├── store.ts            # Global state (Zustand)
└── App.tsx             # Entry point & Canvas setup

📝 License

This project is for educational and fan purposes.

---