TypeBurst

Een typetest is een van die zoekopdrachten waarbij de bezoeker vooraf al weet wat hij wil, en weinig geduld heeft voor de weg ernaartoe. Hij wil een getal, hij wil het nu, en daarna is hij weer weg. Dat maakt de niche interessant: de vraag is smal, herhaalbaar en goed af te bakenen. Het maakt hem tegelijk streng, want wat tussen de bezoeker en het testveld in staat, is verlies.

Daar gaat het in deze hoek van het web geregeld mis. Je komt binnen voor een test van dertig seconden en loopt eerst tegen een accountvraag, een cookiemuur of een blok advertenties boven de vouw aan. De test zelf, het enige onderdeel dat ertoe doet, moet vechten om ruimte op zijn eigen pagina. Ons uitgangspunt was de omkering daarvan: de test staat direct onder de kop, hij start bij je eerste toetsaanslag, en zolang de advertenties uitstaan is er niets om eerst weg te klikken.

De vraag valt bovendien uiteen in herkenbare varianten. Iemand zoekt niet alleen naar een typetest, maar naar een test van één minuut, naar een test voor kinderen, of naar wat het gemiddelde eigenlijk is. Die varianten hebben we uitgeschreven tot twaalf inhoudelijke pagina's. Negen daarvan hebben de test erin: de homepage, vijf pagina's per testduur (10 en 30 seconden, 1, 2 en 5 minuten) en drie varianten voor beginners, kinderen en data-entry. De overige drie leggen uit wat WPM betekent, hoe je sneller leert typen en waar de gemiddelden liggen. Elke variant zet de duurknoppen anders neer, zodat de pagina waar je op landt ook opent met de test waar je voor kwam.

TypeBurst heeft geen CSS-framework en geen thema. De visuele laag is eigen CSS op een eigen set design tokens, en in de dependencies staan alleen next, react en react-dom. Dat is een bewuste keuze en geen sportprestatie: bij een site die uit één interactief component en wat proza bestaat, kost een framework meer dan het oplevert, in bytes en in vrijheid. Het bijeffect is dat er niets in de pagina zit dat we niet zelf hebben neergezet, wat het gedrag bij het typen goed voorspelbaar maakt.

De richting is licht en rustig. De achtergrond is een bijna-wit blauwgrijs (#f7f8fc), de tekst diep inktblauw (#1b1c2e), en kleur wordt spaarzaam ingezet: een helder blauw (#2563eb) draagt de accenten, met een donkerder variant eronder voor links en hover-toestanden. Dat past bij het onderwerp: je zit naar dit scherm te staren terwijl je zo geconcentreerd mogelijk probeert te typen, dus het scherm hoort niet mee te schreeuwen. De plek waar kleur wel hard mag zijn, is de feedback zelf, groen (#16a34a) voor een correct teken en rood (#e11d48) voor een fout.

De typografie doet hetzelfde werk. Sora voor de interface, JetBrains Mono voor de passage, zodat de tekens even breed zijn en je oog niet gaat schuiven terwijl je typt. Het woordmerk zet Type in tekstkleur en Burst in het accent, met als merkteken een klein afgerond blokje met twee witte streepjes onder elkaar erin. Dat beeld komt terug in de OG-afbeelding, die we met next/og uit dezelfde kleuren en vormen opbouwen in plaats van als los plaatje te onderhouden. Zo verandert het deelbeeld mee wanneer het merk verandert, zonder dat iemand een export hoeft te vervangen.

Onder de motorkap is de test bewust conservatief. Bij de start bouwt de browser een passage van 400 woorden uit een lijst van 240 veelgebruikte Engelse woorden, kort en vertrouwd, zodat de test over snelheid gaat en niet over vocabulaire. De kindervariant put uit een aparte lijst van 100 korte, simpele woorden. De passagebouwer houdt tegen dat hetzelfde woord direct achter zichzelf belandt, wat kleiner klinkt dan het leest: juist die herhaling is het eerste dat een test goedkoop laat aanvoelen.

Het scoren volgt de gangbare rekenwijze: vijf correct getypte tekens tellen als één woord, gedeeld door de verstreken minuten. Daar zit één detail in dat we belangrijk vonden. De spatie waarmee je een woord afsluit telt alleen mee als correct teken wanneer dat woord ook echt goed getypt was. Zo kun je je score niet oppompen met een reeks halve woorden, en sluit een cijfer van TypeBurst aan bij de manier waarop de meeste tests rekenen. Backspacen kan binnen het woord waar je in zit, maar niet terug over een woord dat je al hebt afgesloten, zodat wat geteld is geteld blijft.

Wat je ziet is verder alles tegelijk en meteen: WPM, accuracy, CPM en het aantal fouten lopen mee terwijl de klok afloopt, en een teken kleurt op het moment dat je het typt. Je persoonlijke record wordt per testduur apart bewaard, in je eigen browser, met een vangnet voor het geval de opslag niet beschikbaar is: dan verlies je je record, niet je test. De invoer loopt via een visueel verborgen tekstveld, met instructies voor schermlezers, statistieken die als live-regio worden aangekondigd en duurknoppen die hun eigen toestand uitspreken, zodat de test volledig met het toetsenbord te bedienen is. Zonder zicht is hij dat nog niet: de passage zelf staat als aria-hidden in de pagina, dus een schermlezer kondigt de statistieken wel aan maar leest de te typen woorden niet voor. Dat is een open punt en geen afgevinkt vakje.

De site draait op Next.js 16 met de App Router, React 19 en TypeScript in strict mode, en levert 22 statisch gerenderde routes op. Dat zijn de twaalf inhoudelijke pagina's, vier formele pagina's (about, privacy, terms en contact) en zes routes die Next zelf uitserveert: de 404, de global error, het icoon, het OG-beeld, robots.txt en de sitemap. Er is geen API-route, geen database en geen backend, en er staat geen enkele dynamische route in de build. Wat er wordt uitgeleverd, is wat er bij de build is vastgelegd.

Tijdens het gebruik van de test gaat er niets naar een server. De woordenlijsten zitten in de bundel, de passage wordt in de tab opgebouwd, het rekenwerk gebeurt in de tab, en het resultaat blijft in de tab. We hebben ook geen analytics- of ander extern script in de pagina gezet, en de webfonts worden bij de build meegenomen in plaats van bij ieder bezoek elders opgehaald. Privacy is hier daarom minder een belofte in een voetnoot dan een gevolg van de opzet: tijdens de test is er geen server die je toetsaanslagen te zien krijgt, en je records staan op je eigen apparaat. Eén onderdeel stuurt wel iets naar buiten, en dat is het contactformulier: dat post JSON naar een gedeeld extern endpoint, met een honeypot-veld tegen simpele bots. Daarnaast is er een IndexNow-script dat na een deploy verkeer maakt, maar dat draait op de commandline en niet in de browser van de bezoeker.

Statisch betekent hier niet simpel. Omdat het bepalen van correctheid over de hele getypte passage loopt, hebben we dat werk losgetrokken van de statistieken die elke honderd milliseconden met de klok meetikken. De zware loop draait alleen als je invoer daadwerkelijk verandert, niet bij elke tik van de timer. Dat scheelt op het moment dat het telt, namelijk terwijl iemand zo snel mogelijk zit te typen en een hapering in de weergave direct als een fout in de meting voelt.

De inhoud komt uit één registry. Een pagina draagt daar zijn eigen title, meta description, kop, proza en FAQ, waardoor de varianten inhoudelijk uit elkaar lopen in plaats van elkaar te herhalen, en waardoor de metadata, de navigatie, de sitemap en de gestructureerde data uit dezelfde bron worden gevoed. De pagina's wijzen met hun canonical naar zichzelf, zodat de duurvarianten elkaar niet in de weg gaan zitten. Eén eigenaardigheid kwamen we onderweg tegen: Next vervangt het openGraph-object per route in plaats van het samen te voegen, waardoor een pagina die zelf een OG-titel zet stilletjes het OG-beeld kwijtraakt. Daar staat sindsdien één gedeelde helper voor.

De gestructureerde data is opgebouwd als één graph per pagina: een Article op de uitlegpagina's, een FAQPage uit de vragen die op die pagina ook echt beantwoord worden, en een BreadcrumbList. De how-to-pagina krijgt er een HowTo bij, gebouwd uit de stappen die er zichtbaar staan. Even veelzeggend is wat we hebben weggelaten. Een SoftwareApplication-node stond er ooit in, maar het rich result daarvoor vraagt om een rating of review, en die verzinnen we niet. Dan gaat de node eruit in plaats van halfslachtig te blijven staan.

Diezelfde nuchterheid zit in de rest. De sitemap gebruikt een vaste inhoudsdatum in plaats van de builddatum, omdat URL's bij iedere deploy opnieuw stempelen crawlers vooral leert het signaal te wantrouwen; die datum schuift op wanneer de inhoud verandert, niet wanneer de build draait. Er staat een llms.txt voor AI-crawlers die de site en de pagina's in gewone taal beschrijft, en een klein IndexNow-script dat de sitemap-URL's na een deploy aanmeldt bij de zoekmachines die op dat protocol zijn aangesloten. En onder de tabel met typische snelheden per groep staat een notitie dat het om gangbare referentieranges gaat en niet om één formeel onderzoek, want een getal met een bron die we niet hebben, is een getal dat we niet zetten.

De eerste commit is van 3 juli 2026, en de site draait sindsdien live op typebursts.com. In de commits daarna zit het werk dat je bij een jonge site verwacht: een ronde audit-fixes (OG-beeld, Twitter card, JSON-LD, een eigen 404, een privacy- en about-pagina, het slate blue palet), het IndexNow-script, Search Console-verificatie en een laatste ronde contentuitbreiding op 14 juli. Het is een jonge site, en zo presenteren we hem ook. Wat hier staat is het werkstuk zelf; cijfers over bezoek of positie horen bij een site die daar de tijd voor heeft gehad.

Het verdienmodel is voorbereid maar staat bewust uit. Op de homepage zit een advertentieslot dat niets rendert zolang de betreffende omgevingsvariabele uitstaat, met een vaste minimumhoogte zodat het later aanzetten van advertenties de tekst eronder niet wegduwt. Er is nog geen ad-netwerk gekoppeld. De consent-banner staat er als inerte placeholder die niets toont zolang de advertenties uitstaan, klaar om vervangen te worden door de gecertificeerde CMP van het netwerk dat we kiezen. Dat is de volgorde die we logisch vinden: eerst iets dat werkt en gevonden wordt, dan pas de vraag hoe het zichzelf terugverdient.

Voor wie ons werk beoordeelt is dit vooral een werkstuk in plaats van een verhaal. TypeBurst laat zien dat we een niche uitkiezen, er een merk omheen ontwerpen zonder template, de tool zelf bouwen tot in het detail van hoe een spatie meetelt, en de vindbaarheid inrichten met de discipline om weg te laten wat we niet hard kunnen maken. Van eerste commit tot live site, in eigen beheer en in eigen onderhoud.