Animated OTP input for React

Six code cells, spinning arcs, one check, and the page behind unlocks.

Get the code · $3React · Tailwind · TypeScript
Step-Up OTP Gate, preview

Use it in Next.js

"use client";
import { StepUpGate } from "@/components/StepUpGate";

export default function Billing() {
  return (
    <StepUpGate onVerify={(code) => verifyCode(code)} onVerified={() => console.log("unlocked")}>
      <BillingPage />
    </StepUpGate>
  );
}

Install

  1. Copy from the zipPut react/src/components + react/src/data into src/, then npm i framer-motion.
  2. Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

children
the page that stays frosted
onVerify
check the code, resolve true
length
number of cells
onResend
resend button

Questions

Does the OTP gate work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Does it support SMS autofill?

It shows a "From Messages" chip with the code you pass as autofillCode, the way iOS suggests it.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.