nusakutnjak/motion-feels

Bewegung nach Gefühl

Die meisten Menschen können keine Easing-Kurve benennen, aber sie wissen genau, wie sich etwas anfühlen soll: ruhig, knackig, teuer, verspielt. Diese Worte passen zu Dutzenden von Kurven, also rät eine KI herum, und die Arbeit wird zu einer Endlosschleife aus „zu schnell“, „weniger springend“. Diese Skill gibt Ihnen und dem Gegenüber einen gemeinsamen Satz an Namen, die jeweils an exakte Werte gebunden sind. Sie sprechen in Gefühlen; Sie handhaben die Zahlen.

Geschrieben für Websites: Marketing-, Portfolio-, Content- und Shop-Seiten. Für App- oder Produkt-UI funktionieren dieselben Gefühle; verwenden Sie das schnelle Ende jeder Geschwindigkeit.

Drei Teile:

• Gefühl: Wie es sich bewegt. Eine Geschwindigkeit plus eine Easing-Kurve. Die 14 Gefühle sind unten aufgeführt.
• Effekt: Was sich bewegt. Mask-Enthüllung, Parallaxe, Laufschrift usw. Siehe references/feels.md.
• Regler passen ein Gefühl an: Geschwindigkeit, Stopp, Überschwingen, Staffelung, Distanz, Verzögerung, Auslöser, Intensität.

In Gefühlen sprechen, nicht in Kurven

Der Gegenüber kennt möglicherweise keine Bewegungsbegriffe und sollte das auch nicht müssen.

• Bitten Sie sie nie, eine Easing-Kurve, eine Bézierkurve, eine bestimmte Millisekundenzahl oder power4.out auszuwählen. Fragen Sie nach dem Gefühl, mit einem Bild aus dem Alltag: „Soll es sanft landen, wie das Hinstellen eines Glases, oder ein wenig überschwingen und sich beruhigen, wie eine Feder?“
• Beschreiben Sie Gefühle danach, wie sie aussehen, nicht wie sie erzeugt werden: „Startet schnell und gleitet zum Stillstand“, nicht „power4.out“.
• Gefühlsnamen sind eine optionale Abkürzung. Erwähnen Sie sie beiläufig („Ich nenne dieses Gefühl Luxuriös“), damit der Gegenüber sie wiederverwenden kann. Erzwingen Sie es nie und korrigieren Sie nie seine Worte.
• Zahlen kommen in den Code, plus eine kurze Zeile für den, der es baut oder prüft: „Für Entwickler: 1,2 s, cubic-bezier(0.22, 1, 0.36, 1). Lassen Sie diese Zeile weg, wenn niemand daraus baut, z. B. wenn der Gegenüber nur eine Richtung wählt.
• Die Wörter in dieser Datei sind für Sie, nicht für sie. Reglernamen und CSS-Begriffe bleiben aus Ihren Antworten. Sagen Sie „der kleine Hüpfer am Ende“ (Überschwingen), „einer nach dem anderen“ (Staffelung), „wie weit es sich bewegt“ (Distanz), „wie sanft es stoppt“ (Stopp), „wie viel sich gleichzeitig bewegt“ (Intensität), „wo es herkommt“ (Ursprung), „für Leute, die Animationen ausschalten“ (reduzierte Bewegung).
• Eine Zeile Übersetzung, dann bauen. Keine Vorlesungen, und halten Sie die Arbeit nicht auf. Die einzige Ausnahme ist ein Wort, das die folgenden Tabellen als „fragen“ markieren, bei dem zuerst eine einfache Frage kommt.
• Sehen ist besser als Beschreiben. Wenn der Gegenüber es nicht in Worte fassen kann, bieten Sie die Demo-Seite an (assets/feels-demo.html, in jedem Browser öffnen) oder bauen Sie einen schnellen A/B-Umschalter und lassen Sie ihn wählen.

Die 14 Gefühle

Gefühl	Sieht aus wie	Geschwindigkeit	CSS	GSAP
Crisp	ein Lichtschalter: sofortiger, sauberer Stopp	150 ms	cubic-bezier(0.33, 1, 0.68, 1)	power2.out
Snappy	schießt heraus und landet fest	300 ms	cubic-bezier(0.16, 1, 0.3, 1)	expo.out
Springy	schnell, ein kleines Überschwingen, dann beruhigen	600 ms	spring, bounce 0.3 (linear() in CSS)	no spring; am nächsten back.out(1.2)
Smooth	eine Schiebetür: weicher Start, weicher Stopp	500 ms	cubic-bezier(0.65, 0, 0.35, 1)	power2.inOut
Gentle	treibt herein und verblasst zum Stillstand	700 ms	cubic-bezier(0.61, 1, 0.88, 1)	sine.out
Luxurious	schneller Start, langes langsames Gleiten zur Ruhe	1,2 s	cubic-bezier(0.22, 1, 0.36, 1)	power4.out
Floaty	eine Feder: langsam und gleichmäßig, kein klarer Start oder Stopp	2 s	cubic-bezier(0.37, 0, 0.63, 1)	sine.inOut
Dramatic	ein Theater-Vorhang: baut auf, eilt herbei, beruhigt sich	1,2 s	cubic-bezier(0.87, 0, 0.13, 1)	expo.inOut
Wind-up	ein Schleuder: zieht erst zurück, überschwingt das Ende	800 ms	cubic-bezier(0.68, -0.6, 0.32, 1.6)	back.inOut(1.7)
Pop	springt über das Ende hinaus und kommt einmal zurück	450 ms	cubic-bezier(0.34, 1.56, 0.64, 1)	back.out(1.7)
Elastic	Wackelpudding: wackelt ein paar Mal, dann beruhigen	1 s	linear() aus elastic.out	elastic.out(1, 0.3)
Bounce	ein aufprallender Ball	900 ms	linear() aus bounce.out	bounce.out
Mechanical	ein Förderband: gleiche Geschwindigkeit durchgängig	1 s	linear	none
Stepped	ein Daumenkino: springt Bild für Bild	900 ms	steps(6)	steps(6)

Ein Gefühl behält seine Kurve bei jeder Geschwindigkeit: „Springy bei 400 ms“ ist die Springy-Form, nur schneller. Federn, elastische und Sprung-Effekte in reinem CSS sind eine linear()-Liste, die aus der Kurve abgetastet wurde; fertige Werte zum Einfügen sind in references/feels.md („Fertig zum Einfügen – Code“). Die Feder-„Bounce“ ist der 0–1-Wert, der von SwiftUI und Motion verwendet wird (Dämpfungsverhältnis = 1 − bounce).

So arbeiten Sie

1. Prüfen Sie zuerst das Element: wie oft es gesehen wird und ob es ein Interface-Teil oder eine Showcase-Bewegung ist („Bevor Sie ein Gefühl auswählen“ unten). Dies kann weniger oder gar keine Bewegung bedeuten.
2. Übersetzen Sie ihre Worte in Gefühl + Regler + Effekt, mithilfe der Tabellen unter „Alltagswörter“ unten. Wenn zwei oder drei Gefühle passen, stellen Sie eine einfache Frage (oder zeigen Sie einen A/B-Umschalter).
3. Sagen Sie den Plan in einer einfachen Zeile, bevor Sie bauen, z. B. „Die Überschriftenzeilen gleiten nach oben und beruhigen sich langsam, während Sie zu ihnen scrollen, einmal (Gefühl: Luxurious).“ Sie können umlenken, bevor etwas gebaut ist.
4. Bauen mit Dauer, Verzögerung und Easing in CSS-Variablen oder einem Konfigurationsobjekt (--motion-dur, --motion-ease, --motion-stagger), sodass jede Anpassung eine Änderung einer einzelnen Zahl ist. Befolgen Sie die „Build-Regeln“.
5. Berichten in einfachen Worten, mit den Werten für Entwickler. Bei einer Änderung zeigen Sie vorher → nachher: „etwas langsamer: 1,2 s → 1,8 s“. Behalten Sie die vorherigen Werte, sodass „rückgängig“ sie genau wiederherstellt.
6. Bleiben Sie konsistent: Sobald die Gefühle der Seite klar sind, schlagen Sie vor, sie als Bewegungspalette (unten) in den Design-Tokens des Projekts zu speichern, sodass jeder Abschnitt sich gleich bewegt.

Eine Bewegungspalette für die gesamte Seite

Eine gute Seite verwendet 2 oder 3 Gefühle, nicht 14: eines für Interface-Teile, eines für Showcase-Momente und vielleicht ein Akzent. Wenn jemand die Bewegung gar nicht beschreiben kann, fragen Sie nach der Marke in drei Worten und schlagen Sie eine Palette in einer Zeile vor.

Die Marke klingt nach	Showcase	Interface	Akzent
ruhig, vertrauenswürdig, fürsorglich (Gesundheit, Finanzen, Recht)	Gentle	Crisp	—
hochwertig, redaktionell (Mode, Architektur, Hotels)	Luxurious	Crisp	Dramatic für den ersten Ladevorgang
mutig, schnell, technisch (Startups, SaaS, Sport)	Snappy	Crisp	Pop
freundlich, verspielt (Kinder, Lebensmittel, Verbraucher-Apps)	Springy	Snappy	Pop oder Bounce
kreativ, ausdrucksstark (Studios, Portfolios, Agenturen)	Luxurious oder Dramatic	Snappy	Wind-up
verträumt, natürlich (Wellness, Schönheit, Meditation)	Floaty für Loops, Gentle für Inhalt	Crisp	—
Retro, roh (Spiele, Musik, Brutalismus)	Stepped	Crisp	Mechanical Laufschriften

Bevor Sie ein Gefühl auswählen

Wie oft wird es gesehen?

Bewegung, die einmal begeistert, stört beim zehnten Mal. Passen Sie das Maß an Bewegung daran an, wie oft ein Besucher dem Element begegnet.

Wie oft	Beispiele	Bewegung
Auf jeder Seite, jedem Besuch	Nav-Links, Header, Buttons, Footer-Links, Formularfelder	klein und schnell: Crisp, oder nur ein Farbwechsel. Tastaturfokus zeigt den Fokusring sofort, ohne Bewegung. Ein Eingang (ein Nav, das beim Laden hereingleitet) wird nur beim ersten Seitenaufruf abgespielt.
Bei jedem Klick	Seitenübergänge	kurz: 600 ms oder weniger, selbst wenn die Marke langsam und hochwertig ist
Einmal pro Seite	Held, Abschnitt-Enthüllungen, Fallstudien-Karten, Statistiken	das volle Gefühl. Scroll-Enthüllungen werden einmal abgespielt, nicht jedes Mal beim Zurückscrollen.
Einmal pro Besuch	Intro-Lader, erster Ladevorgang des Held-Elements	Platz für Dramatic und Freude. Lader nur beim ersten Seitenaufruf ausführen.

Der Akzent der Palette erscheint auf dem Ergebnis, nicht auf dem Steuerelement: Ein „In den Warenkorb“-Drücken bleibt schnell (Crisp), und die Warenkorb-Anzahl ist das, was springt.

Wenn jemand ein langsames Gefühl für ein Element auf jeder Seite wünscht, bauen Sie die schnelle Version und sagen Sie in einer Zeile, wie man wechselt: „Nav-Links sind auf jeder Seite, also habe ich sie schnell gehalten; die langsame Version ist ein ein-Zahlen-Tausch.“ Warten Sie nicht auf eine Antwort; es ist seine Entscheidung.

Interface-Teil oder Showcase?

• Interface-Teile: Der Besucher versucht, etwas zu tun. Nav-Dropdowns, mobiles Menü, Tabs, Akkordeons, Modals, Tooltips, Formular-Feedback, Filter. Halten Sie sie bei 300 ms oder weniger, egal welches Gefühl; mobile Menüs und Modals können bis zu 400 ms gehen. Ausgänge laufen mit etwa 75% des Eingangs: Setzen Sie die kürzere Dauer auf den geschlossenen Zustand.
• Showcase-Bewegung: Schafft die Stimmung. Held, Abschnitt-Enthüllungen, Bild-Enthüllungen, Laufschriften, Hintergrund-Loops, der erste Lade-Moment. Die eigene Geschwindigkeit des Gefühls gilt, und lang ist in Ordnung.

Standard nach Element (wenn kein Gefühl angegeben ist)

Die Geschwindigkeit hier ersetzt die eigene Geschwindigkeit des Gefühls. Jedes Feedback („fühlt sich billig an“, „zu springend“) überschreibt diese Standardeinstellungen.

Element	Gefühl	Geschwindigkeit
Buttons, Links, Schalter, Hover, Tooltips	Crisp	150 ms
Nav-Dropdowns, Tabs, Karten-Hover	Snappy	250 ms
Akkordeons, FAQs	Smooth	300 ms
mobiles Menü, Modals, Drawer, Sheets	Springy	400 ms
ziehen und loslassen	Springy	600 ms
Slides, Karussells, Dinge, die über den Bildschirm wandern	Smooth	500 ms
Text- und Bild-Enthüllungen (Fade-up 24 px, Staffelung 60–80 ms)	das Showcase-Gefühl der Palette; ohne Hinweis Snappy	das eigene des Gefühls
Seitenübergänge	Smooth	600 ms
Held-Moment, erster Ladevorgang	Dramatic	1,2 s
Hintergrund-Loops, Ambient-Formen	Floaty	2 s
Erfolgszustände, Abzeichen	Pop	450 ms
Lader, Laufschriften, scroll-gescrubbte Bewegung	Mechanical	nach Bedarf

Alltagswörter

Verwenden Sie diese zum Übersetzen. Die linke Spalte ist, was Leute tatsächlich sagen; keines davon erfordert Bewegungswissen. Zeigen Sie in einem längeren Gespräch jede Übersetzung einmal an und wenden Sie sie dann still an.

Wörter → Gefühle

Sie sagen	Lesen Sie als	Fragen Sie, wenn
hochwertig, teuer, elegant, edel, luxuriös, „wie ein Magazin“, „langsam und selbstbewusst“	Luxurious	—
geschmeidig, fließend, butterweich, nahtlos, seidig, „gleitet“	Smooth (sich bewegend) oder Gentle (erscheinend)	das Element macht es nicht offensichtlich: „Gleichmäßig von Anfang bis Ende gleiten, oder sanft ankommen und zu einem Stopp verblassen?“
weich, ruhig, entspannt, leise, gemütlich, warm, „nicht auffällig“	Gentle	—
subtil, kaum sichtbar, „möchte nicht, dass Leute es bemerken“	Crisp (Interface) oder Gentle (Inhalt)	—
verträumt, luftig, schwebend, schwerelos, „wie eine Feder“, „wie unter Wasser“	Floaty	—
schnell, zügig, reaktionsschnell, sofortig, klickbar, straff, „wie ein Lichtschalter“	Crisp (kleine Dinge) oder Snappy (größere Dinge)	Größe ist unklar
schwungvoll, energiegeladen, mutig, selbstbewusst, stark, „landet hart“, „mit Haltung“	Snappy	—
natürlich, physisch, lebendig, „wie eine Telefon-App“, „wie ein echtes Objekt“	Springy	—
lustig, verspielt, niedlich, freundlich, frech, fröhlich	Pop, Springy oder Elastic	fast immer: „Ein kleiner Sprung über das Ende, eine sanfte federnde Beruhigung oder ein Wackelpudding-Wackeln?“
springend	Bounce (landet und springt) oder Pop / Springy (überschwingt, beruhigt)	immer: „Springen wie ein landender Ball, oder etwas überschwingen und sich beruhigen?“
wackelig, wabbelig, gummiartig, matschig, wacklig	Elastic	—
filmreif, episch, „wie ein Film“, kraftvoll, schwer, „ein Wow-Moment“, große Enthüllung	Dramatic	—
cartoonartig, „zieht sich erst auf“, „wie eine Schleuder“	Wind-up	—
roboterhaft, konstant, stetig, „wie ein Förderband“, Ticker	Mechanical	—
Retro, abgehackt, Stop-Motion, Pixel, glitchig, „wie ein altes Videospiel“, Daumenkino	Stepped	—
modern, cool, nett, sauber, „mach es poppen“, „mach es gut aussehen“, „füge etwas Animation hinzu“, „mach es lebendig“	nichts für sich allein	immer: Bieten Sie die 3 Gefühle an, die zum Kontext passen, in einfachen Worten, oder fragen Sie nach der Marke in drei Worten („mach es poppen“ kann das Pop-Gefühl bedeuten oder einfach „auffälliger“)

Feedback → Regler

Sie sagen	Änderung
zu schnell, gehetzt, „im Nu vorbei“, „ich kann es nicht sehen“	Geschwindigkeit × 1,5
zu langsam, träge, verzögert, „dauert ewig“, „ich warte darauf“	Geschwindigkeit ÷ 1,5. Prüfen Sie bei einem Interface-Teil auch das 300-ms-Limit.
abrupt, hart, ruckelig, „knallt an seinen Platz“, „stoppt zu plötzlich“	Stopp: weicher, einen Schritt entlang power2.out → power3.out → power4.out → expo.out (CSS-Werte in references/feels.md)
matschig, „schleppt am Ende“, „kriecht“, „braucht zu lange zum Beruhigen“	Stopp: fester (kürzerer Ausläufer), oder schneller
schwach, leblos, „braucht mehr Bums“, „landet nicht“	Stopp fester + Geschwindigkeit ÷ 1,5, oder auf Snappy wechseln
zu springend, „zu viel“, kitschig, kindisch, „übertrieben“	Überschwingen eine Stufe herunter: Pop cubic-bezier(0.34, 1.56, 0.64, 1) → ein wenig cubic-bezier(0.34, 1.4, 0.64, 1) → keins (Snappy)
fühlt sich billig an	normalerweise zu viel Bewegung: Distanz herunter und Überschwingen herunter; wenn es langsam ist, Geschwindigkeit ÷ 1,5
hüpfig, ruckelig, „erscheint aus dem Nichts“	es wächst aus dem Nichts oder überschwingt: beginnen bei scale(0.95) (Build-Regeln), Überschwingen eine Stufe herunter, Distanz herunter
steif, roboterhaft, tot, „braucht mehr Leben“	Überschwingen eine Stufe hoch, oder auf Springy wechseln
flach, langweilig, „nichts passiert“, „ich bemerke es nicht“	Staffelung hoch, oder Distanz hoch
hektisch, ablenkend, „zu viel los“, nervig	Intensität herunter, Staffelung herunter. Nervig bedeutet oft, dass es zu oft gesehen wird: Prüfen Sie „Wie oft wird es gesehen?“
„macht mich schwindelig“, „mir wird übel“	Entfernen Sie Parallaxe, große Skalierung und Bewegungen über weite Distanzen; prüfen Sie den Rückfall bei reduzierter Bewegung
startet zu spät / zu früh	Verzögerung herunter / hoch in 100-ms-Schritten
fühlt sich falsch an, „nicht ganz richtig“, „ich weiß nicht, was falsch ist“	raten Sie nicht: Fragen Sie „Ist es die Geschwindigkeit, die Art zu starten, die Art zu stoppen oder der kleine Hüpfer am Ende?“, oder zeigen Sie zwei Versionen nebeneinander

Build-Regeln

• Bewegen mit transform, verblassen mit opacity. Animieren Sie nicht width, height, top, left oder margin; sie ruckeln beim Scrollen. Für Akkordeons ist grid-template-rows: 0fr → 1fr die akzeptierte Ausnahme (der Inhalt sitzt in einem inneren Wrapper mit min-height: 0; overflow: hidden). Niemals transition: all; nennen Sie die Eigenschaften.
• Niemals aus dem Nichts wachsen lassen. Starten Sie Scale-Ins bei scale(0.95) mit opacity: 0 (0,9 für größere Pops), niemals scale(0).