# Motion

Mechanical, short, and only when something changed. Reduced motion stops the movement and keeps every value.

Foundation · Free · https://tactileui.dev/docs/foundations/motion

## Timings

- **Key press and release**: 70 ms
- **Switch thumb, selector key**: 180 ms slide · 70 ms press
- **Panels and dialogs arriving**: 220 ms rise, 8 px, fade
- **Ladder**: 90 ms, linear
- **Progress**: 300 ms
- **Lamp blink**: 1.2 s, stepped

One curve for all of it, `--tui-ease`: a quick start and a soft landing, like a key hitting its stop. No bounce, no elastic, no parallax, and no hover lifts on panels.

## Feel it

Slide · 180 ms

Motion

## It rose 8 px in 220 ms.

With reduced motion on, it would simply be here.

## Reduced motion

Under `prefers-reduced-motion: reduce`, the kit sets every transition and animation inside `.tui` to zero and stops lamps blinking. Keys still go down, switches still change, dialogs still appear. They just arrive without travelling. No information is carried by movement alone.

## What it costs

Anything that moves on its own (a lamp breathing, an aurora drifting) pauses off screen and in a hidden tab. It never moves a blurred layer: a `blur()` redrawn every frame is the heaviest thing a page can ask of a phone. The softness goes into the gradient instead. Each one is checked with the graphics card switched off, where it still holds 60 frames a second on less than one core.

## The full law

This page is a summary in plain words. The brain holds the law itself, in `motion.md`, written for an agent to follow. It ships with the Kit.