Was du siehst
Das Wort „AUFFALLEN.“ füllt die ganze Breite. Wo die Maus ist, werden die Buchstaben breit und fett, daneben schmal und leicht. Ohne Maus wandert diese Welle langsam von selbst. Weiter unten leuchtet ein Manifest Wort für Wort auf, und der Punkt aus „nextweb.design“ wächst, bis er den Bildschirm füllt.
So ist es gebaut
Variable Schriften haben Achsen statt fester Schnitte. Die Schrift Archivo lässt sich stufenlos in Breite und Stärke verändern. Für jeden Buchstaben rechnet ein kleines Skript aus, wie nah die Maus ist, und setzt die Achsen über font-variation-settings. Der Text bleibt dabei echter, durchsuchbarer Text.
Das Aufleuchten und der wachsende Punkt sind Scroll-Animationen mit GSAP ScrollTrigger.
Woher die Idee kommt
Kinetische Typografie ist in der Plakatgestaltung zu Hause. Möglich wird sie im Web durch variable Schriften wie Archivo von Omnibus-Type.
Darauf achten wir
- Eine einzige Schriftdatei statt vieler Schnitte
- Das Wort passt sich jeder Bildschirmbreite an
- Ruhige Fassung ohne Bewegung