Motion

Afloat is ikada’s motion: the raft takes your weight. A press settles, the release springs back once, and nothing else bounces.

Try it

Live ikada components. Press and hold, then let go. With reduced motion on, the same controls fade instead of moving.

Rules

• Press and release. A press settles the control 1px down and to scale 0.97 in 90ms ease-out and presses the shadow in; letting go returns it on the bob spring.
• Nothing else bounces. Hover is colour plus a lift in the cast shadow (120ms). Menus and table rows do not animate their highlight. Exits are short and plain: popups and toasts 110ms, dialogs 150ms, all ease-out.
• Controls. The switch thumb squishes toward its travel while pressed and slides on snappy. A checkbox bobs once as it fills. The segmented control and tabs share one raised pebble on a recessed tray.
• Success sprouts. StatusGlyph sprout grows the success shape up from its base and sends one ring out, once. Only success and creation sprout.
• Keyboard opens do not animate. A menu, select, popover or dialog opened with a key press skips the transition; ⌘K palettes do not animate at all.
• Reduced motion substitutes, never removes. Every scale becomes 1 and every offset 0, every spring collapses to a 160ms ease-out, and opacity and colour fades stay. data-motion="reduce" on <html> does the same from an app setting.

Springs

Each spring is a duration and a bounce, sampled to a CSS linear() curve at build time, so it runs on the compositor and an interrupted spring needs no JavaScript.

Durations