Vormula demo 13 · Guide

Zo is Ademruimte gebouwd

Een studio voor ademwerk waarvan de site zelf het ademritme voordoet. Geen video, geen app: de pagina is de oefening.

De adem-klok

Eén klok in rAF berekent de positie binnen de 4-7-8 cyclus (vier tellen in, zeven vast, acht uit) en schrijft een ademwaarde tussen 0 en 1 naar een CSS custom property --adem op de root.
De in- en uitademing volgen een smoothstep-easing, het vasthouden is exact vlak. Precies zoals longen bewegen.
Alles luistert mee: de orb schaalt en gloeit op --adem, de contentblokken ademen een half procent mee, de voortgangsring rondt de hele cyclus.
Fase-label en aftel-cijfer komen uit dezelfde klok, met aria-live="polite" voor wie voorgelezen wordt.
Bij prefers-reduced-motion staat alles stil op een rustige middenstand; de labels blijven de fasen benoemen.

Palet: spar-groen #0E2E26 als donkere avondstudio, lavendel #C4B7E6 als adem, mist-wit voor tekst. Diep en zacht, nergens fel.
Eén lettertype, Sora, vooral in gewicht 300. De rust zit in spatiëring en in wat er niet staat.
Er is bewust geen enkele animatie die niet uit de ademklok komt.

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