黏性搜索输入：交互规则、默认参数与动效说明

触发方式

点击搜索胶囊展开并聚焦输入；空值离焦时收合，已有文字时保留展开。点击分离的图标按钮或 Escape 清空收合，Enter 在组件内确认输入；不请求远程搜索。

起点与终点

占位文字 "Search..."，默认内容 ""。宽 115px → 200px，展开偏移 50px，高度 40px，黏性模糊 5px；底色 #929292、文字色 #ffffff。

时序

弹簧响应基准 400 ms，回弹 0.25；保留当前运动位置与速度后转向。滤镜只作用于背景表面，文字、焦点环和按钮保持清晰。

进入与退出

展开时胶囊拉长并移向一侧，分离的图标浮出；收合时返回初始位置并清空临时输入。

重复操作与打断

暂停、预览隐藏和页面进入后台时冻结当前时钟，继续从当前进度接续。更改内容和常用参数同步预览、说明、Motion、JSON 与导出。焦点、实际输入、当前选择、播放进度和观察倍速不写入配置。

减少动态效果

系统要求减少动态效果时直接呈现可读文字或目标状态，保留原生输入、菜单、焦点与键盘操作，不自动循环。

默认配置

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

{
  "schemaVersion": 2,
  "recipeId": "gooey-input",
  "durationMs": 400,
  "delayMs": 0,
  "easing": [
    0.22,
    1,
    0.36,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "gooeyInput": {
    "placeholder": "Search...",
    "defaultValue": "",
    "collapsedWidth": 115,
    "expandedWidth": 200,
    "expandedOffset": 50,
    "blur": 5,
    "height": 40,
    "bounce": 0.25,
    "backgroundColor": "#929292",
    "textColor": "#ffffff",
    "disabled": false
  }
}

源码与复用

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

用于自己的项目

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

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