OTP code

A one time code card with split boxes and no confirm button. The last digit starts the check: the boxes ripple, then the card glides into a verified confirmation, or the boxes shake red and clear.

Forms, type, Motion

Install

npm i clsx motion tailwind-merge && curl -o components/otp-code.tsx https://motion-brew.com/r/otp-code.tsx

One self contained file for React and Tailwind CSS: otp-code.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { OtpCode } from "@/components/otp-code";

export default function Verify() {
  return (
    <OtpCode
      length={6}
      channel="email"
      destination={user.email}
      verify={async (code) => (await api.verifyCode(code)).ok}
      onVerified={() => router.push("/app")}
      onResend={() => api.sendCode()}
    />
  );
}

Props

Prop	Type	Default	Description
length	number	6	Digits, 3 to 8
channel	"email" \	"phone"	"email"	Changes the icon and the copy
destination	string	a sample address	Where the code went
maskDestination	boolean	true	Shows jo•••@lumen.app or +1 ••• ••• 0182
split	boolean	true	Two groups of boxes (from 4 digits)
mask	boolean	false	Dots instead of digits
resendAfter	number	30	Seconds before a new code can be sent
verify	(code) => boolean \	Promise<boolean>	every code passes	Return true when the code is right
onVerified	(code) => void		Called once a code passes
onResend	() => void \	Promise<void>		Called by Resend code
onContinue	() => void		The confirmation's main button
continueLabel	string	"Continue"	Its label
onRememberDevice	(remember) => void		The confirmation's Remember this device switch
autoFocus	boolean	false	Focus the boxes when the card scrolls into view; for a page that is only this step
className	string		Placement and width

More forms

Auth card: Sign in and sign up in one card.
File drop: A drag and drop uploader.
Voice prompt: An AI composer you can talk to.
Amount slider: Drag the grip thumb and the amount rolls like an odometer while the monthly payment works itself out.

All animated react form components