用途:cursor-puppet 是一个动态图形基础组件,用于渲染一个仿 macOS 风格的假鼠标光标,让它沿定义好的路径移动,并在特定帧执行点击手势。其目的是让产品演示看起来像“用户真的在使用这个产品”,而不是“我们做了一段动态图形”。
主要能力:支持通过参数配置光标 SVG 来源(cursor_svg_src)与尺寸(cursor_size_px);通过 path 数组定义关键帧位置(frame、x、y)实现移动;通过 movement_easing 指定贝塞尔缓动;通过 clicks 数组在指定帧触发点击,包含 scale_overshoot(缩放过冲)与 recover_frames(恢复帧数),并可选 click_target_id 用于视觉同步;z_index 控制层级,使其始终位于最上层。
行为:按帧在路径插值位置渲染光标 SVG;沿路径关键帧使用贝塞尔缓动移动;在点击帧对光标做缩放弹跳(1.0 → 1.4 → 1.0),持续 recover_frames 帧;可选在 click_target_id 上触发视觉效果(如按钮按下状态)。
风格包覆盖:SP-F(product-demo)为其典型用法,与 prompt-typewriter(A15 原型)搭配使用。
质量检查:移动使用贝塞尔而非线性,显得更自然;点击缩放弹跳可见(过冲至少 1.3 倍);光标尺寸较小(16-20px),不应过大;光标渲染在所有其他内容之上。
失败模式:移动呈线性或机械感,应改用贝塞尔;点击不可见,应把过冲提高到 1.4 以上;光标层级低于其他图层,应确保 z-index 最高;光标 SVG 渲染像素化,应在渲染尺寸下使用矢量 SVG 而非位图 PNG。
限制:资料未提供安装命令、依赖环境、平台支持、收费或价格等信息,暂未提供。