Skip to content

NsGravityInput 重力崩塌输入框

看起来是一个普通的输入框,但输入的文字受到重力引擎的严格控制。

🎮 交互指南

  1. 文字坍塌:你输入的每一个字符都会像沙子一样掉落到输入框底部。
  2. 视觉混乱:随着字符增多,它们会堆积、滚动、互相碰撞,让你完全无法阅读。
  3. 摇匀重排
    • 手动摇晃:快速在输入框内摇晃你的鼠标,文字会感受到向心力并尝试暂时排成整齐的队列。
    • 一键摇匀:点击底部的“一键摇匀”按钮,文字会进入高能重排状态。
  4. 勉强看清:在“重排模式”下,文字会变为绿色并努力飞回它们原本该在的位置。一旦重排结束,重力将再次统治一切。

绝密信息输入

输入完成后请立即摇匀以核对信息。

在此输入您的银行卡密码(反正也看不清)...
Engine Status
● 重排模式|● 载荷: 0 字
后台实际接收值:
等待输入...

Props

  • modelValue: string(绑定值)
  • title: string(标题)
  • subtitle: string(副标题)
  • gravity: number(重力加速度,默认 1200
  • bounciness: number(弹性系数 0-1,默认 0.4
  • fontSize: number(文字大小,默认 24
  • revealDurationMs: number(重排显示时长,默认 1500
  • shakePower: number(摇晃力度,默认 800

Events

  • shake: 触发摇晃时
  • reveal: 进入重排模式时

Built with VitePress