3D Light Mode Product Gallery with Video Projection and Filters
Build a light mode 3D product gallery with editorial aesthetic: off-white background, soft shadows, and sans-serif typography with light tracking. Rows of minimal white matte pedestal showcases with light marble base. Each showcase holds a 3D product and an integrated screen that plays a promo video. Proximity detection triggers lighting animation and video fade-in. Filters reorder showcases with GSAP easing and stagger. **Deliverables:** index.html, styles.css, gallery3d.js, assets/ folder with GLB models, promos, HDRI, WebP thumbnails. **Stack:** Three.js, video textures, PBR materials, GSAP, LazySizes for images. **Description:** A light mode editorial 3D gallery. Proximity (Euclidean distance) activates video playback with lighting response. Videos as 3D textures + HTML overlay. Filters reorder showcases with GSAP stagger. Product rotation with inertia. Double-tap for macro view with simulated DOF. Technical sheet modal with extended video, specs, color variants, "Request sample" button. **Performance:** PBR textures 512-1024px, WebP thumbnails, on-demand video loading, video cache with 30s inactivity release. **Accessibility & fallback:** HTML panel with native video controls, SRT subtitles, aria-describedby on cards, prefers-reduced-motion. 2D fallback thumbnail gallery with player.
