Negentien keuzes, vier lagen, en de afweging die elke keuze meebrengt. Kies een laag om de weergave te versmallen, open een techniek om te lezen waarom die er is en wat die kost.
01Lagen
Selecteer een laag om te filteren en open daarna een techniek voor de redenering erachter.
Alle lagen tegelijk — de volledige opbouw, van boven naar beneden.
02Technieken
18 van 18 getoond
next 16.2.10
Het raamwerk: App Router, servercomponenten, één build, één deploy.
Gedeeld met Equilibrium
react 19.2.4react-dom 19.2.4
De UI-runtime — servercomponenten voor de schil, clientcomponenten voor alles waar een hand aan zit.
Gedeeld met Equilibrium
tailwindcss ^4
Het ontwerpsysteem: vijf paletten uit één set semantische tokens.
Gedeeld met Equilibrium
framer-motion ^12.42.2
Elke animatie op de site, van de onthulling van de koppen tot de kaarten die op deze pagina opengaan.
Gedeeld met Equilibrium
lenis ^1.3.25
Vloeiend scrollen — de traagheid onder elke pagina.
Gedeeld met Equilibrium
three ^0.185.1@react-three/fiber ^9.6.1
Het 3D-terrein, geschreven als React-componenten in plaats van imperatieve scènecode.
Gedeeld met Equilibrium
next-themes ^0.4.6
Paletwissels — Paper, Weide, Bos, Nacht en Nocturne — als een klasse op het document.
Alleen deze site
lucide-react ^1.23.0
De iconenset: pijlen, chevrons en statusmarkeringen.
Alleen deze site
clsx ^2.1.1tailwind-merge ^3.6.0
Voorwaardelijke klassenamen, waarbij latere utilities eerdere terecht verslaan.
Alleen deze site
Platform
Hosting, CDN en deploys. Een push naar de main-branch is een productierelease.
Gedeeld met Equilibrium
@vercel/blob ^2.6.1
De private opslag met het gepubliceerde contentdocument en de geüploade foto's van de studio.
Gedeeld met Equilibrium
Zelf gebouwd
Bewerken op de live site: inloggen, op elke zin klikken, hem in beide talen herschrijven, publiceren.
Alleen deze site
next-auth ^4.24.14
De Google-login die de editor bewaakt — een toegangslijst van precies één adres.
Alleen deze site
typescript ^5
De taal waarin alles geschreven is — ook de vorm van het contentdocument.
Gedeeld met Equilibrium
eslint ^9eslint-config-next 16.2.10
De lintpoort, die vóór elke pull request de eigen regelset van het framework draait.
Alleen deze site
@tailwindcss/postcss ^4
De enige buildstap tussen het stijlblad en de browser.
Types voor de bibliotheken die er zelf geen meeleveren.
Gedeeld met Equilibrium
Scripts in de repository
Node-scripts die een headless browser aansturen: taalweergave, 3D-mounten, prestatiemetingen.
Alleen deze site
De versienummers op deze pagina worden bij het bouwen uit de package.json van de repository gelezen, zodat ze niet kunnen afwijken van wat er werkelijk geïnstalleerd is.
03Uitgangspunten
De regels onder de lijst
01Eén animatiebibliotheek. Nooit een tweede ernaast.
02Kleuren heten naar hun rol, nooit naar een hexcode — zo komen er vijf paletten uit één set componenten.
03Elke animatie heeft een stille versie. Reduced motion is een volwaardige manier om deze site te lezen, geen uitgeklede.
04Elk bedieningselement draagt een zichtbaar woord. Niets hier is een icoon dat je moet ontcijferen.
05Beide talen zijn echte adressen, geen schakelaar in de browser — Nederlandse pagina's zijn vindbaar, deelbaar en indexeerbaar.
06Er wordt niets samengevoegd voordat de typecontrole, de linter en de productiebuild alle drie zwijgen.
Hetzelfde manifest wordt byte-identiek bijgehouden in de Equilibrium-repository, zodat beide sites tegen elkaar te controleren zijn. Convergentie is het plan; het versieverschil is het werk.
11/18 hiervan draaien ook op Equilibrium
04Evolutie
Hoe deze site gemaakt is, bewaard in plaats van onthouden.
Alles hierboven is waar dit van gemaakt is. Wat volgt is hoe het zover kwam — de vragen, de beslissingen en de dingen die teruggedraaid moesten worden.
13/13 mijlpalen · 96 stappen
Fundament
Vakwerk
Handel
2026 · 08 · 27/Onderzoek/Loopt nu/PR #87
Deze tijdlijn
Het verslag van hoe de site hier kwam, gekoppeld aan het verslag van waar hij van gemaakt is.
Context
De dagverslagen in docs/log/ bevatten de redenering achter vrijwel elke beslissing op deze site, en geen bezoeker kon ze ooit zien. De techniekpagina beantwoordt wát; niets beantwoordde hoe of waarom.
Uitvoering
Een intern archief onder TIMEVAULT/, deze getypeerde gebeurtenissenlijst, en een sectie Evolutie op de techniekpagina — desktop eerst, op instructie van de eigenaar, waarbij de volledige ervaring eerst staat voordat hij naar kleinere schermen wordt vertaald.
Resultaat
Je leest hem nu.
Beslissing
Eén archief in de repository, één samengestelde tijdlijn op de site, en dezelfde technologiesleutels die hem aan de techniek koppelen.
Waarom Een publieke geschiedenis die los van de echte wordt geschreven, wordt marketing. Beide uit dezelfde gebeurtenissen halen betekent dat de pagina alleen kan zeggen wat het archief zegt.
Wat het kost Het archief moet mét het werk worden bijgewerkt en niet erna, anders raakt de tijdlijn stilletjes achterop.
AUG 27Het archief: elf documenten, dertien entries#87
AUG 27Herkomst bij elke gebeurtenis — geverifieerd, of gereconstrueerd#87
AUG 27De meetlijn, met labels in banen zodat niets botst#87
AUG 27De koppeling met de techniek, beide kanten op#87
AUG 27↺Meetpunten die niet klikbaar waren, gevonden door een test (teruggedraaid)#87
AUG 27↺Ember als kleine tekst op 2,82:1, gevonden door axe (teruggedraaid)#87
2026 · 07 · 10 — 07 · 19
Een site uit het niets
Tien dagen van lege repository naar een live site op een eigen domein.
De studio had een naam, een logo en geen website. De opdracht was een marketingsite die later echt werk kon dragen zonder ervoor herbouwd te hoeven worden.
Architectuur · Gereconstrueerd
2026 · 07 · 20
De studio krijgt een editor
Klik-en-wijzig op de live site, achter één Google-account — in plaats van een CMS.
Elk woord op de site stond in TypeScript. De eigenaar kon geen typefout herstellen zonder ontwikkelaar, en dat is een slechte plek voor een eenmansstudio.
Architectuur · Geverifieerd
2026 · 07 · 21
De telefoon is geen kleine desktop meer
Vijftien pull requests op één dag, allemaal over de duim.
De meeste bezoekers komen op een telefoon binnen. De site was een desktoplayout die kromp, met een balk die niemand met één hand kon bereiken.
UX · Geverifieerd
2026 · 07 · 26 — 07 · 27
Snel genoeg om te houden, vindbaar in het Nederlands
De 3D-laag leerde wachten, en het Nederlands kreeg eigen URL's.
Het terrein was mooi en duur: het werd bij elke paginalading gebouwd, of iemand er ooit naartoe scrolde of niet. En de Nederlandse site — de taal van vrijwel elke klant — bestond alleen als een schakelaar in de browser, dus zoekmachines zagen hem nooit.
Prestatie · Geverifieerd
2026 · 07 · 30 — 07 · 31
Kleur krijgt een machine die het narekent
Tien paletten, en een script dat er geen enkele laat zakken.
Paletten werden op het oog toegevoegd. Een palet dat op het scherm van de ontwerper goed leest, kan alsnog onder een contrastdrempel zakken, en niets op de site controleerde dat.
Toegankelijkheid · Geverifieerd
2026 · 08 · 01
De bouw wordt verkenbaar
Een techniekpagina die je kunt openen, geen lijst met afhankelijkheden.
De zustersite had een sectie die zijn technologie benoemde. De eigenaar vroeg om iets "interactiever en intuïtiever" — een lijst met pakketnamen zegt niets wat een package.json niet ook zegt.
Technologie · Geverifieerd
2026 · 08 · 01
Een poort met een echte browser
Types, lint, contrast, build, en tests die de pagina echt openen.
Twee fouten waren live gegaan op grond van "hij bouwt". Dat iets bouwt is geen bewijs dat het werkt.
Architectuur · Geverifieerd
2026 · 08 · 02
Geïnstalleerd, en aaneengesloten
Het project dat je aanklikt wordt de pagina waarop je landt.
Een projectkaart aanklikken wierp de bezoeker naar een nieuwe pagina, die daar opnieuw zijn plek moest zoeken. En de site, toegevoegd aan een beginscherm, was nog steeds een vermomde browsertab.
UX · Geverifieerd
2026 · 08 · 03
Werk dat zijn cijfers laat zien
Resultaten, een voor-en-na-schuif, en de woorden van de klant zelf.
De projecten waren foto's met bijschriften. Het argument van een ecologische tuin is wat er veranderde — water dat blijft, soorten die terugkomen — en daar stond niets van op de pagina.
Ontwerp · Geverifieerd
2026 · 08 · 22 — 08 · 24
Gevonden via zoeken, bestuurd vanaf een telefoon
Echte gestructureerde data, en offertes en facturen achter één login.
De Nederlandse pagina's droegen Engelse metadata, en de administratie van de studio zat in een spreadsheet.
Architectuur · Geverifieerd
2026 · 08 · 25
Prijzen in de etalage
Een pagina en een vanaf-prijs per dienst, en een postcodecheck die ook nee zegt.
Seizoenswerk is gestandaardiseerd en inplanbaar, dus de prijs verstoppen achter een offerteformulier kost de studio juist de klanten die al wilden boeken.
Ontwerp · Geverifieerd
2026 · 08 · 25 — 08 · 27
Eén boom, drie weergaven
Elf pull requests om elk menu uit dezelfde bron te laten lezen.
Er waren elf diensten bij gekomen en de menu's konden ze niet dragen. De balk, de telefoondock en de footer hadden elk hun eigen lijst, en die drie waren al uit elkaar gegroeid.
UX · Geverifieerd
2026 · 08 · 27
Deze tijdlijn
Het verslag van hoe de site hier kwam, gekoppeld aan het verslag van waar hij van gemaakt is.
De dagverslagen in docs/log/ bevatten de redenering achter vrijwel elke beslissing op deze site, en geen bezoeker kon ze ooit zien. De techniekpagina beantwoordt wát; niets beantwoordde hoe of waarom.
Onderzoek · Loopt nu
Dezelfde geschiedenis, geteld
Gemeten 2026-08-27 · niet ingetypt
Pull requests gemerged
62
Verdeeld over 15 dagen waarop er iets gecommit is, tussen 2026-07-20 en 2026-08-27.
Regels geschreven
63.905
Elke toevoeging die deze repository ooit heeft vastgelegd, opgeteld over alle commits in plaats van als momentopname.
Regels er weer uit
21.316
Dat is 33% van alles wat er geschreven is. Het interessantste getal hier: wat deze site is, is hij vooral door weglaten.
Regels die er nu staan
22.283
15.843 interface, 5.588 logica en data, 852 opmaak.
Geschreven, en weer weg
21.316 verwijderd63.905 geschreven
Commits
65
Mijlpalen
13
Stappen
96
Teruggedraaid
12
Bronbestanden
164
Componenten
54
Routes
17
Diensten met prijs
11
Paletten
10
Contrastparen gecontroleerd
122
Browsertests
26
Afhankelijkheden
25
Naast 22.283 regels code staan 7.808 regels geschreven verslag — de dagverslagen, het operationeel handboek en dit archief. Bijna één regel proza op elke drie regels code, en dat is precies waarom deze tijdlijn er überhaupt kon komen.
05Conceptueel
2026-09-04
Een UI-teardown van gronn.studio tegen de componentcatalogus van 21st.dev
Niet gebouwd, en hardop gezegd
Dertien componenten, gekozen op één vraag: dicht dit een gat dat de site nú heeft? Nagelezen tegen de code voordat het hier kwam te staan — één van de drie hoofdbevindingen hield geen stand, en dat staat erbij.
Niets hiervan is een toezegging. Het is een voorstel met een datum en een bron, bewaard waar het gebouwde staat — want een lijst met voornemens die niemand kan zien is een lijst waar niemand op is aan te spreken.
Eerst — die geld opleveren
Voor en na, sleepbaar
Projectpagina's
Nu
Elk project heeft één sfeerfoto en een geschreven beschrijving van de fasen.
Gat
Nergens visueel bewijs van transformatie — precies het ding waarop iemand met een troebele vijver besluit te bellen.
Nagekeken
Deze klopt niet zoals hij er staat, en hem nakijken leverde meer op dan hem uitvoeren. De slider bestáát: `before-after.tsx`, sleepbaar, met toetsenbordbediening, en hij staat op de projectpagina's. Het echte gat is inhoud en geen component — één van de zes projecten heeft een voor/na-paar, de rest is nog plaatshouderfotografie. Geen enkel pakket had dat opgelost.
Verticaal scrollen stuurt een horizontaal spoor met nummer, titel en parallaxbeeld. Heeft een mobiele terugval.
Een aanvraag als gesprek, niet als knop
Start een project
Nu
Eén oproep die naar een formulier leidt. Alles of niets.
Gat
Geen kwalificatie: je hoort pas bij het intakegesprek of het om een balkonvijver of een halve hectare gaat.
Nagekeken
Inmiddels half gebouwd. Het korte formulier op /contact telt vier stappen en vraagt eerst wat voor project het is; de lange ontwerp-intake achter het dashboard ging van vierentwintig open vragen naar twee, met zevenenzestig dingen om aan te klikken. Wat wél blijft staan is het midden: niets kwalificeert een eerste bezoeker vóór hij tussen die twee kiest.
Hover vervaagt de andere kaarten. Een rustig effect dat het raster als portfolio laat lezen in plaats van als lijst.
Dan — vertrouwen en vindbaarheid
De FAQ die er nog niet is
Nieuw — onder Diensten
Nu
Negen secties, geen FAQ. Alle kennis zit in lopende tekst.
Gat
"Waarom is mijn vijver troebel", "wat kost een natuurvijver", "moet er een pomp in" — dat zijn de zoekopdrachten, en vraag-en-antwoord is het formaat dat daarop rankt.
Nagekeken
Nagekeken en waar: nergens een FAQ in de code. Van alles op deze pagina is dit de enige die puur iets toevoegt — hij breekt niets en concurreert met niets.
De keuze. Accordeon op shadcn-primitieven, met categoriebadges die samenvallen met de diensten. Een Radix-accordeon betekent ook dat de semantiek klopt.
De methode als beweging
Aanpak — de zes stappen
Nu
Zes genummerde stappen als statische kolommen.
Gat
De inhoud ís een volgorde, dus de nummering verdient het. Een tijdlijn die meebeweegt maakt van een opsomming een proces.
De keuze. Markeert de actieve stap op scrollpositie. Zes stappen zonder aanpassing, en het accent kan het merkgroen zijn.
Het werkgebied, letterlijk
Nieuw — voettekst of contact
Nu
Projecten staan in Utrecht, Arnhem, Nijmegen, Zeist, Amersfoort en op de Veluwe. Nergens staat waar de studio zelf zit of hoe ver hij rijdt.
Gat
Een lokale dienst zonder plaatsbepaling. Iemand vlakbij weet niet dat je om de hoek zit; iemand ver weg boekt een intake die niet doorgaat.
Nagekeken
Waar, en scherper dan de teardown wist: die zes plaatsen zijn plaatshouderfictie in afwachting van echte projecten, terwijl de studio in Limburg staat ingeschreven. Een kaart zou vandaag dus uit verzonnen locaties getekend worden — wat het argument is om eerst echte foto's en echte projecten te hebben, en de kaart daarna.
Telt op zodra het in beeld komt. Alleen met echte getallen — m² omgevormd, liters regenwater geborgen. Verzonnen cijfers zijn hier erger dan geen cijfers.
Gelaagde blur via gradiëntmaskers, zodat foto's oplossen in de ondergrond in plaats van er als rechthoek op te liggen.
Wat niet te nemen
Liquid glass, neonknoppen, shaders, chatwidgets. Ze scoren hoog in de catalogus en staan haaks op "natuur is infrastructuur". Deze site is geloofwaardig omdát hij terughoudend is.
Let op het gewicht
Er staat al veel beweging op de pagina. Elke keuze hierboven voegt meer toe. Hooguit één die opvalt, per pagina.
Beperkte beweging
Community-componenten respecteren dat lang niet altijd, en scrollgestuurde tijdlijnen en sweeps zijn precies waar mensen last van hebben. Dat komt erbij tijdens het hertokenen, niet erna.
Volgorde
Eén tegelijk, en meten voor de volgende. Niets op deze lijst is het waard om er twee tegelijk in te zetten.
