Zo is NACHTDIENST gebouwd

Een noir-hoorspel als website. Het idee: de bezoeker krijgt een zaklamp, niet een pagina. Wat u leest hangt af van waar u schijnt, en de redactie heeft niet alles zwart gelakt.

De zaklamp

• Eén fixed overlay met een radial-gradient die van transparant naar bijna-zwart loopt. De cursorpositie wordt via CSS custom properties (--sx, --sy) in de gradient geprikt.
• De lamp sleept iets achter de cursor aan via een kleine lerp in rAF, als een echte lamp met massa.
• De rode .geheim-zinnen staan gewoon in de HTML, maar zijn buiten de lichtcirkel onleesbaar. Wie niet schijnt, leest een keurige synopsis.
• Bij prefers-reduced-motion wordt de overlay een vaste lichte sluier, alles blijft leesbaar.

De nachten

• Vijf afleveringen als panelen op een horizontale rail met scroll-snap-type: x mandatory. Verticaal wielen wordt zijwaarts spoelen, pijltjestoetsen bladeren per nacht.
• Filmkorrel: een inline SVG met feTurbulence als achtergrond, verschoven met een steps()-animatie. Drie frames zijn genoeg voor de illusie van 16mm.

Het ontwerp

• Type: Anton als filmposter-kop, Special Elite als typemachine voor dossiers.
• Palet: nachtzwart #070605, natrium-geel #F5C534 (straatlantaarn), bloedrood #C22B1F, vergeeld papier #D8CDB8.
• De titel draagt een bloedrode slagschaduw die alleen in het licht opvalt.

Credit

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