# Motion

Springs, tweens, reveals and count-ups keyed by an Id, timed by the motion tokens, still when idle.

spring_f32 follows a target on a spring, tween_f32 eases to each new value, count_up counts a number up over the slow step, and Reveal opens and closes every menu, popover, dialog, toast and collapsible. Durations and curves come only from the tokens' motion ladder, and each animation asks for frames until it settles, so an idle window repaints nothing. The web face does not draw it yet.

## Use it

No web face yet: the Mac draws it through `ocean-ui-native`.

Native:

```rust
use ocean_ui_native::{Reveal, RevealFrom, Show};
Reveal { open: d.reveal, from: RevealFrom::SlideUp(8.0) }.show(ui, Id::unique(("gallery.reveal", name)), |ui| {
    Badge { text: name.into(), tone: Tone::Info }.show(ui)
})
```

Cargo feature `base`; since 2026-10-29.

## Props

| Name | Type | Default | What |
|---|---|---|---|
| `open` | `bool` | `—` | Whether the Reveal is open; it opens over the fast step and closes over the instant step. |
| `from` | `RevealFrom` | `—` | How a Reveal arrives: Fade, SlideUp(points), Scale(start) or Collapse. |
| `spring_f32` | `fn(&Ui, Id, f32, &Spring) -> f32` | `—` | A value that follows its target on a spring, such as Spring::DEFAULT (170 / 26 / 1). |
| `tween_f32` | `fn(&Ui, Id, f32, Tween) -> f32` | `—` | A value that eases to each new target over a Tween, never jumping mid-flight. |
| `count_up` | `fn(&Ui, Id, f64) -> f64` | `—` | A number that counts up to its target over the slow step with a cubic ease-out. |

On the Mac: ![Motion, dark](/ui/native/motion-dark.png) ![Motion, light](/ui/native/motion-light.png)

## Accessibility

- Reduced motion follows OCEAN_UI_REDUCE_MOTION=1, else the macOS Reduce motion setting, read at most once a second.
- Under reduced motion every duration is 0 and every spring snaps, so each value lands at once.
- Every animation ends where the screen would be without it, so nothing depends on watching it move.
- A fully closed Reveal draws nothing, so its content leaves the accessibility tree with it.

## Related

- [Collapsible](/ui/components/collapsible.md)
- [Popover](/ui/components/popover.md)
- [KPI](/ui/components/kpi.md)