触发方式

详情入场自动播放一次；点击或按 Enter / 空格重播。移动指针只影响附近笔画，移开平滑恢复；方向键逐字体验，Escape 收回。触屏可拖动或点按文字。

起点与终点

同一组字形从强模糊与透明度阈值生成的液团中逐渐显现，字母以 50ms 基准错峰轻微上移；没有独立彩带、压扁、旋转或回弹。字标形成后说明文字淡入；引线不覆盖加载阶段。

进入与退出

入场完成后保持清晰字标。移开指针只让局部透镜与形变平滑消退，不重新运行入场；点击或播放按钮才从头重播。

时序

完整入场 1600 ms；延迟 0 ms。目录悬停、聚焦或手机 Preview 重播，完成后短暂停留。

重复操作与打断

暂停冻结入场与局部恢复；继续接续当前时钟。目录离开且失焦、离屏或后台时停止。临时指针、换色与进度不写入配置。

内容与参数

文字 "tuneshape"；字号 210px；形变强度 1；交互范围 100px；网格 true；标注 true。1280 × 720 参考画布，等比适配。

配色与文案

字形颜色 #9864c7；背景 #f1f1f1；字重 600；辅文「Shape the way things move.」。网格、标签与辅文按实际背景明暗切换，默认与网站预览共用 #f1f1f1。

减少动态效果

直接显示完整可读字标、网格与标注，关闭液态入场、指针融化和目录循环。

默认配置

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

{
  "schemaVersion": 2,
  "recipeId": "gooey-wordmark",
  "durationMs": 1600,
  "delayMs": 0,
  "easing": [
    0.22,
    1,
    0.36,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "typography": {
    "kind": "gooey-wordmark",
    "text": "tuneshape",
    "fontSize": 210,
    "fontWeight": 600,
    "color": "#9864c7",
    "intensity": 1,
    "radius": 100,
    "grid": true,
    "annotations": true,
    "backgroundColor": "#f1f1f1",
    "caption": "Shape the way things move."
  }
}

源码与复用

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

用于自己的项目

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

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