How this site was built
The floor plan
The Bullpen follows the April 2008 set blueprints drawn by production designer Jeff Beck and shared by OfficeTally. Reception, Michael's office, the conference room, the kitchen, the break room and the annex all sit where they did on the soundstage. The warehouse was downstairs, so it's a stairwell here.
The art
The scene is AI-generated from a detailed layout prompt with the blueprint as reference, then edited and upscaled 4× with Upscayl. The night version was generated from the day version so every pixel lines up, which is why switching the lights is a simple crossfade. The two source files are 70MB together; the build script turns the day scene into a 68KB AVIF and cuts a sharp close-up of each room for the page banners.
The clickable rooms
Each room is an SVG polygon laid over the image in the same coordinate space, so they scale together. Hovering cuts a spotlight out of a dark mask, and clicking pushes the camera in on the room before navigating to a page that opens on the same room. Every room is keyboard reachable, and on phones the floor becomes a building directory.
HR mode
Every page renders both versions, and a data attribute set before first paint decides which one shows. So the plain version is instant, has no flash, and needs no JavaScript to look right.
Shipping manifestStack
- Box 01 · Framework
- Next.js 16 (App Router), React 19, TypeScript, fully static
- Box 02 · Styling
- Tailwind CSS 4 with custom variants for dark mode and HR mode
- Box 03 · Motion
- Motion for the camera push-in, CSS keyframes for the handheld drift
- Box 04 · Sound
- Office sound effects synthesized live with the Web Audio API; beats are plain audio files picked up at build time
- Box 05 · Search
- cmdk for Ask Dwight (⌘K / Ctrl+K)
- Box 06 · Content
- Typed content files plus MDX for case studies
- Box 07 · Images
- sharp build script: AVIF and WebP scene sizes, room close-ups, share image