This project involved creating a unique, interactive 3D book experience using Three.js and React Three Fiber. The main highlight was the realistic sliding animation and the personalized engraving of my name on both the front and back covers. It pushed me creatively and technically, forcing me to explore 3D concepts and animation workflows. The result was a smooth, immersive experience with clean UI and a touch of personality. This was a big leap from traditional 2D interfaces, reflecting my commitment to exploring new technologies and constantly leveling up as a developer through real-world challenges.

Tech Stack

• Three.js
• React.js
• R3F
• Tailwind CSS

Key Features

• Built a fully interactive 3D book using Three.js and React Three Fiber framework.
• Engraved my name onto the front and back covers for a personal touch.
• Styled clean and responsive UI using Tailwind CSS with a modern layout approach.
• Achieved smooth and realistic 3D page slider transitions for immersive user interaction.

My Role

I designed and developed the front-end of this project from scratch. I handled layout structure, animation logic, component integration, and responsive design. I also worked with designers to translate wireframes into pixel-perfect UI.

Challenges & Solutions

This was my first time working with 3D and React Three Fiber. Understanding camera angles, lighting, and mesh interactions was difficult at first. I spent hours watching tutorials and debugging Three.js quirks. It was challenging but incredibly rewarding to turn a 3D concept into something smooth, personalized, and fully interactive.