Ringly lets you customize stunning 3D rings in real-time! Adjust stone colors, and view your design from every angle — all inside an interactive 3D WebGL experience powered by React Three Fiber.
| Feature | Description |
|---|---|
| 🎨 Ring Customization | Change colors and gemstone styles instantly |
| 🌀 Smooth 3D Controls | Rotate, zoom & pan with intuitive mouse/touch controls |
| 💡 Dynamic Lighting | Realistic reflections & environment presets |
| 💎 High-quality Rendering | Powered by WebGL + R3F for a premium look |
| 🖥️ Responsive UI | Works across desktop and mobile devices |
| Tech | Purpose |
|---|---|
| ⚛️ React.js | UI development |
| 🎮 React Three Fiber (R3F) | 3D rendering in React |
| 🧩 React Three Drei | Useful helpers & components for R3F |
| 🎚️ Leva | Interactive UI controls for real-time customization |
To run Ringly locally, follow these steps:
-
Clone the repository:
git clone https://github.com/KrishBharadwaj5678/Ringly.git cd Ringly -
Install dependencies
npm install
-
Run development server
npm run dev
Want to contribute? Here's how:
- 🍴 Fork the repository.
- 🌿 Create a new branch (
git checkout -b feature-name). - ✍️ Make your changes and commit them (
git commit -am 'Add feature-name'). - 🚀 Push to your branch (
git push origin feature-name). - 🔄 Submit a pull request to merge into the main branch.