---
title: Motion
description: Quiet motion for interfaces. Primitives and recipes you can add and reshape.
group: Get Started
order: 1
---

Motion that stays out of the way. Preview a piece here, copy the code, then shape it around your project.

## All Motion

- [Aurora](https://ui.arctis.sh/motion/aurora) — WebGL aurora field with tunable color stops, speed, amplitude, and blend.
- [Beam](https://ui.arctis.sh/motion/beam) — Soft edge light that travels around an outline on its own.
- [Contour](https://ui.arctis.sh/motion/contour) — Drifting topographic isolines for quiet map-like fields.
- [Dots](https://ui.arctis.sh/motion/dots) — Twinkling dot field with density fade and live controls.
- [Flicker](https://ui.arctis.sh/motion/flicker) — Twinkling square field with density fade and live controls.
- [Flux](https://ui.arctis.sh/motion/flux) — Letters peel out and the next phrase settles in.
- [Lamina](https://ui.arctis.sh/motion/lamina) — Stacked translucent wave sheets with soft pointer shift.
- [Magnetic](https://ui.arctis.sh/motion/magnetic) — Cursor pulls the control toward it, then snaps back.
- [Mask](https://ui.arctis.sh/motion/mask) — WebGL fluid trail that melts a cover to reveal content underneath.
- [Moire](https://ui.arctis.sh/motion/moire) — Overlapping wave grids that drift into interference fringes.
- [Morph](https://ui.arctis.sh/motion/morph) — Soft GPU melt between images on click.
- [Orbit](https://ui.arctis.sh/motion/orbit) — Icons or images riding a soft diagonal ellipse.
- [Parallax](https://ui.arctis.sh/motion/parallax) — Layered depth on scroll, tight and controlled.
- [Progress](https://ui.arctis.sh/motion/progress) — Thin scroll line under the nav, empty left to full right.
- [Reveal](https://ui.arctis.sh/motion/reveal) — Text that animates in by character, word, or line.
- [Ripple](https://ui.arctis.sh/motion/ripple) — Quiet radial press feedback.
- [Scramble](https://ui.arctis.sh/motion/scramble) — Text that decodes quietly into place.
- [Sheen](https://ui.arctis.sh/motion/sheen) — Liquid metal surface with a pointer-driven specular.
- [Split Flap](https://ui.arctis.sh/motion/split-flap) — Airport-board letter flips.
- [Tilt](https://ui.arctis.sh/motion/tilt) — Card that tracks the pointer in subtle 3D.
- [Trace](https://ui.arctis.sh/motion/trace) — Border or icon path that draws itself.
- [Typing](https://ui.arctis.sh/motion/typing) — Typewriter text with a quiet caret.

## Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add aurora
```

Add each piece the same way. Files land in `components/motion`. Styles load automatically when you import a motion component.

Aurora, Mask, and Morph also need `ogl`. The CLI installs it when you add those pieces.