11 aug. 2025

Willemstagram

3D klapperbord met foto's dat verhalen vertelt

Vorige week zat ik met een klant te kijken naar de nieuwe willem.com homepage, waar ik een verhaal gebruik om te vertellen over de dingen die ik doe. Deze klant is een van de beste visionaire, creatieve denkers, maar mijn tekst leek hem niet aan te spreken. Toen ik hierover nadacht, herinnerde ik me een belangrijke psychologieles van de universiteit: ik had iets anders nodig, iets niet-lineairs. Dit bericht gaat over het uitdelen van een visuele vuistslag!

Linker- versus rechterhersenhelft denken

Een van de coole dingen van mijn opleiding aan de Universiteit van Amsterdam was dat we lessen kregen van verschillende faculteiten, wat een interessante mix van interdisciplinaire wetenschap vormde. Een klassiek boek dat we bespraken was "Mintzberg on Management", waarin de auteur uitlegt waarom verschillende mensen verschillende dingen prefereren, de klassieke tweedeling die vaak wordt versimpeld tot linker- versus rechterhersenhelft denkers:

• De lineaire denker (de linkerhersenhelft): Dit is de natuurlijke staat voor mensen die een logisch verhaal waarderen dat van A naar B naar C opbouwt. Typische personen zoals dit zijn verhalenvertellers, architecten en programmeurs.
• De niet-lineaire denker (de rechterhersenhelft): Dit is de staat van mensen die geen rechte lijn volgen. Ze scannen op indrukken, sfeer en emotionele conclusies. Typische personen zoals dit zijn creatieve mensen, waaronder kunstenaars en visionaire denkers.

Mijn nieuwe willem.com homepage werkte goed voor lineaire denkers zoals ik, het op tekst gebaseerde verhaal past bij de linkerhersenhelft. Maar mijn ontwerp schoot tekort voor mensen die goed gaan op niet-lineaire, sfeervolle indrukken. Ik had iets nodig dat de vele beelden op een rijke en dynamische manier toont, levendig en met een gezonde dosis interactief plezier.

Solari Bord

Vele 'moons ago' ontmoette ik mijn vrouw op Utrecht Centraal Station, recht onder het gigantische vertrekinformatiebord. Het iconische blauwe informatiebord van 7x4,20 meter, dat ongeveer 3000 kilo woog, had klapperende mechanische panelen die een herkenbaar geluid produceerden dat je elke minuut (of zo) in de centrale hal van het station kon horen. Dit type display wordt vaak een "Solari Bord" genoemd, naar Solari di Udine, het Italiaanse bedrijf dat deze iconen produceerde. Tegenwoordig heeft het station van Utrecht digitale informatieschermen, maar als je wilt, kun je het nog steeds zien in Het Spoorwegmuseum.

Als liefhebber van metaforen (boektip: Metaphors we live by), dacht ik dat het Solari Bord, met zijn "geklapper", een mooie manier zou zijn om bezoekers van willem.com te laten "vertrekken" naar verschillende "bestemmingen" (de verhalen) op de site. In plaats van tekst koos ik er bewust voor om de foto's en visuals in de blogposts te gebruiken als toegangspoorten tot de inzichten-sectie op willem.com. Door willekeurig nieuwe bestemmingen te onthullen is dit perfect non-lineair en door het interactief te maken (klikbaar en aanraakbaar) is het meer engaging dan kale tekst. Elke bestemming opent een "ticket" dat een beetje uitlegt waar je naar kijkt. Als je het leuk vindt wat je ziet, kun je op de grote knop drukken om het verhaal direct op de positie van de afbeelding te openen, wat halverwege een blogpost kan zijn. Verhalen openen in nieuwe browservensters, zodat je kunt terugkeren naar het "station" om een nieuwe bestemming te vinden.

Implementatie: ThreeJS en een eigen image API

Eerder experimenteerde ik met de ThreeJS 3D-grafische engine om workoutgegevens te visualiseren. Het is een bibliotheek die het HTML5-standaard canvas-element gebruikt om graphics te tonen die zijn gegenereerd met behulp van 'spatial computing', een fancy manier om te zeggen dat het je in staat stelt dingen in drie dimensies (x, y, z) te tekenen in plaats van twee, vandaar de naam. Het biedt camera-, licht- en mistregelaars en is ontworpen om animaties mogelijk te maken op basis van gesimuleerde positie en rotatie. Het is cool om mee te spelen en behoorlijk capabel. Zie deze eerdere twee posts over mijn experimenten met ThreeJS:

De minimalist in mij overwoog kort om met CSS-animaties, -transformaties en -overgangen te werken. Maar ik dacht dat het realistische perspectief, waarbij de buitenste panelen meer gekanteld roteren, en de willekeur bij het selecteren van nieuwe beelden, sowieso JavaScript zouden vereisen. Om de waarde ervan te maximaliseren, wilde ik het direct op mijn homepage integreren. Maar het laden van een complete 3D-engine is niet iets om lichtzinnig over te denken. Om de effecten op de laadtijd van de homepage te minimaliseren, heb ik het zorgvuldig ontworpen om asynchroon en volledig optioneel te worden geladen (voor mensen met JS uitgeschakeld).

Om het "Visual Journal" te voeden, heb ik een eigen API ontworpen die sterk geoptimaliseerde afbeeldingen van 400x400px serveert. Elke afbeelding heeft een gelokaliseerde titel en een dieplink met een hashtag (slug) anker, wat het diep duiken in verhalen mogelijk maakt. Ik vertrouw op mijn eigen lemmid-platform voor de benodigde infrastructuur om dit voor elkaar te krijgen. Op de achtergrond genereert een geoptimaliseerde NodeJS-service de afbeeldingen met imagemagick, jpegoptim en pngquant. Je kunt de API zelf bekijken op https://willem.com/nl/images.json, die een JSON-array uitvoert zoals:

[
  {
    "url": "/en/2020-07-30_upgrading-a-27-inch-imac-5k-to-14-terabytes/i_15_An-average-fly-is-bigger-than-most-screws-inside-the-iMac_400x400px.jpg",
    "title": "An average fly is bigger than most screws inside the iMac",
    "target": "/en/2020-07-30_upgrading-a-27-inch-imac-5k-to-14-terabytes/#an-average-fly-is-bigger-than-most-screws-inside-the-imac"
  },
  {
    "url": "/en/2019-06-25_assembling-a-cargo-bike/i_11_Using-filler-plates-to-make-up-for-Chinese-Precision_400x400px.jpg",
    "title": "Using filler plates to make up for Chinese Precision",
    "target": "/en/2019-06-25_assembling-a-cargo-bike/#using-filler-plates-to-make-up-for-chinese-precision"
  },
  {
    "url": "/en/2021-01-14_abandoning-my-own-tablet-os/i_05_You-know-you-re-digital-pen-is-lacking-trust-if-you-grab-for-old-fashioned-pencil-and-paper_400x400px.jpg",
    "title": "You know you're digital pen is lacking trust if you grab for old fashioned pencil and paper...",
    "target": "/en/2021-01-14_abandoning-my-own-tablet-os/#you-know-you-re-digital-pen-is-lacking-trust-if-you-grab-for-old-fashioned-pencil-and-paper"
  },
  ...
]

Om te voorkomen dat het ding slechts een willekeurige linkgenerator is, heb ik er bewust een kleine pop-up in geplaatst wanneer je op een visual drukt of klikt. Ik gebruik de afbeeldingsbijschriften die mijn lemmid content manager bijhoudt om iets van informatie te onthullen, zodat je kunt bepalen of je het de moeite waard vindt om het verhaal te openen.

De broncode vrijgeven (AGPL)

Hoewel ik erg blij ben met hoe het Visual Journal op mijn site werkt, geloof ik sterk in delen. De kans bestaat dat jij een nog beter idee hebt voor wat Solari-geklapper. Daarom geef ik het hele ding vrij als vrije/libre software onder de GNU Affero General Public License (AGPL). Dat betekent dat je het zelf kunt gebruiken, aanpassen en verspreiden. Vind de broncode, readme en voorbeeldbestanden op https://source.willem.com/visual-journal/

Conclusie

Afgaande op hoe het de nieuwsgierigheid van mijn kinderen beetpakte, ben ik erg blij met het Visual Journal, dat ik gekscherend Willemstagram noem. Maar in tegenstelling tot Meta's Instagram, dient dit alleen beelden om mijn verhalen te vertellen en is de bron ervan libre. Je kunt het bekijken op de homepage of door op de onderstaande knop te drukken. Welke bestemming kies jij?

Willemstagram

Dit is met de hand geschreven. In een tijdperk van AI-gegenereerde tekst is dit mijn simpele manier om de menselijke moeite en gedachte achter deze woorden te tonen. Voor wie nieuwsgierig is, is het originele (Engelse) manuscript te downloaden.

Manuscript (PDF)