SpinPicker

Er is een categorie zoekopdrachten die steeds hetzelfde patroon volgt: iemand moet iets kiezen, wil dat niet zelf doen, en zoekt een tool die het overneemt. Een leraar die een leerling moet aanwijzen, een streamer die een winnaar trekt, een gezin dat de klusjes verdeelt, drie huisgenoten die niet uit het avondeten komen. De behoefte is klein en concreet, en het geduld voor tussenstappen is navenant klein. Wie op zo'n moment op een site landt die eerst een cookiemuur, een advertentiebanner en een registratieformulier laat zien, is meestal weg voordat het rad één keer heeft gedraaid.

Bij een deel van de bestaande aanbieders in deze niche is de tool ondergeschikt geraakt aan het verdienmodel eromheen. De functionaliteit is er wel, maar ze is ingepakt. Dat leek ons een openstaande deur: als de tool zelf het eerste is wat je ziet en direct bruikbaar is, win je het moment waarop iemand een beslissing wil maken, niet erna.

We kozen daarom voor een site die één ding belooft en dat meteen doet. De tagline vat het samen: spin, pick, and decide in seconds. Het rad staat boven de vouw, is vooringevuld met acht startnamen zodat er niets hoeft te worden ingetypt om te zien wat het doet, en draait bij de eerste klik. Alle uitleg, FAQ's en context staan eronder, waar ze de zoekmachine bedienen zonder de bezoeker op te houden.

Een beslistool is speelgoed, geen dashboard. Dat gegeven bepaalde het merk. We ontwierpen een designsysteem dat we intern Playful Arcade noemen: een lichte, warme achtergrond met twee zachte radiale gradiënten in perzik en roze, diep paars als inkt- en merkkleur, en een snoepkleurenpalet van twaalf tinten dat de segmenten van het rad vult. Vormen zijn rond en stevig, met een oplopende radius-schaal en een pill-variant voor knoppen, en schaduwen die eerder zacht en gekleurd zijn dan grijs.

De typografie versterkt dat. Fredoka voor koppen en Nunito voor lopende tekst, beide via next/font, zodat de fonts vanaf het eigen domein komen in plaats van bij een externe host opgehaald te worden. Koppen schalen mee met de viewport via clamp, zodat de titel op een schoolbord-projectie net zo goed leest als op een telefoon in de hand. Het geheel oogt uitnodigend zonder kinderachtig te worden, wat belangrijk is omdat het publiek even goed uit een klaslokaal als uit een kantoorkeuken komt.

Er is geen CSS-framework en geen UI-kit gebruikt. Het systeem staat in app/globals.css als handgeschreven CSS, met custom properties voor kleur, ruimte, radius en schaduw. Dat levert een merk op dat we zelf in de hand hebben, een stylesheet zonder de ballast van klassen die nooit gebruikt worden, en zicht op wat er precies naar de browser gaat. Eén ding is die opzet niet, en dat is één bron voor kleur. Het palet staat als CANDY_COLORS in lib/site.ts, twaalf hexwaarden waar alleen het rad uit tekent; acht daarvan staan daarnaast als token in globals.css, omdat een canvas geen CSS-variabelen leest. Maar daar houdt het niet op. De confetti heeft in lib/confetti.ts een eigen COLORS-array met dezelfde acht waarden, de drie next/og-routes hebben er elk nóg een, de decoratieve SVG op de homepage herhaalt er zes, en het logo staat twee keer volledig uitgeschreven, in app/icon.svg en inline in components/Header.tsx. Met de losse paarse randkleur in SpinnerWheel.tsx erbij liggen dezelfde hexwaarden op tien plekken in de code, en app/opengraph-image.tsx en app/twitter-image.tsx zijn zelfs regel voor regel identiek. Voor de og-routes valt er iets te zeggen, want next/og krijgt geen stylesheet mee. Voor de rest niet: dit is de rafelrand van het project, groter dan hij hoort te zijn, en het opruimen ervan staat op de lijst.

Het draaiende rad is de kern van de site en de plek waar het meeste werk in zit. Het is een eigen canvas-implementatie: ze tekent de segmenten in het snoepkleurenpalet, houdt rekening met devicePixelRatio zodat het op een retinascherm scherp blijft, en animeert de spin met een ease-out curve. Het rad zet af op volle snelheid en loopt daarna uit tot stilstand, over een duur die per beurt varieert tussen ruwweg vier en vijf seconden. De volgorde is daarbij omgekeerd aan wat het lijkt: de winnaar wordt eerst getrokken, waarna de animatie terugrekent naar de eindhoek waarop de pijl precies op dat segment uitkomt, plus vijf tot zeven volle omwentelingen ervoor. Staat het rad stil, dan opent een winnaarsmodal en gaat er een confetti-burst af. Ook die confetti schreven we zelf, als een klein canvas-effect met eigen physics en zonder externe library.

Een eerlijke trekking is in deze categorie het halve product. Elk segment krijgt een gelijke hoek, er is geen weging en geen geheugen van eerdere uitkomsten. Het rad trekt zijn winnaar met de Math.random van de browser. De losse tools gaan een stap verder: de namenkiezer, de dobbelsteen, de muntworp, de getallengenerator en de ja-of-nee-beslisser lopen via een eigen helper in lib/random.ts die crypto.getRandomValues aanspreekt waar de browser die aanbiedt, met rejection sampling om modulo-bias te vermijden en een Math.random-fallback voor oudere omgevingen. De Fisher-Yates-shuffle draait op diezelfde helper, en die shuffle gebruikt het rad wél.

Toegankelijkheid kreeg dezelfde aandacht als de animatie. De winnaarsmodal verplaatst de focus naar binnen, sluit op Escape, houdt Tab binnen de dialoog en zet de focus daarna terug waar hij vandaan kwam. De pagina's van de site hebben één h1, semantische landmarks, gelabelde invoervelden en zichtbare focusringen. De embed-routes vallen daar bewust buiten: die renderen alleen het rad, zonder kop of paginastructuur, omdat de kopstructuur van de pagina waarin het iframe hangt de baas hoort te zijn. Rondom het rad zitten verder de dingen die het echt bruikbaar maken: winnaar verwijderen en opnieuw draaien, shuffelen, en een wiel opslaan in localStorage zodat dezelfde klassenlijst er morgen weer staat.

Technisch is SpinPicker een Next.js 16-site op de App Router, met React 19 en TypeScript in strict mode. De productie-dependencies zijn next, react en react-dom, meer niet. Geen backend en geen database. De routes zijn statisch of vooraf gerenderd, ook /wheel: de ?list=-parameter waarmee een embed zijn eigen namenlijst meestuurt, wordt client-side uit window.location.search gelezen in de radcomponent, zodat de pagina zelf statisch blijft en van de CDN-edge komt. De preset-, tool- en embed-pagina's worden bij de build uit de dataset gegenereerd, met dynamicParams op false zodat er buiten die dataset niets bestaat.

Dat levert de bezoeker twee concrete dingen op. Het eerste is snelheid: de pagina is een statisch HTML-document, de tool is JavaScript dat lokaal draait, en er is geen server die eerst iets moet bedenken. Het tweede is privacy, en dat is in deze niche geen bijzaak. Wie namen van leerlingen of collega's in een rad typt, geeft persoonsgegevens in. Tijdens het draaien, shuffelen en opslaan blijft die invoer in de browser: een opgeslagen wiel staat in de localStorage van het apparaat zelf, niet in een database van ons. Twee dingen verlaten wél het apparaat, en allebei alleen als de bezoeker daar zelf voor kiest. Het contactformulier post een bericht dat je zelf intypt naar een extern endpoint, los van de tools. En de embedcode die je kunt kopiëren zet de namen uit je rad in de querystring van de iframe-URL, zodat het rad elders met jouw lijst opstart. Dat is de prijs van die functie, hij staat leesbaar in het fragment dat je zelf plakt, en wie hem niet wil gebruikt een preset-embed zonder lijst.

Die architectuur dwong ook nette keuzes af in de code. Elke tool onder /tools/[tool] wordt via een eigen dynamic import geladen, zodat de dobbelsteenpagina geen teamgeneratorcode meebrengt. De embed-routes leven bewust buiten de (site)-layoutgroep, waardoor een iframe alleen het rad krijgt en niet de header en footer. En de advertentieplek die in de code zit is inert tot een omgevingsvariabele hem aanzet, met een gereserveerde hoogte zodat er ook dán geen banner is die de tool naar beneden duwt zodra hij inlaadt.

De strategie kent twee lagen. De hoofdterm, spin the wheel, is ambitieus en wordt bediend door /wheel. Daaronder ligt een laag winbare termen die elk hun eigen pagina hebben: team generator, random name picker, random number generator, dice roller, coin flip en yes or no decider. Die zes toolpagina's zijn niet gestript, ze dragen elk lange, echte uitleg en een FAQ. Waar twee pagina's op elkaar dreigden te lijken, hebben we ze uit elkaar getrokken: de yes-or-no-tool mikt op yes or no decider en het bijbehorende preset-rad op yes or no wheel, zodat ze elkaar niet beconcurreren. De muntworp kreeg later dezelfde behandeling: de titel leidt inmiddels op de vorm flip a coin, terwijl de h1 op coin flip blijft staan, zodat beide vraagvormen een eigen thuis houden.

De derde laag is programmatisch. Negenentwintig preset-wielen op /wheel/[preset] beantwoorden elk een eigen concrete zoekvraag, van what should I eat en days of the week tot NATO phonetic alphabet, chore chooser, zodiac en penalty shootout. Ze zijn geen dunne varianten van dezelfde pagina: elk preset heeft een eigen entrieslijst, een eigen beschrijving en een eigen use-case-alinea van ruim honderd woorden die uitlegt wie dit rad waarvoor gebruikt. De interne links tussen presets roteren met een wrap-around venster van zes buren, zodat de linkwaarde over de hele set spreidt in plaats van steeds bij dezelfde zes te landen.

De SEO-techniek eronder is handgebouwd en volgt dezelfde dataset. Elke pagina krijgt een eigen title, meta description en canonical uit dezelfde helpers: een functie die de description op een woordgrens afkapt rond 155 tekens, en een titelbouwer die per preset het langste suffix kiest waarmee de gerenderde titel nog onder de zestig tekens blijft. Daarmee is het niet iets dat per pagina met de hand goed gehouden moet worden. Aan gestructureerde data staat er FAQPage op de moneypages, BreadcrumbList op de geneste pagina's, ItemList op de toolsindex en HowTo met bijbehorende stappen op zowel /wheel als de embed-gids. OpenGraph-afbeeldingen worden gegenereerd met next/og, inclusief een eigen variant per preset. De sitemap wordt uit dezelfde datasets opgebouwd als de pagina's zelf en telt 43 URL's, met een vaste lastModified zodat een deploy niet ten onrechte alles als gewijzigd meldt.

Naast zoekverkeer heeft SpinPicker een tweede manier om zich te verspreiden: de embed. Onder het rad staat een kopieerbaar iframe-fragment dat het rad elders laat draaien, met een preset of met je eigen entrieslijst via de ?list=-parameter. Het is een gewone iframe, dus het werkt op WordPress, op een schoolportaal of op een handgeschreven HTML-pagina die een iframe toestaat, zonder plugin en zonder account. Daar hoort een eigen gids op /how-to-embed bij, met HowTo-markup, en elke embed draagt een creditlink terug naar de site.

De eerste commit dateert van 2 juli 2026. Sindsdien is de site gegroeid van een handvol wielen naar 29 presets, en dat groeien is precies de opzet: een nieuw preset is een object in lib/site.ts, waarna de pagina, de OpenGraph-afbeelding, de embed-variant en de sitemap-entry vanzelf meekomen. De dataset is de bron, de site is de projectie ervan. Dat is wat een programmatische long-tail-strategie onderhoudbaar maakt in plaats van een berg losse pagina's die uit elkaar groeien.

SpinPicker is eigen werk, niet in opdracht gebouwd. Het is een van de organische tool-sites waarmee we in de praktijk doen wat we voor opdrachtgevers doen: een niche kiezen, er een merk voor ontwerpen dat bij de tool past in plaats van bij de mode, dat merk zelf in code zetten zonder framework als kruk, en de vindbaarheid vanaf de eerste commit in de architectuur meenemen in plaats van er achteraf op te plakken. De site staat live en wordt nog doorontwikkeld: de meest recente commits scherpten de muntworp en de contentlaag verder aan.