打开 ↗6 位验证码输入框 Six-Digit OTP Input
一个真实的 input 伪装成 6 个格子：键入时蓝色高亮逐格前移、竖线光标闪烁，粘贴或短信自动填充时数字以 40ms 间隔依次弹入；输错时整排衰减摇晃 3 下、变红，再从右往左倒退清空回到第一格；输对时 6 格用 linear() 弹簧向中间合拢成绿色圆，画出白色对勾。
钩子：六格验证码：粘贴一次铺满，输错整排摇头，输对六格合拢成一个对勾
OPUS SHOWCASES · INNOVATION
创新方向实做
动效 prompt 库按评审意见新加了“创新方向”：能玩、能拖、能探索的创意编程与交互设计。每种形态挑 1 道题，共 12 道，交给 Claude Opus 5.5 照题实做，验证这些题能做、而且能做好。每张卡片附原题和实做者对题目的修改意见，用来改进题库。已完成 1 / 12。
INNOVATION PROMPTS · BUILT · CLAUDE OPUS 5.5
🧪 创新方向实做1 个
从 40 道创新题里每种形态挑 1 道：SVG 小游戏、Lottie 小游戏、数字玩具、可交互 Lottie、论文讲解、可探索解释、滚动叙事、交互生成艺术、音画交互、交互字体、微交互、着色器艺术。
制作中：SVG 小游戏（折几折、剪几刀再展开：剪口放进 mask 按镜像复用，对称窗花自己长出来）；Lottie 小游戏（不操控主角，只调每台机器 Lottie 的速度、方向和相位，帮姜饼人逃出厂）；数字玩具（四千根钢针的针雕玩具：按出手印，倾斜框子让针像瀑布一样滑回去）；可交互 Lottie（住在网页里的小苔藓：把标题、卡片和按钮当地形，还会坐在你选中的字上）；论文讲解（亲手发射上千个 α 粒子，荧光屏上的闪光一点点累积出 1/sin⁴(θ/2) 曲线）；可探索解释（放下一座吊桥给路网加条捷径，所有人的通勤反而从 65 分钟变成 80 分钟）；滚动叙事（滚动就是血流：你化身红细胞，沿 CSS 运动路径走完肺循环和体循环一整圈）；交互生成艺术（按住鼠标给小岛下雨，水滴冲出河谷，地图实时重绘成老式等高线测绘图）；音画交互（在 Tonnetz 音网上翻三角形：每翻一次只动一个声部，走过的路径就是和声进行）；交互字体（同一套七巧板拼出每个数字：时间一变，七块板子飞过去重拼，平行四边形还得翻面）；着色器艺术（物理着色的肥皂泡：膜厚决定干涉色，重力让顶部变薄发黑，黑了就快破了）。
打开 ↗