Making-of / Guide
Eine Website, auf der die Schrift der Hauptdarsteller ist — und alles andere Bühne. Dieser Guide dokumentiert, wie die kinetische Typografie funktioniert und was in den drei Iterationen passierte.
Die These der fiktiven Foundry steht im Essay der Seite selbst:
Schrift ist Sprache, die man sehen kann — und Bewegung ist ihr Tonfall.
Also muss die Seite es vormachen: Die Wortmarke reagiert auf die Hand, Überschriften dehnen sich mit der Scrollgeschwindigkeit, jede Glyphe im Katalog antwortet auf Berührung. Gestaltung: Papierweiß, Schwarz, ein einziges Klein-Blau, sichtbares Raster wie auf einer Reinzeichnung — die helle, stille Bühne für einen beweglichen Star.
Der Kern-Effekt braucht kein Framework, nur zwei variable Achsen und eine Feder pro Buchstabe. Jeder Buchstabe hat Zustand (Gewicht, Breite, Geschwindigkeit); der Cursor-Abstand bestimmt das Ziel, eine gedämpfte Feder folgt ihm weich:
var influence = Math.max(0, 1 - distanz / 340);
ziel_wght = 700 - 580 * influence; // nah = federleicht
ziel_wdth = 100 + 50 * influence; // nah = breit
v = (v + (ziel - ist) * .09) * .82; // feder + dämpfung
el.style.fontVariationSettings = "'wght' …, 'wdth' …";Ohne Mausbewegung (oder auf Touch-Geräten) übernimmt nach 2,8 Sekunden eine Sinus-Welle — die Buchstaben „atmen“ von selbst.
Die Scrollgeschwindigkeit wird geglättet (vel = vel*.88 + delta*.12) und auf die Breitenachse der Überschriften gemappt: Wer schnell scrollt, sieht die Headlines sich strecken. Ein Live-Readout unter der Wortmarke zeigt die aktuellen Achsenwerte — Didaktik als Feature.
Drei Range-Slider schreiben direkt in font-variation-settings eines contenteditable-Absatzes: Besucher testen die „Schrift“ mit eigenem Text. Kein Canvas, kein WebGL — hier ist der variable Font selbst die Technologie.
padding-Shorthand hatte die horizontalen Abstände des Rasters überschrieben (klassische Kaskaden-Falle). Behoben.overflow-x: clip aufs Hero: Die atmende Wortmarke darf nicht die Seite verbreitern.font-variation-settings-nahen Eigenschaften (font-weight/font-stretch).prefers-reduced-motion: Wortmarke statisch bei wght 700; Slider im Labor funktionieren weiter (Interaktion auf Anfrage ist keine Animation).Teil der Serie „5 Websites, 5 Welten“ — fünf grundlegend unterschiedliche, technisch anspruchsvolle Websites, jede mit eigenem Guide.