Motion

Reusable across products

These generic tokens power Capture workspace sidebar, page-section, card, and activity entrances, and the Optimize app shell, dashboards, and tables. They are part of Stylus and can be added anywhere a short, sequential entrance or state transition improves hierarchy.

Cascade motion

One entrance, three speeds. Choose the duration that matches the visual weight of the surface, then cascade elements in reading order.

| Utility | Duration | Use for | | ------------------------ | -------- | ---------------------------------------------- | | animate-cascade-in-fast | 160ms | Sidebar and nav-rail items | | animate-cascade-in | 200ms | Mid-weight chrome | | animate-cascade-in-slow | 280ms | Page headers, content frames, rows, and cards |

Each one fades in while rising the settle distance, on the shared ease-out curve, with animation-fill-mode: backwards so a delayed item waits its turn invisible rather than flashing first.

| Token | Value | CSS variable | | --------------- | ----------------------------- | -------------------------------- | | Ease out | cubic-bezier(0, 0, 0.58, 1) | --motion-cascade-ease | | Settle distance | 6px | --motion-cascade-distance | | Stagger | 40ms | --motion-cascade-stagger |

duration-cascade-fast, duration-cascade, duration-cascade-slow, and ease-cascade are also available as transition utilities, for state changes that are not entrances.

<div className="animate-cascade-in-slow motion-reduce:animate-none" style={{ animationDelay: '40ms' }} />

Do not build the entrance out of animate-in slide-in-from-top-*

tailwindcss-animate compiles a slide value into --tw-enter-translate-y: -<value>. A bare minus in front of var() is invalid CSS, so pointing that utility at the settle distance silently drops the transform and leaves a fade with no movement. animate-cascade-in* negates the token with calc() instead.

Reduced motion is handled twice over: the shared class constants carry motion-reduce:animate-none, and global.css disables animate-cascade-in* under prefers-reduced-motion: reduce for anyone using the utility directly.

Helpers

stylus-ui/Motion ships the cascade as an API, not just as tokens. Reach for it rather than pairing a class with a delay by hand.

| Export | Use for | | --- | --- | | getCascadeMotionProps(index, { track }) | One step of a cascade, as a spreadable { className, style }. Returning both together is the point — a fast item cannot end up with a default item's delay. | | createCascadeSequence({ startIndex, track, enabled }) | A run of elements whose presence is conditional. next() takes the step where the element renders, so an item that does not render does not leave a gap. | | getCascadeCollectionMotionProps(index, { startIndex }) | Rows and cards. Clamps a long list into one short window, so a hundred items finish when five would. | | useEntranceMotion(surface) | Play the entrance on the first visit of a browser session and stay quiet on every return. | | getCascadeRowMotionProps() (from stylus-ui/DataTable) | A DataTable's rows — spread it straight onto the table. |

Call the sequence during render

createCascadeSequence relies on one thing: next() running in the component's own render, in source order, which is how JSX evaluates props. Never call it from a callback, an effect, or a child component. Where several mutually exclusive branches share one step, read it with peekIndex() instead of taking it once per branch.