Animated React form components
Rolling stepper
A stepper whose digits roll like an odometer. Push past the limit and it shakes its head instead of doing nothing.
Forms, press, Motion
Install
npm i clsx lucide-react motion tailwind-merge && curl -o components/rolling-stepper.tsx https://motion-brew.com/r/rolling-stepper.tsxOne self contained file for React and Tailwind CSS: rolling-stepper.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { useState } from "react";
import { RollingStepper } from "@/components/rolling-stepper";
export default function Page() {
const [seats, setSeats] = useState(4);
return <RollingStepper value={seats} onValueChange={setSeats} min={1} max={50} label="Seats" />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | number | 0 | Controlled or starting value |
| onValueChange | (value: number) => void | Called after each step | |
| min / max | number | 0 / 999 | Bounds |
| step | number | 1 | Amount per step |
| spring | SpringOptions | { stiffness: 280, damping: 26, mass: 0.8 } | Digit roll |
| label | string | "Quantity" | Accessible name |
More forms
- Search modal: A search field whose card drops down with a gliding scope control and live counts, recent things as soft cards, a featured top result, highlighted matches and an open hint.
- Message composer: A white rich text composer: a text style menu that pours open, formatting that lights up under the caret, @ mentions, emoji, uploading thumbnails, a voice note timer, an AI polish, scheduled sending with a calendar, and a split send button whose plane flies off.
- OTP code: A one time code card with split boxes and no confirm button.
- Auth card: Sign in and sign up in one card.