A free web demo — play it in your browser, no install. 赛车头盔动态人像 Agent Skill · Independent WebGL helmet ghost, auto reveal, pointer ripple and subtle pose
Vote and save it — free account with email or sign in with GitHub
Made this, @archerthegoat? See how many people played it → or use email
📅 Three new games every day, no account needed · Play today’s three →
GitHub may ask you to sign in, then to let VibeCruiser “Verify your GitHub identity” and “Act on your behalf”. We only read your profile and email, and never post anything.
No account needed to save ♥ or react 🔥: they’re under the game. Or vote with email.
Open the live demo Source on GitHub为真实人像制作有电影感的赛车头盔显影,并把完整方法封装成 Agent Skill
截取自 Archer 的线上实现——进入网站并移动鼠标可以看到完整交互
Racing Helmet Motion 教 Agent 把这项效果做成一组彼此配准、各自独立的图层。人物保持真实可辨,头盔虚影从头顶逐渐显现到面罩与下颌;自动流动无需操作也会继续,鼠标水纹则只在指针附近响应,不会把自动动效顶掉。
透明背景的彩色头盔图,或授权模型的渲染图。 与彩色头盔轮廓和视角一致的透明虚影或线框图。
渲染器把自动动效、鼠标响应、头盔虚影和人物姿态放在不同时间线上。鼠标开始移动后,画面依然能够保持流动,关键就在这层分离。
校准素材——先用静态合成对齐头顶、面罩、面部开口和下颌。 建立头盔虚影——先做出由上至下的微弱存在感,再加入更明显的流动。 分别调整两种显影——单独调整自动流动与鼠标水纹,最后再检查二者同时出现。 接入页面生命周期——处理静态降级、减少动态、暂停、离屏、页面隐藏与恢复。 在真实浏览器里连续检查——观察空闲、鼠标移动、动效重叠、移出、暂停和恢复。
详细规则分别放在动效契约、素材配准和接入与验收中。
参考渲染器使用原生 JavaScript 和 WebGL,不依赖第三方运行库。现有配准参数对应仓库参考布局,换用新素材时仍需重新校准。
Built something like this? Submit your vibe — free account, takes a minute. How listing works.
Claim it: create a free account, then press CLAIM THIS in the cruiser. Put the badge below in your README or on your demo page first; that link is how we know it's yours.
Your project is on the cruise, loaded live from your own site. Put the badge in your README or on the demo page: it shows your live play count, it links back to this page, and everyone who lands here is one click from running the real thing.