Frozen ❄️

A React Three Fiber project that creates immersive ice/frost visual effects when wrapping content with the <Frozen> component. This project transforms any 3D scene into a frozen winter wonderland with realistic ice textures, frost effects, and interactive touch-based audio feedback.

🚀 Usage

Basic usage:

<Frozen>
   <MainScene />
</Frozen>

🛠️ Technical Stack

• React Three Fiber: 3D rendering framework
• Three.js: WebGL 3D library
• TypeScript: Type-safe development
• Zustand: State management
• GSAP: Animation library
• Vite: Build tool and dev server

🎨 Visual Effects

The frost effect is achieved through multiple rendering passes:

1. Scene Rendering: Base scene content
2. Blur Effects: Multi-pass blur for depth
3. Frost Overlay: Ice crystal textures and normal maps
4. Noise Generation: Procedural frost patterns
5. Interactive Pointer: Touch-responsive frost spreading
6. Final Composition: Combined output with lighting effects

🚀 Getting Started

1. Install dependencies:

   npm install

2. Start development server:

   npm run dev

3. Build for production:

   npm run build

📁 Project Structure

src/
├── Frozen/              # Core frost effect system
│   ├── components/      # UI components
│   ├── hooks/          # Custom React hooks
│   ├── materials/      # Shader materials
│   └── utils/          # Utility functions
├── MainScene/          # Example scene implementation
└── UI/                 # User interface components

🔧 Customization

The frost effect can be customized through various parameters:

• Frost intensity and spread patterns
• Ice crystal textures and normal maps
• Interactive response sensitivity
• Visual blur and distortion levels

Experience the magic of interactive frost effects in your browser! ❄️✨