Zo is HAAK gebouwd

Een boksschool waarvan de site zelf de zak is. Elke klik of tik is een klap: de pagina schudt, de titel deukt weg van je vuist, en de teller in de header telt eerlijk mee.

De klap

• Screenshake: de hele pagina zit in een wrapper die bij elke klap een korte shake-keyframe krijgt, met de klassieke cubic-bezier uit game-feel-land.
• Deukende titel: per titelwoord wordt de afstand tot het raakpunt berekend; woorden binnen bereik schuiven van de klap weg, evenredig met de nabijheid, en veren daarna terug.
• Impact-feedback: een uitdijende ring plus een klapwoord (PATS, HOEK, JAB) op het raakpunt, elke vijfde klap in het wit.
• De thud: een sinus van 120 naar 48 Hz in WebAudio, 180 milliseconden. Geen sample, geen bestand.
• Bij prefers-reduced-motion vervalt alle beweging; alleen de ring en de teller blijven.

Het ontwerp

• Type: Big Shoulders 900, gecondenseerd en gestanst, met Barlow als nuchtere ondersteuning.
• Palet: gietzwart #121110, gym-geel #FFD400, canvas-wit #F2EFE9. Het geel is tape op een gymvloer, en de hero draagt diagonale sparring-strepen in vijf procent geel.
• Het colofon keert om: geel vlak, zwarte letters, TECHNIEK BOVEN KRACHT.

Credit

Site 11 van 25 in de Vormula demo-reeks, thema sport en welzijn. Concept, code en copy: Claude (Fable 5), in opdracht van Vormula Studio.