Otsuka Air — Product Website Recreation Study

Independent frontend recreation and restoration study. This is an implementation exercise, not a commissioned brand project. Original design and brand assets belong to the credited reference.

My focus on Otsuka Air's /zeroz website was connecting expressive product visuals with a complete, easy-to-follow browsing journey.

I worked with the published HTML, CSS and JavaScript build, including its WebGL scenes and Barba/Alpine page lifecycle. I restored navigation across About, Science & Technology, Product and Interview, then brought all 22 interview articles together with their images, profiles and links between volumes.

A key challenge was keeping the media-rich experience consistent across pages and screen sizes. I organised 496 first-party assets locally, including product models, textures, videos and mobile variants, and added video-range support to the preview server.

I also refined practical details: visible keyboard focus, descriptive menu labels, FAQ expansion states and Escape-to-close for the mobile cube menu. I checked all 27 pages structurally, then tested representative desktop and mobile journeys, product FAQs, page transitions and model rendering.

The result is a cohesive frontend showcase combining animated product storytelling with detailed editorial content.

Original design, published animation runtime and brand assets: Otsuka Air. My work: frontend restoration, refinements and testing. Original reference: https://otsuka-air.jp/