The mobile support files (responsive.additions.css and .js) existed but were never included in the HTML. This has now been corrected - the files are properly loaded.
- Added mobile CSS/JS includes to both index.html and main-app.html
- Removed CSS conflicts (multiple
topvalues in logo centering) - Removed JavaScript style overrides that conflicted with CSS
- Verify on real mobile devices (not just DevTools)
- Confirm desktop experience unchanged
- Check all three critical issues are resolved
See HANDOFF.md for technical details.
An immersive, cinematic web platform showcasing an architectural proposal for Prada's upcycling-focused extension at their Montevarchi Logistics Center. The project, developed at SCI-Arc under Peter Testa's vertical studio, reimagines fashion production through visible, interconnected processes housed in a contemporary insula typology.
Live Site: wordingone.github.io
Credits: Hyun Jun Han × Oskar Maly • SCI-Arc 2025
- Landing Page (
index.html): Cinematic scroll-to-reveal with Prada logo - Intro Animation: 50MB architectural flythrough video with smart autoplay
- Main Application (
main-app.html): Dual-panel interface combining 3D navigation and LiDAR exploration
- Real-time WebGL visualization of 5-floor architectural system
- GPU-instanced rendering: 2,673 architectural components
- Interactive controls: Orbit (mouse drag) + Zoom (scroll wheel)
- Model focus system: Synchronized highlighting with LiDAR hotspots
- Glass morphism UI: Premium frosted glass aesthetic throughout
- High-resolution mood board: 1920×1080 LiDAR-scanned collage
- 9 Interactive hotspots: Trigger video series on click
- Magnifying lens cursor: 3× magnification (225px on desktop, 60-80px mobile)
- Highlighting mode: Reveals interactive regions with mask overlay
- Zoom animation: 3.5× scale focusing on selected areas
- Three.js r160: WebGL rendering and 3D scene management
- ES6 Modules: Modular architecture for maintainability
- GPU Instancing: Optimized rendering for thousands of components
- Intersection Observer: Lazy loading for performance
- Container Queries: Responsive without media query dependencies
src/
├── core/viewer.js # Three.js scene initialization
├── load/loadModels.js # GLTF/GLB loader with progress tracking
├── instancing/ # GPU instancing for arch_module_smallest.glb
├── focus/modelFocus.js # Model highlighting and region mapping
├── overlay/videoOverlay.js # Video player with series navigation
├── ui/lidarBoard.js # Hotspot positioning and mask system
└── sync/controller.js # 2D/3D view synchronization
mobile/
├── responsive.additions.css # Mobile-specific styles
└── responsive.additions.js # Mobile event handlers
- Pixel ratio capping: 1.25× on mobile, 2× on desktop
- Binary GLB delivery: No LFS pointers for reliable web serving
- Video preloading: Intro animation loads during scroll sequence
- CLS prevention: Aspect-ratio boxes prevent layout shift
- Reduced motion support: Respects accessibility preferences
arch_module_smallest.glb(2.5MB): Instanced architectural frameworkmisc geometry.glb(6.1MB): Environmental detailsaltars.glb: Designer-visitor interaction platformscirculation.glb: Vertical/horizontal movement systemsIndex.glb,mirror.glb: Scanning and reflection spaces- Additional:
Distress.glb,embellishments.glb,Moulage.glb,robot.glb
- Intro:
complete animation.mp4(~50MB flythrough) - Series Collections:
- Altar Series (4 videos): Work platforms and customization
- Archive Series (7 videos): Storage and retrieval systems
- Circulation Series (2 videos): Movement through building
- Index Series (2 videos): Garment documentation
- Model Series (4 videos): Physical model presentations
- Single Features: Insula, Mirror, Red Dye stations
Each hotspot maps to specific architectural program:
- INDEX: Garment scanning and digital documentation
- MIRROR: First-floor corridor with visual continuity
- MODEL SERIES: Physical model and projection displays
- ARCHIVE INSIDE: Climate-controlled storage views
- ARCHIVE 2: Exterior glass block facade
- RED DYE: Material treatment and coloring station
- CIRCULATION: Main vertical/horizontal routes
- INSULA: Central courtyard organization
- ALTAR: Primary designer-visitor workspaces
- Glass morphism: Backdrop blur (18px) with transparency
- Color palette:
- Ink (#0B0B0F): Dark backgrounds
- Paper (#F7F7F8): Light text
- Accent (#8EA9FF): Interactive elements
- Typography: Inter font family with optical sizing
- Animations: Cubic-bezier easing for smooth transitions
- Shadow system: 4-tier z-depth for layered interface
- Desktop: Full dual-panel layout with hover interactions
- Tablet: Stacked panels with touch-optimized controls
- Mobile: Full-screen overlays, 44×44px tap targets
- Landscape: Optimized video viewing
- Modern browser with WebGL 2.0 support
- JavaScript modules (ES6) capability
- 100MB+ bandwidth for optimal video streaming
# Clone repository
git clone https://github.com/wordingone/wordingone.github.io.git
# Serve locally (requires CORS headers for modules)
python -m http.server 8000
# or
npx serve -s .
# Access at http://localhost:8000# Use ngrok for mobile device testing
ngrok http 8000
# Or use Chrome DevTools device emulation
# Settings > More tools > Device toolbar (Ctrl+Shift+M)- Chrome 90+ / Edge 90+
- Safari 15+ (macOS/iOS)
- Firefox 88+
- iOS Safari 15+
- Chrome Mobile 90+
- Firefox Mobile 88+
- Samsung Internet 14+
- WebGL 2.0
- ES6 Modules
- CSS Grid/Flexbox
- Backdrop Filter
- FCP: < 2.5s
- TTI: < 4.0s
- CLS: < 0.1
- Mobile Lighthouse: 85+
This project emerged from SCI-Arc's vertical studio investigating fashion's circular economy through architectural intervention. The brief challenged students to design spaces that make garment transformation visible, positioning upcycling as performance rather than hidden industrial process.
The insula typology—traditionally a Roman apartment block around a courtyard—is reimagined as a vertical factory where production, exhibition, and customization coexist. Glass blocks, mirrored corridors, and open "altars" ensure all processes remain visible, transforming Prada's logistics into public theater.
- LiDAR mapping: Physical models scanned to create navigable collages
- GPU instancing: Thousands of components rendered efficiently
- Hybrid media: Videos, 3D models, and 2D mapping in unified interface
- Cinema-first web: Cinematic transitions prioritized over traditional UX
- Connected mobile support files that were created but never loaded
- Removed CSS conflicts in logo centering
- Eliminated JavaScript style overrides
- Fixed z-index hierarchy issues
- P0: Verify mobile loading screen dismisses
- P0: Confirm logo centers properly on all devices
- P0: Check video overlay accessibility
- P1: Test touch interactions
- P1: Validate landscape orientation
- Heavy resource usage (~320MB total assets)
- Requires stable internet connection
- Best experienced on desktop with mouse
- Mobile magnifier reduced to 60-80px
Repository: github.com/wordingone/wordingone.github.io
Status: Desktop stable, Mobile fix applied (testing required)
Last Updated: August 13, 2025