mortspace/playcaptcha

# playcaptcha 一款抓娃娃机式的验证码。 它会要求你抓取一个特定的玩具。你可以通过操作杆（或方向键）控制爪子，按下红色按钮，爪子就会潜下去抓住它下方的任何东西。将抓到的玩具运到投递口并扔进去。如果玩具正确，你就通过了验证；如果玩具错误，它会被盖子弹开并退回到玩具堆里。 它背后没有物理引擎，仅仅是在一个 rAF 循环中运行的阻尼弹簧和脚本化阶段。React state 仅在阶段发生变化时才会改变，其余部分都是通过 refs 写入的 transform，因此即使在性能较弱的设备上也能保持流畅。 显而易见但仍需说明：这只用于验证某人是否在*玩*，而不是验证他们的身份。请将其放在你真正的安全验证之前，不要用它来替代它们。 在线体验：https://feralui.vercel.app/#/captcha 这是 [FeralUI](https://github.com/mortspace/feralui) 的一部分。 ## 设置 ``` npm install playcaptcha ``` 然后将 `assets/` 文件夹复制到你的应用提供静态文件服务的目录中。默认情况下，该组件会在 `/toys/` 路径下查找玩具渲染图，并在 `/playcaptcha.svg` 查找 logo，你可以通过 `assetBase` 修改这些路径。 ``` import { ClawCaptcha } from 'playcaptcha' import 'playcaptcha/clawcaptcha.css' unlock()} /> ``` 不提供 `target` 属性的话，每次挂载都会要求抓取不同的随机玩具。你也可以固定一个： ``` unlock()} /> ``` 12 个玩具 ID：duck、bear、panda、bunny、dino、penguin、fox、frog、whale、cat、puppy、unicorn。 其他 props：`title`（标题）、`assetBase`、`className`。仅此而已。 ## 主题 在任何祖先元素上设置 CSS 变量： ``` :root { --clawcap-bg: #ffffff; /* card */ --clawcap-ink: #1c1c1e; /* text */ --clawcap-muted: #8a8a8e; --clawcap-accent: #1c1c1e; /* dialog button + focus ring */ --clawcap-action: #ff5159; /* the big red button */ } ``` 键盘可以完成所有操作（方向键 + 空格/回车键），操作杆是一个真实的 slider role，并且 prefers-reduced-motion 会将装饰性内容（进场翻滚、五彩纸屑、光环脉冲）替换为瞬间的状态切换。 MIT 许可证。玩具渲染图位于 assets/toys 目录下。

标签：FeralUI, React, Syscall, Syscalls, Web开发, 人机验证, 前端组件, 数据可视化, 暗色界面, 游戏化验证码, 自动化攻击