Skip to content

Motion

Motion gallery

What moves in Echo, by the component it moves in. Some of it is an item you install on its own; most of it comes built into the components you already use. Either way it arrives with its sound, its keyboard path and its reduced-motion fallback.

Buttons

Real HardwareButtons at rest; while the state changes, one shape becomes several and flows back.

  • Press

    A key switch: it gives at a detent, clicks as it bottoms out, and comes home faster than it went down.

    Built in HardwareButton, Kbd, LedKey, Tag, Pagination, Checkbox, RadioGroup, NumberField, and the triggers and keys of Select, Menu, Sheet, Modal and Toast. HardwareButton docs

  • Latch

    Press it on and the cap goes down and stays there; press it again and it springs back up.

    Built in Toggle, ToggleGroup. Toggle docs

  • Hold

    Lean on it and the plastic pours in under your finger; let go early and it drains away.

    Built in HoldButton. HoldButton docs

  • Morph

    The base: wrap your own buttons, render any state, and the old buttons flow into the new.

    In Morph and HardwareButton

    npx echo-ui-cli add morph

  • DoneButton

    The button divides into the state it reached and its own undo.

    In DoneButton

    npx echo-ui-cli add done-button

  • ConfirmButton

    The second press appears where your hand already is, then says what happened.

    In ConfirmButton

    npx echo-ui-cli add confirm-button

  • ActionFan

    Choices bud out of the action they belong to, and fold back in.

    In ActionFan

    npx echo-ui-cli add action-fan

  • SaveButton

    The button becomes its own progress, then its own answer, then itself again.

    In SaveButton

    npx echo-ui-cli add save-button

Hands and light

The surface answers before you touch it: your pointer is the light, and the caps lean toward you.

  • LightSource

    Your pointer is the light: every cap's shine turns toward you and its shadow falls away.

    In LightSource and HardwareButton

    npx echo-ui-cli add light-source

  • Magnetic

    The buttons feel your hand before you touch them, and lean toward it; the nearest leans most.

    In Magnetic and HardwareButton

    npx echo-ui-cli add magnetic

Timers and recorders

Buttons that are also clocks and meters: the cap fills, drains and counts.

  • Timer

    Opens into durations; the others run into the one you pick, which drains as it runs and rings.

    In Timer

    npx echo-ui-cli add timer

  • Stopwatch

    Start buds a Lap; each lap drops into the count. Pause turns Lap into Reset.

    In Stopwatch

    npx echo-ui-cli add stopwatch

  • VoiceNote

    Your voice swells the Stop button; stop, and the take becomes a note that fills as it plays.

    In VoiceNote

    npx echo-ui-cli add voice-note

Counts and readouts

Numbers that travel to their value, and drops that carry cause to effect.

  • AddToBag

    A drop buds out of the button and lands in the count, so the eye follows what you added.

    In AddToBag

    npx echo-ui-cli add add-to-bag

  • useBudOff

    The drop on its own: from any element into any other, which swells as it lands.

    In useBudOff and CountBadge

    npx echo-ui-cli add bud-off
  • 1111000022224444

    SplitFlap

    A readout that turns over flap by flap: fast when it's far, slow on the last one, every flap audible.

    In SplitFlap

    npx echo-ui-cli add split-flap
  • 216rps
    Requests
    18Floor

    useRoll

    The flaps' drum without the flaps: StatTile, LcdChip and NumberField digits step through the ones in between when you pass roll.

    In StatTile, LcdChip, NumberField and SplitFlap

    npx echo-ui-cli add roll
  • Tank
    x

    Slosh

    When the reading moves, the level travels there and settles with a small slosh, like a liquid.

    Built in Meter. Meter docs

  • Ballistics

    It jumps up with a loud sound and drifts down after it, with the peak hanging on above for a moment.

    Built in LevelMeter. LevelMeter docs

Fields and choices

Wells that take a keystroke, selections that flow, and an error you can feel.

  • Typing

    The well presses in when you focus it, and each keystroke lands with a small strike.

    Built in Field, Textarea, OtpField, NumberField. Field docs

  • Error shake

    A new error shoves the field sideways; it swings back through and settles on a spring, like a latch that won't take the key.

    Built in Field. Field docs

  • FocusBreakRest

    Liquid highlight

    The selection travels as a drop: it stretches toward where it's going and settles there.

    Built in Segmented, Tabs, Select and Menu highlights. Segmented docs

  • Bud

    Each thing you choose swells out of the text line into its own tag.

    Built in Combobox, TagsInput. Combobox docs

  • Size
    SmallMedium

    Pip

    The chosen card's pip drops into its hole and a light runs down its edge.

    Built in ChoiceCards, RadioGroup. ChoiceCards docs

Switches

Things with a detent: they resist, give way and spring to where they belong.

  • Springs

    Dragged, it keeps your speed; let go, it springs to where it belongs, and past the end it resists.

    Built in Switch, Slider. Switch docs

  • Detents

    Every step clicks and the cap settles onto it; turned past the end, it gives a little and springs back.

    Built in Knob. Knob docs

  • Off · pull the cord

    PullCord

    A switch you pull: the cord stretches, clicks at the detent, and the light comes on as you let go.

    In PullCord and Switch

    npx echo-ui-cli add pull-cord

Surfaces and stacks

Slabs, panels, cards and rows that give under your hand and keep the speed you gave them.

  • Ripple

    Press the surface and a wave runs out from your finger; hold longer to press deeper.

    In Ripple, Panel and Card

    npx echo-ui-cli add ripple

  • The whole card is one button.

    Press through

    The whole card is one button: it lifts as you reach, sinks a pixel as you press, and a wave runs out from your finger.

    Built in Card, and any Panel with pressable. Card docs

  • Weekly report
    Invoice 0142
    Standup notes

    Swipe

    Swipe a row and it slides aside to show what's behind it; let go short and it springs back. Tab gets there too.

    Built in Item. Item docs

  • MorningStand-up at 9:30
    ReviewMotion picks
    FocusTwo hours, no calls
    EveningRecord the demo
    1 of 4

    ThrowStack

    Flick the top card: it keeps your speed, spins from where you held it, and tucks in underneath.

    In ThrowStack and Toast

    npx echo-ui-cli add throw-stack

  • Pile and flick

    Toasts pile like cards and fan out under your hand; flick one and it leaves at the speed you threw it, turning.

    Built in Toaster. Toast docs

  • Bloom

    A panel starts as a small pill and swells into itself, wider first and then taller, like a drop spreading. Closing gathers it back.

    Built in Modal, AlertDialog, Command. Modal docs