The Problem

Labo’s old website was a WordPress template. It was slow despite being simple, and it showed their scenographic work as flat image galleries.

For a studio that builds immersive physical spaces, that wasn’t good enough.

They needed a site that:

• Shows their work in video, not just photos
• Loads fast
• Lets the team update content without calling a developer

Design

The client knew he wanted to keep the dark vibe of the old site but needed a more modern look — one that actually showed off the portfolio projects properly instead of burying them in flat galleries. I designed the whole thing from scratch: the video grid concept, typography, layout — all built around making their work the centerpiece. Approved before any code was written.

Approach

Video as the main medium. Scenography is spatial and temporal — photos don’t do it justice. The homepage is built around a 3x3 video grid where every cell plays on load. Hover a project and the grid responds — the row expands, neighbors scale down, opacity shifts create depth.

Hygraph instead of WordPress. Standalone CMS that just serves data via API. The client gets a clean editor for projects, team members, videos. Each page only requests the data it actually needs — the grid doesn’t download full descriptions, the navbar only pulls titles.

Smart video loading. 9 videos on one page could easily kill performance. Videos only download their first frame on page load — the full file streams when playback starts. All muted by default, which is also what lets browsers allow autoplay without user interaction. Result: 95%+ PageSpeed scores despite all that video content.

Next.js 15 on Vercel. Server-side rendering for fast initial loads, client-side interactivity only where needed (grid, carousel, animations). Vercel handles hosting, scaling, and preview deployments on every push.

Built to not break. If the CMS goes down, the site falls back to built-in placeholder data. Visitors always see a working website, never an error page.

Challenges

The grid interaction. Making 9 cells react to hover in a way that feels natural, not mechanical. Each cell responds differently based on its distance from the hovered one — adjacent, diagonal, same row. Corner cells scale from their corner, center from center. Took a lot of tuning to get the timing right.

Cross-browser video autoplay. Every browser has different rules for when autoplay is allowed. The combination of muted + metadata-only preload + inline playback mode covers all major browsers including iOS Safari. On mobile, only the visible slide plays.

Mobile isn’t a scaled-down desktop. The video grid becomes a swipe carousel. The team tabs become a dropdown. The process timeline becomes an auto-scrolling card strip. These are separate components, not responsive CSS hiding things.