Motion & Easing
GateFlow isn't static. It's an intentional interface that uses motion to express weight, focus, and institutional speed.
Cine-Serious Intention
We avoid "bouncy" or playful motion. All transitions use a high-tension cubic-bezier curve that feels intentional, architectural, and reliable.
Staggered Entrances
High-density UI components never appear all at once. We stagger their entrance by 50ms to express "building" the information layer.
Institutional Speed
Fast (150ms) for UI feedback (hover/click); Base (300ms) for page transitions; Slow (500ms) for complex layouts.
The Easing Lab
Test the tension of our institutional curves.
Entrance / Standard
cubic-bezier(0.22, 1, 0.36, 1)Expressive / Smooth
cubic-bezier(0.4, 0, 0.2, 1)Linear (Usage Restricted)
linearCine-Stagger Logic
This is how we build complex operational views. Each item enters with a +50ms delay from its predecessor.
Reduced Motion Protocol
We strictly honor prefers-reduced-motion. When active, all staggered entrances and transforms are replaced with simple, institutional 150ms opacity fades. Security interfaces must remain accessible to all vestibular sensitivities.