SYSTEM_ID: 0x9ef2...
BUILD_VERSION: 1.0.4-BETA
MOTION+ / INTERACTION_LIBRARY / PRIMITIVES
Motion+ ist eine Utility-Surface fuer wiederverwendbare Bewegungs- und Pointer-Muster. Nicht als Effektshow, sondern als Bibliothek fuer echte UI-Situationen.
Die Seite fuehrt jetzt Pointer-Felder, Sequenzlogik, Layer-Decks und klarere Demo-Strecken zusammen. So wird sichtbarer, welche Bewegungen wiederverwendbar und welche nur experimentell sind.
Motion+ ist jetzt nicht nur eine Demo-Sammlung, sondern eine kleine Bewegungsbibliothek fuer Cursor, Sequenzen, Expansion und Touch-Logik.
Utility Surface
Demo Blocks
6
Live pruefbare Interaktionsstrecken.
Systeme
4
Pointer, Gesture, Sequence und Expansion.
Ziel
Reuse
Bausteine statt Einmal-Effekte.
Warum diese Surface existiert
Graphen, Drag-Interaktionen, Ripple, Cursor-Modi und gestaffelte UI-Bewegung.
Verbunden mit
So bleibt sichtbar, wie Utility-Surfaces in echte visuelle Tracks und spaetere Website-Einsaetze zurueckspielen.
Global Control
Mit diesen drei Reglern veraenderst du mehrere Motion-Module gleichzeitig: Druck, Energie und Zeitverhalten werden so als gemeinsames System lesbar.
Wie hell, gespannt und weit die Motion-Systeme lesen.
mittelWie stark Gesten greifen, ziehen und Widerstand aufbauen.
kontrolliertWie schnell Sequenzen wechseln und wie lange Momente halten.
ausgewogenSystem Readout
Der aktuelle Zustand ist balanciert geladen, mit kontrolliertem Widerstand, und sauberem Takt. Dadurch verschieben sich Graph, Swipe-Breite, Pointer-Reichweite, Layer-Spannung und Sequenztempo gleichzeitig.
Swipe Width
116px
breitere oder engere Gestenzone
Cadence
2.0s
Ablauf pro Sequenzschritt
Pointer Range
43
Reichweite des Fokusfelds
Deck Tension
25
Abstand und Rotation im Kartenstapel
Motion Stack
Gute UI-Motion braucht eine erkennbare Architektur. Diese vier Ebenen sorgen dafuer, dass Bewegung konsistent wirkt und nicht bei jedem Modul neu beginnt.
01
PointerMagnetismus, Fokuswechsel und gezielte Cursor-Modi fuer Premium-UI.
02
GestureSwipe, Zugwiderstand und klare Rueckmeldungen bei mobilen Arbeitsflaechen.
03
SequenceGestaffelte Listen, gestreckte Delays und gezielte Aktivierung von Blickachsen.
04
ExpansionShared Layouts, Layer-Wechsel und zusammenhaengende Fokus-Momente.
Cadence System
Statt alles gleichzeitig zu aktivieren, arbeitet die Sequenz mit Signal, Follow, Hold und Release. Das macht Bewegung laenger lesbar.
Signal
Ein Element hebt sich frueh ab und setzt die erste Blickachse.
Follow
Der zweite Layer bestaetigt Richtung und Timing.
Hold
Der Moment bleibt lange genug lesbar, bevor die naechste Aktion folgt.
Release
Die Szene laesst kontrolliert los statt hart abzubrechen.
01 / Signal Graph
Die Kurve zeigt nicht nur den aktuellen Verlauf, sondern auch eine ruhigere Baseline. So wird sofort lesbar, wie sehr die aktive Linie in den Vordergrund tritt.
Jun
Aktiv
210
Vergleich
170
02 / Swipe Actions
SwipeRows pruefen, wie Touch-Aktionen schnell, lesbar und ohne uebertriebene Mechanik freigelegt werden koennen.
Swipe oeffnet schnelle Folgeaktion.
Archivieren oder in den naechsten Pass ziehen.
Touch-Geste statt verstecktem Overflow-Menue.
03 / Dialog + Ripple
Die Karte springt nicht hart in einen Dialog, sondern morpht in eine groessere Detailansicht. Der Ripple setzt dabei den Klick sauber sichtbar.
Ripple und Morph in eine Detailflaeche.
04 / Staggered Feed
Gestaffelte Listen helfen dabei, Feeds und Event-Reihen lesbarer zu machen. Der magnetische Cursor verstaerkt dabei die Naehe zum aktiven Element.
05 / Pointer Field
Im Pointer-Feld reagieren Knoten nicht nur binär, sondern graduell. Das macht Fokus spuerbar, ohne dass die Szene auseinanderfaellt.
06 / Layer Deck
Das Layer-Deck zeigt, wie aktive, passive und reserveartige Flaechen in einer Szene zusammenarbeiten koennen, statt alle gleichzeitig laut zu sein.