> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Motion

> Motion principles, easing and duration tokens, and Tailwind-oriented guidance for productive and expressive animation in Aura.

Motion is more than decoration. It shapes how people experience a product — where to look, what to do next, and how the interface feels. When used with intention, motion reduces cognitive load, signals hierarchy, and reinforces Aura's brand rhythm. In data-heavy UIs, it keeps waiting states purposeful without competing for focus.

## Animation anchors

Every animation in Aura should be tested against three qualities. If motion does not reinforce at least one of these, reconsider whether it is needed.

### Flow

Motion should move with continuity. Elements arrive and leave with a clear sense of direction and connection — no jumps or teleporting. When an element appears, it should grow into place with a natural stagger; when it disappears, it should recede with intention.

**Test:** Can I follow the motion with my eyes without losing my place?

### Calm

Because Aura handles complex, high-stakes data, motion must not compete for the user's focus. Easings do not overshoot, staggers do not drag, and nothing bounces when it should settle. Calm does not mean slow — most motion in Aura is quiet and fast. It should serve the task and then get out of the way. Expressive motion must be earned.

**Test:** Does this still feel good after 8 hours of use?

### Tactile

The interface should feel like something you can reach into. Movement should make the function of interactive elements obvious — buttons snap, panels slide from the edge they belong to, and cards lift when selected. Tactile motion builds intuition so users know what to do without reading labels.

**Test:** Can I tell what's interactive just by how it moves?

## Expressive and productive motion

Every animation in Aura serves one of two roles. Choosing the right role determines how visible, fast, and expressive the motion should be.

| Role           | When to use                                                                  | Character                                                                          |
| :------------- | :--------------------------------------------------------------------------- | :--------------------------------------------------------------------------------- |
| **Productive** | Menus, tooltips, state changes, content fading into place, cards rearranging | Fast, subtle, and functional — often not consciously noticed, but missed if absent |
| **Expressive** | AI generating a response, transitions between views, onboarding sequences    | Slower, more visible — use sparingly to draw attention on purpose                  |

### Guidelines

* Default to **productive** motion for everyday UI.
* Escalate to **expressive** only when the moment carries narrative weight.
* Productive motion keeps the interface feeling responsive and connected without competing for focus.
* Expressive motion gives the system its character — but overuse trains users to ignore it.

## What to animate

Every animation is built from a combination of basic properties. Knowing what you can change helps you make deliberate choices about how an element enters, exits, or transitions between states.

| Property         | Tailwind utilities                                  | Typical use                                                     |
| :--------------- | :-------------------------------------------------- | :-------------------------------------------------------------- |
| **Position**     | `translate-x-*`, `translate-y-*`                    | Entrances, exits, layout transitions — the most common property |
| **Scale**        | `scale-*`                                           | Emphasis, hierarchy, drawing attention                          |
| **Rotation**     | `rotate-*`                                          | Rare in UI; use with restraint                                  |
| **Opacity**      | `opacity-*`                                         | Fades in and out; often combined with position or scale         |
| **Color**        | `transition-colors`, token-backed `bg-*` / `text-*` | State changes, hover feedback, decorative accents               |
| **Mask / morph** | CSS or SVG (no single utility)                      | Expressive disclosure and progressive reveal only               |

### Guidelines

* Combine properties intentionally — opacity plus position creates softer transitions than position alone.
* Animate only the properties that communicate the change. Do not animate everything by default.
* Use token-backed color utilities for color transitions so theming stays consistent.

## Timing

Timing is about when things move and for how long. Well-timed animations feel invisible; poor timing feels sluggish or abrupt.

### Guidelines

* **Duration scales with area.** Small UI elements (a checkbox, a menu item) need very short animations. Large transitions (a full panel or page) need more time. Values are relative to each other, not absolute.
* **Stagger creates rhythm.** When multiple elements animate, offset their timing so they reveal in sequence rather than all at once. Stagger draws attention to certain elements first and choreographs views with many moving parts.
* Exits are often slightly faster than entrances — once the user has made a choice, the UI should clear the way quickly.

### Duration tokens

| Token            | Tailwind utility | Value           | Use                                    |
| :--------------- | :--------------- | :-------------- | :------------------------------------- |
| `duration/short` | `duration-200`   | up to 200ms max | Small components, productive UI        |
| `duration/long`  | `duration-500`   | \~500ms         | Large surfaces, expressive transitions |

### Stagger tokens

| Token             | Tailwind utility | Value | Use                                                       |
| :---------------- | :--------------- | :---- | :-------------------------------------------------------- |
| `stagger/tight`   | `delay-[33ms]`   | 33ms  | Dense lists — e.g. dropdown items revealing one by one    |
| `stagger/default` | `delay-[100]`    | 100ms | Standard grouped reveals                                  |
| `stagger/wide`    | `delay-[133ms]`  | 133ms | Secondary supporting elements that follow primary content |

## Easing

Easing brings a sense of real-world momentum to digital interfaces. Nothing starts or stops instantly — movement needs time to build and slow down. Heavier elements start slower and settle with more weight; lightweight elements respond quickly with less resistance.

### Tokens

| Token           | Tailwind utility | `cubic-bezier`             | Use                                                                          |
| :-------------- | :--------------- | :------------------------- | :--------------------------------------------------------------------------- |
| `ease/standard` | `ease-standard`  | `(0.40, 0.00, 0.15, 1.00)` | Most state changes, repositioning, and transitions within a view             |
| `ease/entrance` | `ease-entrance`  | `(0.00, 0.00, 0.15, 1.00)` | Elements appearing on screen — panels opening, content loading in            |
| `ease/exit`     | `ease-exit`      | `(0.67, 0.00, 0.83, 0.83)` | Elements leaving the screen — dismissals, closings, removals                 |
| `ease/sine`     | `ease-sine`      | `(0.33, 0.00, 0.67, 1.00)` | Opacity fades and subtle color shifts — smooth without dramatic acceleration |

### Pairing guide

| Scenario              | Duration                  | Easing          |
| :-------------------- | :------------------------ | :-------------- |
| Productive entrance   | `duration-200`            | `ease-entrance` |
| Expressive entrance   | `duration-500`            | `ease-entrance` |
| Exit                  | `duration-200` or shorter | `ease-exit`     |
| In-view state change  | `duration-200`            | `ease-standard` |
| Opacity or color only | `duration-200`            | `ease-sine`     |

## Applied examples

<Warning>
  These recipes show how tokens combine in real interactions. They are **reference examples only**, not additional system tokens. Prefer Aura primitives' built-in motion where available; use these patterns only for custom UI.
</Warning>

### Dropdown in (productive)

A dropdown panel drops down while being revealed. List items stagger in one by one as the panel opens, adding flow without slowing the interaction. Total duration: **233ms**.

| Element   | Property     | From → To | Duration | Easing          | Delay         |
| :-------- | :----------- | :-------- | :------- | :-------------- | :------------ |
| Panel     | Position (Y) | 0 → 176   | 200ms    | `ease-entrance` | 33ms          |
| Panel     | Opacity      | 0% → 100% | 100ms    | `ease-sine`     | —             |
| List item | Opacity      | 0% → 100% | 100ms    | `ease-sine`     | 33ms per item |

### Dropdown out (productive)

The panel closes slightly faster than it opens — the user no longer needs to read it. No stagger on list items keeps the exit clean. Button copy fades out and in to confirm the selection, with an accent wipe for tactile feedback. Total duration: **233ms**.

| Element       | Property        | From → To | Duration | Easing      | Delay |
| :------------ | :-------------- | :-------- | :------- | :---------- | :---- |
| Panel         | Position (Y)    | 176 → 0   | 167ms    | `ease-exit` | —     |
| Panel         | Opacity         | 100% → 0% | 67ms     | `ease-sine` | 100ms |
| List item     | Opacity         | 100% → 0% | 100ms    | `ease-sine` | 67ms  |
| Button copy   | Opacity (out)   | 100% → 0% | 100ms    | `ease-sine` | 33ms  |
| Button copy   | Opacity (in)    | 0% → 100% | 100ms    | `ease-sine` | 133ms |
| Button accent | Position (wipe) | -353 → 42 | 433ms    | `ease-sine` | 133ms |

### Graph entrance (expressive)

The main content animates in with a subtle scale and opacity change, arriving quickly and settling into place. Supporting elements follow with a stagger. The graph line draws on a separate, slower timeline so it does not compete with the primary entrance. Total duration: **467ms** (graph line: 1333ms).

| Element             | Property      | From → To     | Duration | Easing          | Delay |
| :------------------ | :------------ | :------------ | :------- | :-------------- | :---- |
| Container           | Scale         | 110% → 100%   | 333ms    | `ease-entrance` | —     |
| Container           | Opacity       | 0% → 100%     | 133ms    | `ease-sine`     | —     |
| Button row          | Position (Y)  | 177 → 157     | 333ms    | `ease-entrance` | 100ms |
| Button row          | Opacity       | 0% → 100%     | 133ms    | `ease-sine`     | 100ms |
| Separator + sources | Position (Y)  | 221.5 → 201.5 | 333ms    | `ease-entrance` | 133ms |
| Separator + sources | Opacity       | 0% → 100%     | 133ms    | `ease-sine`     | 133ms |
| Graph line          | Draw progress | 0 → 100       | 1333ms   | `ease-entrance` | —     |

## Implementation

Use Tailwind utilities mapped to Aura motion tokens. Do not hardcode `cubic-bezier()` values or raw `transition: 0.3s ease` in product code.

### Decision checklist

1. **Role** — Is this productive (default) or expressive (earned)?
2. **Properties** — Which properties communicate the change? Animate only those.
3. **Duration** — Small element (`duration-200`) or large surface (`duration-500`)?
4. **Easing** — Entering (`ease-entrance`), exiting (`ease-exit`), in-view (`ease-standard`), or opacity/color (`ease-sine`)?
5. **Stagger** — Multiple elements? Offset with `stagger/tight`, `stagger/default`, or `stagger/wide`.
6. **Reduced motion** — Respect `prefers-reduced-motion`; disable or shorten non-essential animation.

### Example

<CodeGroup>
  ```tsx Productive entrance — menu panel theme={"languages":{"custom":["/_languages/kuiper.json","../_languages/kuiper.json"]}}
  <div
    className={cn(
      "transition-[transform,opacity] duration-200 ease-entrance delay-[33ms]",
      isOpen
        ? "translate-y-0 opacity-100"
        : "-translate-y-2 opacity-0 pointer-events-none"
    )}
  >
    {children}
  </div>
  ```

  ```tsx Respecting reduced motion theme={"languages":{"custom":["/_languages/kuiper.json","../_languages/kuiper.json"]}}
  <div
    className={cn(
      "transition-[transform,opacity] duration-200 ease-entrance",
      "motion-reduce:transition-none motion-reduce:transform-none",
      isOpen ? "translate-y-0 opacity-100" : "-translate-y-2 opacity-0"
    )}
  >
    {children}
  </div>
  ```
</CodeGroup>

<Note>
  Aura primitives handle motion for most common interactions. For custom interactive elements, pair motion with the signifiers documented in [Interaction states](/aura-design-system/foundations/interaction-states). Ensure focus and state changes remain accessible — see [Accessibility](/aura-design-system/foundations/accessibility).
</Note>