A coffee bar in the hatch of a Civic Type R, and a website that opens the hatch

The brief

The owner pulls espresso on a La Marzocco machine set into the hatch of his 2018 Civic Type R and drives it to car meets, campouts and private events. He had one must-have: a scroll that ends with the hatch opening onto the coffee bar.

The hatch scroll

The hero is a single scroll-driven sequence. The car pulls up by a lake, turns to show its side, the hatch lifts onto the bar, and the last beat is a shot pouring into a striped cup.

• Frames, not a 3D model. No licensed 3D model of this car exists, and a rough one would look wrong to anyone who knows the car. The scroll plays a sequence of still frames instead: 148 for computers, and a separate vertical set of 80 for phones, so the car fills a phone screen properly.
• AI video made from his own photos. The owner had not been able to film the walkaround yet, so the car footage was generated with AI video tools from his real photos of the car. AI video drifts on small details, so this is a stand-in: when he films the real walkaround, it drops into the same sequence. The pour is his own footage.
• Smooth on a phone. Frames are fetched in the background and decoded off the main thread, only a small window around the current one at a time. In a throttled phone test, the stutters on the first scroll went from 21 to none.

The details

• A tachometer for a loading screen. The needle revs and the shift lights climb while the site loads, with odometer drums counting the percentage. At redline it flashes and drops away.
• A menu like a build sheet. Drinks are listed like parts on a spec sheet, and a three-gate shifter switches between hot, iced and specials. It works with the arrow keys.
• Where he is next. A countdown to the next stop and a schedule with each stop marked done, live, next or upcoming, every one linked to Google Maps.
• Book the car. An event form for car meets, campouts, weddings and office pop-ups, with the details he needs to quote: date, place and headcount.
• The build. Tap points on a photo of the real hatch name the machine, the grinder and the butcher-block counter.

Why it matters for your business

If your business has one thing people stop and film, your website should open with it. For DDD that thing is the hatch opening. The car had no usable 3D model, so we found another way to put it on screen and said plainly how it was made.

DDD Coffee’s name, logo and photos belong to the owner. The car walkaround in the hero is AI-generated from his photos.