Shop

Porsche 911

Interactive 3D Demo

🚗 Interactive 3D Porsche 911 Viewer
Built with Three.js, GSAP, and WebGL. A production-ready template designed to bring any product to life in the browser — just replace the Porsche model, tweak colors, and embed it seamlessly into your website. No build tools required.

Why You'll Love This Project

• ✅ Plug-and-Play: Works instantly as a static site — no npm, Node, or setup needed.
• ✅ Easy Customization: Swap the GLB model, edit colors, or adjust the UI in minutes.
• ✅ Cinematic Experience: Smooth intro animation, demo loop, and interactive hotspots with images & text.
• ✅ Optimized Performance: DRACO/KTX2 compression, HDRI lighting, and adaptive pixel ratio for buttery-smooth 4K rendering.
• ✅ Responsive: Fully optimized for both desktop and mobile devices.
• ✅ Documentation Included: Quick setup and customization guide.

What You Get

• 📦 Complete source code (HTML, CSS, JS — scene, loaders, animations, UI).
• 🧩 Example assets (hotspots, paint colors, HDRI, audio) ready to replace.
• 🗎 Quick guide: swap models, adjust colors, and fine-tune camera animations.

⚙️ Tech Stack: Three.js · GSAP · WebGL • Controls: Intro / Demo / Color / Mute / Hotspots
• Use Cases: Product viewers, marketing showcases, interactive landing pages

ModernStillness

Interactive 3D Environment

🌿 ModernStillness — Interactive 3D Environment
A cinematic and relaxing real-time scene built with Three.js, GSAP, and WebGL. Designed as a fully interactive 3D experience inspired by Scandinavian outdoor design and Tommre’s modular furniture concept — optimized for performance and ready to expand into any product showcase.

Why You'll Love This Project

• ✅ Cinematic Environment: Smooth intro video, ambient sound, and dynamic lighting for immersive mood.
• ✅ Optimized Loading: Unified LoadingManager for GLB, textures, and HDRI — with start button and video preloading.
• ✅ Realistic Details: Baked lighting, animated leaves, dust particles, and fire video with alpha glow.
• ✅ Responsive UI: Dynamic popups, info panels, and adaptive layout for desktop & mobile.
• ✅ Performance-Driven: DRACO + KTX2 compression and adaptive pixel ratio.
• ✅ Extendable: Easily add new models, hotspots, or UI elements.

What You Get

• 📦 Complete source code (HTML, CSS, JS — environment, loaders, audio, UI).
• 🌄 Example assets (baked textures, HDRI, leaves, fire video, sounds).
• 🗎 Quick guide: replace assets, tweak lighting, and control animations.

⚙️ Tech Stack: Three.js · GSAP · WebGL • Modules: Loader / UI / Fire / Leaves / Dust / Performance Manager
• Use Cases: Product scenes, brand mood environments, architectural demos

CarJsShowcase

3D Interactive Template (Three.js)

🚘 CarJsShowcase — 3D Interactive Template
A professional, cinematic WebGL project built with Three.js and GSAP. Originally created as a realistic car viewer, it’s now a universal 3D presentation template — optimized, animated, and fully customizable for any product or brand showcase.

Why You'll Love This Project

• ✅ Cinematic Presentation: Smooth camera transitions, intro flash, and ambient sound.
• ✅ Interactive Controls: Change colors, toggle doors or parts, and switch camera views seamlessly.
• ✅ Auto Demo Mode: Built-in looped camera animation with “Skip >>” button.
• ✅ Performance Manager: Adaptive pixel ratio system for 60 FPS stability on all devices.
• ✅ HDR Reflections: Real-time SSRPass with adjustable quality for realistic lighting.
• ✅ Clean & Modular: All code structured with #region markers for clarity.

What You Get

• 📦 Complete source code (HTML, CSS, JS — materials, animation, UI, performance).
• 🚗 Example car model, HDR environment, textures, and sound assets.
• 🗎 Quick guide for setup, customization, and adding your own models or assets.

⚙️ Tech Stack: Three.js · GSAP · WebGL • Modules: SSR / Animation / Materials / Performance Manager / UI / Audio
• Use Cases: Product configurators, automotive demos, portfolio scenes, real-time brand showcases