Interactive Product Showcase

• Live experience: https://product.ntdesweb.dev/
• Explore more NTDESWEB experiments: https://fx.ntdesweb.dev/

A cinematic product-presentation system expressed through HALO/02, a clearly labeled speculative modern over-ear spatial-audio object. The showcase demonstrates responsive lighting, exploded anatomy, internal view, hotspots, zoom, free rotation and live material changes without turning into an e-commerce landing page.

Experience design

• Procedural over-ear object with rounded aluminum cups, suspended canopy, telescoping arms and layered acoustic internals, built entirely from Three.js geometry.
• Six scroll-directed scenes with reversible assembly and camera choreography.
• Pointer-reactive product weight and independent studio-light response.
• Exploded view across shell, cushions, drivers, diaphragms and control cores.
• Translucent internal mode with technical hotspots.
• Four live material finishes and an optional free-view drag mode.

Captures

Unified object	Internal architecture

Technology

• Semantic HTML5
• Modern CSS with responsive art direction
• Vanilla JavaScript
• Three.js 0.160.0
• WebGL, procedural geometry, ray-independent hotspots and IntersectionObserver

Run locally

No build step is required.

python -m http.server 8080

Open http://localhost:8080.

Deploy

This is a static project. For Cloudflare Pages:

1. Import NachoTorresRD/interactive-product-showcase.
2. Framework preset: None.
3. Build command: leave empty.
4. Output directory: /.
5. Attach the custom domain product.ntdesweb.dev.

The included _headers, robots.txt and sitemap.xml are ready for the production domain.

Accessibility and performance

• Keyboard-operable finish, hotspot, zoom and view controls.
• Visible focus treatment and live-region interaction feedback.
• prefers-reduced-motion support and immediate narrative interpolation.
• Reduced mobile pixel density and disabled expensive shadows on coarse pointers.
• The full product story remains readable if WebGL is unavailable.

License

MIT © 2026 Nacho Torres.