Three Shaders Collection

Explore interactive WebGL shaders built with Three.js and React. This project features three unique experiences:

1. Axel Rings Interactive concentric rings that respond to mouse movement, allowing you to control speed, spacing, and color transitions.

2. Sunset Raymarch A dynamic sunset scene over the sea, where the sun position, lighting, and wave effects can be controlled with the mouse.

3. Infinite Gallery An infinite image scroll gallery powered by shaders, with smooth transitions, blur effects, and live interactions.

4. Clocks A collection of interactive clocks featuring digital time displays, a stopwatch, and a Pomodoro timer with smooth animations and intuitive controls.

5. Camera Gesture Draw A gesture-controlled drawing experience that lets you create artwork in the air using hand tracking, with gesture-based color switching and canvas clearing.

---

Live Demo

Check out the live version: Three Shaders Collection

---

Technologies Used

• Three.js – 3D WebGL rendering
• React – UI and state management
• React Three Fiber – Integrating Three.js with React
• Shaders – Custom GLSL shaders for effects

---

Getting Started

1. Clone the repo:

git clone git@github.com:mudgalz/threejs-motion.git