Stepper Increment
The number rolls up on increase and down on decrease, so the two buttons never look alike.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useId, useState, type KeyboardEvent } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Stepper Increment
*
* The number rolls in the direction of the change — up on increase, down
* on decrease — so the two buttons never produce the same movement. AAbout this pattern
A counter whose movement carries the sign of the change. The outgoing digit leaves through the top and the new one arrives from the bottom when the value goes up, and the reverse when it goes down, which means a mis-pressed button is visible before the number is even read. The digit is text, so it translates and cross-fades at a constant size on an eased tween: no scaling, and no spring, because a number that overshoots and comes back has already been misread once. Tabular figures keep the row from twitching as the width of the value changes.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Form
A stepper used many times in a row, where direction has to stay legible.