Fullstack developer, Umain
2023 - Now
Umain is a digital consulting firm who works with a range of brands, everything from mcDonalds, Scania and biamp. Umain offers both web and digital services
Clients: Scania, Poc Sports
Scania Experience Center
2025-2026
An interactive museum platform with 3D installations synced across touchscreens and wall displays in real time.
4 installations · 2 languages · 1920px → 6835px+ displays · runs unattended, all day
The problem
One experience, many screens, real time. A visitor touches the table; the wall reacts, and they can't drift apart.
Content changes often, in two languages, edited by curators not engineers. Installations run unattended all day and must recover on their own when a visitor walks off or a screen idles.
Four installations
Globe: interactive 3D globe (R3F) with multiple themes plus a story mode that plays a film on the wall while the table drives it.
Timeline: auto slideshow of Scania's history with openable milestones; a separate build for rooms past 6835px.
Quiz: scored multiple choice with live feedback.
Remote: a phone that lets staff drive playback and reset any installation from the floor.
The part I'm proudest of: sync
Table and wall never talk directly. They share a few realm variables over a WebSocket (PIXILAB Blocks). One screen publishes, the rest react.
Hardest piece: story-mode video. Lockstep playback meant time-stamped play/pause/seek commands, position/duration reporting, and handling players that aren't ready or films that have ended.
To build it without a museum on my desk, I made a localStorage fallback so two browser tabs behave like the real table and wall.
Curators own the content
Everything visitors see comes from Sanity: pages, globe content, quiz questions, Swedish translations, no code required. Next.js fetches and caches it.
Around it: an idle reset timer, a broadcast refresh trigger, an access whitelist, per-installation Plausible analytics, and layouts from 1920px to ultrawide.
How it's built
Next.js 14 (App Router) · Three.js / R3F · GSAP + Lottie · Redux Toolkit · Tailwind + Styled Components · Sanity.
The rule that kept it sane: local state → Redux. Shared-across-displays state → realm variables only. Always one home for every piece of state.
What I'd do differently
Write the realm-variable contract down sooner. Once a remote and several installations depend on the same variables, the names and defaults are an API, so treat them like one.
Photography and video by Ludwig Mattsson.