验证码输入验证

胶囊展开为六位验证码输入框，收拢验证后呈现错误摇动或绿色成功反馈。

面板形变六框架TypeScriptGSAP

演示

点击 Enter code，输入 123456 体验成功；其他六位数字触发错误动效。校验仅为本地演示。

交互预览

点击 Enter code，输入 123456 体验成功；其他六位数字触发错误动效。校验仅为本地演示。

npm install react react-dom gsap@3.12.7

将代码包中的四个文件放在同一目录。样式和字体已包含，由所选框架的构建工具编译入口文件。

上方安装命令会自动添加这些依赖。如果手动复制源码，请自行安装。

npm install react react-dom gsap@3.12.7

OtpVerification.tsx

正在加载代码…

App.tsx

import { OtpVerification } from "./OtpVerification";

export default function App() {
  return <OtpVerification />;
}

共用原生核心处理交互，各框架独立挂载、更新和销毁实例。

当前使用本地演示校验。在真实认证场景中使用时，请接入自己的服务端验证。

正在加载提示词…

属性	类型	默认值
`options.height` 场景的建议高度，内容较多时布局会相应延展。	`number`	`510`
`options.reducedMotion` 覆盖系统的减少动态效果偏好，同时保留完整交互状态。	`boolean`
`options.autoPlay` 重播参考视频中错误验证码再输入正确验证码的流程。	`boolean`	`false`
`options.onReplayComplete` 参考演示流程结束时触发。	`() => void`