Maker's guide
Hoe dit gemaakt is
Fluor is een Weblify Signature-showcase, ontworpen en gebouwd door Claude (Opus 4.8). Alles draait op type, kleur en papier, zonder een enkele afbeelding. Hieronder de volledige methode, en je kuntelke prompt lezen die haar voortbracht.
Het idee
Een risograph drukt met twee kleuren die nooit perfect op elkaar vallen. Die mis-registratie is geen fout maar de esthetiek. De site probeert die druk na te doen in de browser: kolossale letter die in registratie valt terwijl je scrollt, met twee fluo-lagen die net langs elkaar schuiven. Geen enkele afbeelding, de letter is het beeld.
De registratie
De kop staat er drie keer: een donkere inkt-key bovenop, en twee gekleurde drukplaten (roze en blauw) eronder via pseudo-elementen met content: attr(data-text). Ze zijn versprongen met een translate die een geregistreerde CSS-variabele --reg gebruikt. Een scroll-driven animatie laat --reg van 11 naar 1 lopen, dus de platen schuiven in registratie terwijl je scrollt, en tegelijk morpht de variabele letter van vet-en-breed naar dun-en-smal.
Nul JavaScript
De hele signature draait op CSS: @property registreert --reg als een getal zodat het interpoleerbaar is, animation-timeline: scroll(root) koppelt de animatie aan de scroll, en font-weight en font-stretch (de wght- en wdth-assen van Anybody) worden native geanimeerd. Er is geen script nodig, dus niets kan traag laden of janken.
Edities die schuiven
Elke editie is een eigen pagina. Met @view-transition { navigation: auto } zet de browser native cross-document View Transitions aan; een print-schuif op ::view-transition-old/new laat een editie-navigatie voelen als een verse print die van de druktrommel komt. Zonder ondersteuning zijn het gewone paginawissels, alles blijft werken.
Leesbaar eerst
De kinetiek zit alleen op de grote titels; de gedichten staan rustig en leesbaar. De zichtbare tekst is echte donkere DOM-tekst op krantpapier (hoog contrast), de fluo-platen zijn decoratief. Reduced-motion levert een nette, geregistreerde eindstand zonder beweging. Zo haalt de site a11y 100 en axe 0.
De stack
Astro en Tailwind, geen client-framework, bijna geen JavaScript. Alle stijl in scoped, gehashte CSS onder een strikte CSP: geen inline-styles of handlers. Self-hosted variabele fonts (Anybody met wght + wdth, Hanken Grotesk, JetBrains Mono). Gedeployed als statische bestanden op Cloudflare Pages.
Reproduceer het
- 1.Scaffold een Astro + Tailwind-site met een strikte, gehashte CSP.
- 2.Registreer --reg als @property (<number>); zet twee fluo-drukplaten via ::before/::after met attr(data-text).
- 3.Koppel een scroll-driven animatie (animation-timeline: scroll(root)) die --reg, font-weight en font-stretch morpht.
- 4.Zet @view-transition { navigation: auto } aan en choreografeer ::view-transition-old/new als een print-schuif.
- 5.Houd de kinetiek op de titels, de gedichten leesbaar; lever een volwaardige reduced-motion-stand.
- 6.Deploy de statische bestanden naar Cloudflare Pages met --branch main.
Fictieve showcase-pers. Alle edities en colofon-specs zijn verzonnen; er is geen enkel beeld gebruikt.