Animated React form components
Verify flow
Connect, check, verified: a segmented bar fills, a highlight slides down the checks as each one passes, and a green seal bursts in when you are connected.
Forms, timeline, Motion + GSAP
Install
npm i @gsap/react clsx gsap lucide-react motion tailwind-merge && curl -o components/verify-flow.tsx https://motion-brew.com/r/verify-flow.tsxOne self contained file for React and Tailwind CSS: verify-flow.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { VerifyFlow } from "@/components/verify-flow";
export default function Verify({ stage, passed }: { stage: "waiting" | "checking" | "done"; passed: number }) {
return (
<VerifyFlow
stage={stage}
completed={passed}
provider="GitHub"
checks={["Account age", "Two-factor enabled", "Public activity"]}
destination="Acme"
onSignIn={() => window.open("/auth/github")}
onContinue={() => (window.location.href = "/app")}
/>
);
}Props
| Prop | Type | Default | Description | ||
|---|---|---|---|---|---|
| stage | "waiting" \ | "checking" \ | "done" | Current stage; unset runs the demo | |
| completed | number | Checks passed so far; the next one is running | |||
| checks | string[] | three checks | Checks to run | ||
| title | string | "Verify your account" | Card title | ||
| provider | string | "GitHub" | Provider on the sign-in row | ||
| providerIcon | ReactNode | GitHub mark | Provider icon | ||
| onSignIn | () => void | Sign-in button pressed | |||
| destination | string | "Acme" | Named on the Continue button | ||
| redirectSeconds | number | 5 | Seconds before onContinue fires on its own | ||
| onContinue | () => void | Continue pressed, or the countdown ran out | |||
| loop | boolean | false | Demo only: start over after finishing | ||
| accent | string | "#269a5a" | Progress and passed-check color | ||
| className | string | Classes on the card |
More forms
- Morph search: A search pill that lifts into a card.
- Rolling stepper: A stepper whose digits roll like an odometer.
- 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.