文字悬停图片：交互规则、默认参数与动效说明

触发方式

悬停 github、orocoa 或 star 显示对应图片；移动指针带动图片。Tab 聚焦显示，方向键切换词语，Escape 关闭；触屏点按显示，再次点按或点空白关闭。

起点与终点

图片从不透明度 0、缩放 0.94 进入到不透明度 1、缩放 1。首选位置 above；文字居中排布；旋转后的图片限制在画布边界内，并在文字侧边空间不足时等比缩小。

时序

进入 200 ms，退出 150 ms，固定三次贝塞尔缓出；指针跟随使用最多 160ms 的短过渡。观察倍速只改变运行时钟。

进入与退出

文字离开或失焦后，图片从当前画面淡出并缩回。点按固定的图片保留到再次操作；图片本身不接收指针，不会遮断文字悬停。

重复操作与打断

快速切换直接转向最新词语，不排队。工具栏演示 orocoa 的进入、停留 800ms 和退出；暂停保留实际动画与演示进度，继续时接续。悬停、点按、焦点与观察倍速不写入 JSON。

减少动态效果

直接显示或关闭图片，取消倾斜与动画；键盘、点按及图片内容保持可用。

图片预览设置

位置 above；大小 200px；比例 1；倾斜 12°；跟随 15px；圆角 12px；阴影 true；触发留白 4px。

默认配置

这些数值来自当前维护的默认配置；编辑器草稿和调整后的导出可以不同。

{
  "schemaVersion": 2,
  "recipeId": "hover-preview",
  "durationMs": 200,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "hoverPreview": {
    "imagePosition": "above",
    "exitMs": 150,
    "maxRotation": 12,
    "maxOffset": 15,
    "imageSize": 200,
    "aspect": 1,
    "radius": 12,
    "shadow": true,
    "targetPadding": 4
  }
}

源码与复用

GitHub 对应示例提供公开渲染源码、默认配置和运行入口。复用前请阅读交互说明，并保留随源码附带的第三方与字体许可；完整网页编辑器由独立工程维护。

用于自己的项目

进入编辑器运行真实预览并比较调整；本说明页不另造一份近似演示。把导出用于自己的项目后，重新检查内容、输入、焦点与布局。

目录来源标注：原创实现. 第三方示例保留自己的许可与署名；公开仓库包含全部当前动效的渲染源码；完整编辑器由独立工程维护。