HYPERCHICKEN
De website van HYPERCHICKEN, een creative tech coöperatie die AI, branding en webontwikkeling samenbrengt. Een zwart-witte site in monospace, met titels die zich aan de breedte van het scherm aanpassen, een woord in de hero dat nooit stilstaat en een portfolio dat je filtert per discipline.
HYPERCHICKEN
Development
Defy the ordinary
HYPERCHICKEN noemt zichzelf een coop of misfits: een klein collectief van strategen, ontwikkelaars en creatieve technologen dat werkt voor merken die niet in een template passen. De site moest dat uitstralen zonder in de weg te zitten. Alles is zwart-wit en in Silka Mono, de beelden en video's van de cases brengen de kleur.
In de hero verandert het woord Hyper om de 250 milliseconden van gedaante: Hyper AI, Hyper Branding, Hyper Dev, Hyper Tech. Die lijst woorden beheert het team zelf in de CMS. Op de werkpagina filter je de cases per discipline, met een overgang die de kaarten rustig laat verdwijnen en terugkomen.
- Een woord in de hero dat voortdurend wisselt, uitgeschakeld bij reduced motion
- Titels die zichzelf schalen tot ze de volle breedte van het scherm vullen
- Cases opgebouwd uit blokken: tekst, beeld, galerij, video en credits
- Een achtergrondvideo via Mux, met een aparte stream voor desktop en mobiel
- SEO en Open Graph-gegevens per pagina, rechtstreeks vanuit de CMS
- Een digitaal visitekaartje per teamlid, met een vCard om te downloaden
Alles beheerd in Kirby
De site draait op Kirby CMS met de GeNx Kirby Kit, onze eigen set plugins voor layouts, responsive beelden, SEO en metadata. Het team bouwt de cases zelf op uit blokken en beheert vanuit dezelfde CMS ook de woorden in de hero, de teamleden en hun visitekaartjes.
De front-end is gewoon JavaScript en SCSS met cascade layers, gebouwd met Vite. Een paar kleine scripts meten de tekst nadat de lettertypes geladen zijn, zodat titels en subtitels altijd mooi in elkaar passen. Video's in de cases laden pas wanneer je op play klikt, zo komt er geen extern script mee zonder dat je erom vraagt.