OHZI Interactive Studio WebGL Showcase

Overview

This showcase for OHZI Interactive Studio is a high-performance WebGL-driven portfolio that demonstrates how to merge 3D environments with traditional UI elements. It is a premier reference for builders looking to implement immersive section-based navigation and sophisticated loading states in a Three.js context.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast “Dark Mode” foundation, featuring a deep black background (#000000) and neutral gray accents for progress indicators and text. This minimalist palette ensures that the focus remains entirely on the colorful, high-definition WebGL textures and video case studies.
• Typography: The system utilizes a bold, all-caps sans-serif for section titles (e.g., "OUR WORK", "WHO WE ARE") to create a cinematic feel. Titles are broken down into individual character divs (section__title-letter), suggesting a staggered animation entry pattern. Body text uses a clean, readable sans-serif for descriptions.
• Structure & Section Flow: The application is structured as a single-page immersive journey. Sections like home, who-we-are, how-we-do-it, and our-work are housed in hidden divs that are toggled via state changes, managed by a central canvas.main-canvas that renders the 3D backdrop.
• Reusable Components:
  • Progress Bar: A horizontal navigation track (progress-bar__line) that visualizes the user's journey through the story.
  • Case Study Cards: The our-work__video-group featuring dual-layered videos (standard and noise/overlay) for a glitch-texture effect.
  • Interaction Icons: Custom tap-icon and scroll-icon components that provide visual affordance for the interactive 3D environment.
• Motion Patterns: The HTML structure points to heavy use of transition classes (transition-from-section, transition-back). Interaction is driven by a "Tap and Hold" mechanism and scrolling to trigger camera movements in the 3D scene.
• Mobile Adaptation: A dedicated menu-mobile container provides a numbered list navigation (1. HOME, 2. WHO WE ARE) to replace complex desktop hover interactions, ensuring accessibility on touch devices.

Use Cases

• Who Should Clone: Creative developers, interactive agencies, or freelance artists who need a high-impact portfolio that prioritizes visual storytelling over text-heavy content.
• Remix Directions: Replace the 3D astronaut/studio assets with architectural renders for a luxury real estate site, or with high-fidelity product models for a premium hardware launch page.
• Practical Adaptation: The our-work section can be remixed as a vertical slider for any project-based portfolio. The video compression tool link indicates that high-performance video backgrounds are a core part of the UX; builders can reuse this hierarchy by substituting the our-work__video sources.
• Suggested Clone Scope: For a quick win, clone the progress-bar and scroll-icon components to add a professional polish to an existing vertical site. For a deep project, clone the entire section-state management system to build a full-screen WebGL experience.