Getting Started
Templates
Components
Special Animations
Text Animations
Backgrounds
Animation only triggers when hovering over the card. Random digits generated each time.
Each user's self-serve multifactor settings are enforced automatically during sign-in.
import ClerkOTP from "@/components/eldoraui/clerk-otp"<ClerkOTP
delay={3500}
cardTitle="Multifactor Authentication"
cardDescription="Each user's self-serve multifactor settings are enforced automatically during sign-in."
whileHover={false}
/><ClerkOTP
delay={3500}
cardTitle="Hover to Animate"
cardDescription="Animation only triggers when hovering over the card."
whileHover={true}
/>| Prop | Type | Default | Description |
|---|---|---|---|
delay | number | 3500 | Time interval (in ms) after which the OTP animation resets |
cardTitle | string | "Multifactor Authentication" | Title displayed at the bottom of the card |
cardDescription | string | "Each user's self-serve multifactor settings are enforced automatically during sign-in." | Description text displayed below the title |
whileHover | boolean | false | When true, animations only trigger on hover. When false, animations run continuously |
This component was inspired by the OTP input animation on Clerk's official website.