Motion

Overview

Motion at Halide is precise and brief, like an instrument settling on a reading. Things arrive fast and stop exactly; nothing drifts. One curve and three timings cover the product, the docs and the site.

Principles

Three habits keep motion feeling like Halide.

Curve

Our curve leaves fast and lands exactly. Use it for anything that arrives, moves or leaves, in place of a tool's default. Small things take the fast timing, most moves the base, and a panel or a page the slow one. With reduced motion on, every move becomes a short fade.

Signature — Ease in/out
(0.2, 0, 0, 1)
Fast 150ms · Base 300ms · Slow 500ms
Fades take about half as long as the move they go with.
Copy for
In use

The curve on the pieces every screen has: a button pressing, a toggle switching, a side panel opening from its control, a log row arriving, a modal confirming. The cross settles into place the same way.

halide-symbol.svg
Logo
Arriving on screen.
Continue
Button
Pressing a button.
Toggle
Switching on and off.
Carousel
Moving through a set.
Options
Menu
Opening a dropdown.
Modal
Asking for a decision.
Do and don't

Three calls that come up in almost every screen.

Arriving
Do

Fade in, then settle on our curve.

Don’t

Bounce, spring or slide in from off screen.

Alerts
Do

Let the Signal gradient glow once, then hold.

Don’t

Pulse or flash it on a loop.

Comfort
Do

With reduced motion on, use a short fade instead of a move.

Don’t

Animate charts or large panels.

Updated Oct 06, 2026Made with