Motion
Easing- und Spring-Kurven nebeneinander abgespielt, Scroll-Choreografie und die Shader-Wand.
Easing-Kurven
Der Charakter einer Bewegung steckt in ihrer Kurve. Jeder Punkt läuft automatisch in der Schleife, gegen eine leise lineare Referenz, sodass man sieht, wo er beschleunigt und abbremst. Karte klicken kopiert den Wert. Unsere eigenen Tokens stehen neben den Klassikern.
Spring-Physik
Wo Kurven enden, beginnen Springs. Jeder Punkt läuft automatisch in der Schleife, sodass man Steifigkeit, Dämpfung und Masse fühlt. Wert anklicken, um das Preset zu kopieren.
Ruhiges, raffiniertes Gleiten. Unser editorialer Standard.
Knackig und reaktiv, kein Wackeln. UI-Steuerungen.
Lebendiges Überschwingen. Verspieltes Mikro-Feedback.
Fast sofort und straff. Drag, Snap, magnetische Rückkehr.
Micro-Interactions
Die kleinen Antworten, die ein Interface lebendig machen. Zurückhaltend und haptisch, nie laut.
Die Shader-Wand
Unsere Single-File-WebGL-Stücke, die lebenden Hintergründe der Familie. Sie laden erst beim Reinscrollen, um die Maschine zu schonen.
Kacheln mit der Markierung Radiant stammen aus Radiant von Paul Bakaus, genutzt unter der MIT-Lizenz und auf Emerald umgefärbt. Kacheln mit Eigen sind meine eigene Arbeit.
Moderne Kniffe
Die Techniken hinter Bewegung, die sich 2026 aktuell anfühlt, und wann sich jede lohnt.
Scroll-driven CSS
animation-timeline rendert Reveals abseits des Main-Threads, ohne JS. Die performante erste Wahl, mit Observer-Fallback.
GSAP ScrollTrigger
Jetzt komplett gratis. Am besten für gepinnte Szenen und gescrubbte Timelines, die CSS nicht kann. Für Schaustücke reservieren.
Mask- und Clip-Wipes
Schrift und Bilder durch animierte Masken oder clip-path enthüllen. Günstig, GPU-freundlich, sehr editorial.
Scroll-driven WebGL
Scroll-Fortschritt treibt einen Shader-Hintergrund. Hohe Wirkung, hinter reduced-motion und Mobile gesichert, um Thermik zu schonen.
Springs und Momentum
Lenis für trägen Scroll, Springs bei Hover und Druck. Die premium-glatte Basis, auf Mobile konservativ gehalten.
Cursor als Kontext
Der Cursor wandelt sich, um Drag, View oder Play zu signalisieren. Nur Desktop, und nie das native Feedback blockierend.
View Transitions API
Shared-Element-Morphs zwischen Zuständen und Seiten. Sauberer No-op, wo nicht unterstützt. Ideal von Galerie zu Detail.
Kinetische Typografie
Glyphenweise Reveals und variable Gewichte beim Scrollen. Kern der Editorial-Tech-Identität, mit Fade-Fallback für reduced-motion.