Recruitment Office — een kantoorsimulatie in pixelart

2026

Een isometrische kantoorsimulatie: twintig mensen bellen, typen, overleggen en luiden de bel bij een plaatsing. TypeScript, Canvas en Web Audio.

Recruitment Office is een recruitmentbureau dat je schuin van boven bekijkt, met de voorste muren weggehaald zoals bij een poppenhuis. Er zijn drie ruimtes: de open kantoorvloer met de recruiters, de backoffice met IT en administratie, en de directiekamer. Op de vloer staan ook een keuken, een loungehoek, een belcel, een receptie en een printer. Je speelt niets; je kijkt hoe twintig mensen hun werkdag doorbrengen.

De twintig zijn twee directeuren, een teamleider, tien recruiters, een officemanager, vier IT'ers en twee mensen op de backoffice. De namen zijn verzonnen. Iedereen is een klein 3D-model van ongeveer 39 blokjes hoog. De modellen worden in de browser getekend als pixelart in acht richtingen, met eigen haar, gezicht en kleding, en sommigen met een bril, headset of badge. Lopen, zitten, typen, bellen, praten, drinken en juichen zijn houdingen van hetzelfde model. Bureaus met beeldschermen, telefoons en mokken, planten, de boekenkast en de muren met ramen zijn op dezelfde manier gemaakt.

Eén seconde is een minuut op de kantoorklok, en de week loopt van maandag tot vrijdag. De meesten komen tussen kwart over acht en tien over negen binnen en zeggen goedemorgen; de officemanager en de directeuren zijn er eerder. Om kwart over negen staat het recruitmentteam in een kring voor de standup en heeft IT er een bij de eigen bureaus. Om half een gaat iedereen lunchen: aan de hoge tafel in de keuken, op de bank, aan het eigen bureau of even naar buiten. Om twee uur overlegt de teamleider met de directeur aan de ronde tafel, en vrijdag om half vijf is er een borrel. Tussen vijf en half zeven gaat iedereen naar huis; de nacht gaat snel voorbij.

Daartussen kiest ieder zelf wat hij doet, op basis van zijn rol en hoe sociaal hij is. Recruiters bellen aan hun bureau, lopend bij het raam of in de belcel. Mensen halen koffie of water, printen, maken een praatje aan iemands bureau, en de helpdesk komt langs om een computer te repareren. De directeuren lopen over de vloer. Na een gesprek met een kandidaat kan een plaatsing volgen: de recruiter roept het, loopt naar de koperen bel aan de muur en luidt hem. Er vliegt confetti en de collega's juichen. Het paneel telt de plaatsingen van de week.

Wat mensen zeggen staat in tekstballonnen, in het Nederlands of het Engels: ruim 120 losse zinnen en 22 korte gesprekken, deels met grappen. Telefoongesprekken staan in een blauwe ballon. Wie praat, is te horen als een gebrabbel op zijn eigen toonhoogte: lettergrepen door twee klinkerfilters, en aan de telefoon dunner. Op de achtergrond speelt de kantoorradio een eigen jazzstuk in F groot met de vorm AABA in 32 maten, met elektrische piano, een lopende contrabas, brushes en een vibrafoon die zijn melodie bij elke herhaling opnieuw uit de akkoorden maakt. Ook de telefoons, de bel, het applaus, de koffiemachine, de printer, de deurbel en het typen zijn hoorbaar. Alles wordt live gemaakt met de Web Audio API; er zitten geen geluidsbestanden in.

Het licht volgt de klok. In de ramen staan lucht, wolken en de huizen aan de overkant. Zonvlekken schuiven over de vloer, laat op de middag wordt het licht warm en 's nachts is het donker en gloeien alleen de schermen. De wandklok wijst de tijd van de simulatie aan.

Je kunt het beeld verslepen en in- en uitzoomen, ook op een telefoon. Wijs je iemand aan, dan zie je zijn naam, functie en wat hij doet. De simulatie kan pauzeren en op drie of tien keer de snelheid lopen. Er wordt niet met een game-engine gewerkt: het is TypeScript op een Canvas 2D, ongeveer 44 kB gzip. Looproutes worden gezocht met A* over een raster van 4 bij 4. Unit-tests in Vitest controleren onder meer dat iedere stoel en elke plek bereikbaar is en dat een hele werkdag verloopt zonder dat iemand vastloopt. End-to-end-tests draaien in Chromium, Firefox en WebKit.

Technologieën

TypeScript Canvas 2D Web Audio API Vite Vitest Playwright

Meer van mijn werk

Bekijk het hele portfolio of lees het blog.

Meer werk