{
  "date": "2026-09-24",
  "method": "原始 10 个来自用户视频；新增 90 个是根据公开交互机制自主实现的研究演示，不是官方组件的源码副本或依赖封装。来源是机制参考，具体视觉和应用场景由本项目重新设计。",
  "sources": [
    {
      "name": "Motion · 官方交互示例",
      "url": "https://motion.dev/examples"
    },
    {
      "name": "Aceternity UI · 组件目录",
      "url": "https://ui.aceternity.com/components"
    },
    {
      "name": "React Bits · 动态组件索引",
      "url": "https://www.reactbits.dev/get-started/index"
    },
    {
      "name": "Motion · 拖拽机制",
      "url": "https://motion.dev/docs/react-drag"
    },
    {
      "name": "Motion · 滚动动画",
      "url": "https://motion.dev/docs/scroll"
    },
    {
      "name": "Radix · 交互控件语义",
      "url": "https://www.radix-ui.com/primitives/docs/components"
    },
    {
      "name": "Anime.js · SVG 与路径动画",
      "url": "https://animejs.com/documentation/svg/"
    },
    {
      "name": "Vaul · 抽屉交互",
      "url": "https://vaul.emilkowal.ski/"
    },
    {
      "name": "Sonner · 通知交互",
      "url": "https://sonner.emilkowal.ski/"
    },
    {
      "name": "Build UI · 动画实践",
      "url": "https://buildui.com/recipes"
    },
    {
      "name": "Aceternity · Floating Dock",
      "url": "https://ui.aceternity.com/components/floating-dock"
    },
    {
      "name": "Observable / D3 · 可视化示例",
      "url": "https://observablehq.github.io/notebook-kit/gallery"
    },
    {
      "name": "D3 · Brush 区间选择",
      "url": "https://d3js.org/d3-brush"
    }
  ],
  "components": [
    {
      "slug": "magnetic-dock",
      "title": "磁吸浮动 Dock",
      "category": "navigation",
      "source": {
        "name": "Aceternity · Floating Dock",
        "url": "https://ui.aceternity.com/components/floating-dock"
      },
      "implementation": "距离驱动相邻图标的缩放与上移；离开后弹性归位，键盘聚焦同样响应。"
    },
    {
      "slug": "radial-actions",
      "title": "扇形快捷操作",
      "category": "navigation",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "极坐标定位四个操作点；共享中心展开、错峰进入、选择后收回。"
    },
    {
      "slug": "command-palette",
      "title": "分层命令面板",
      "category": "navigation",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "带本地过滤、活动项与键盘漫游的命令菜单；关闭恢复触发器焦点。"
    },
    {
      "slug": "sliding-mega-menu",
      "title": "共享容器菜单",
      "category": "navigation",
      "source": {
        "name": "Aceternity UI · 组件目录",
        "url": "https://ui.aceternity.com/components"
      },
      "implementation": "菜单同一容器随内容改变高度，内部内容按方向平移进入。"
    },
    {
      "slug": "breadcrumb-fold",
      "title": "路径折叠导航",
      "category": "navigation",
      "source": {
        "name": "Radix · 交互控件语义",
        "url": "https://www.radix-ui.com/primitives/docs/components"
      },
      "implementation": "中间路径以宽度和透明度展开，选中层级裁剪后续路径并保留上下文。"
    },
    {
      "slug": "orbit-tooltip",
      "title": "跟随提示气泡",
      "category": "navigation",
      "source": {
        "name": "Aceternity UI · 组件目录",
        "url": "https://ui.aceternity.com/components"
      },
      "implementation": "锚定头像中心的提示层根据横向偏移旋转；焦点与悬停共享显示状态。"
    },
    {
      "slug": "context-wheel",
      "title": "长按上下文菜单",
      "category": "navigation",
      "source": {
        "name": "Radix · 交互控件语义",
        "url": "https://www.radix-ui.com/primitives/docs/components"
      },
      "implementation": "按事件坐标定位菜单并限制边界；长按与键盘触发使用相同操作状态。"
    },
    {
      "slug": "pill-navigation",
      "title": "胶囊滑块导航",
      "category": "navigation",
      "source": {
        "name": "Build UI · 动画实践",
        "url": "https://buildui.com/recipes"
      },
      "implementation": "测量目标按钮位置，单一背景块插值迁移；内容按切换方向淡入。"
    },
    {
      "slug": "staggered-sidebar",
      "title": "交错侧栏导航",
      "category": "navigation",
      "source": {
        "name": "React Bits · 动态组件索引",
        "url": "https://www.reactbits.dev/get-started/index"
      },
      "implementation": "侧栏宽度与主体位移联动，菜单项按序入场；闭合时移出焦点顺序。"
    },
    {
      "slug": "nested-menu",
      "title": "滑入式多级菜单",
      "category": "navigation",
      "source": {
        "name": "Radix · 交互控件语义",
        "url": "https://www.radix-ui.com/primitives/docs/components"
      },
      "implementation": "同一菜单视口在两级内容之间横向换页，记录层级并恢复父级。"
    },
    {
      "slug": "perspective-card",
      "title": "指针视差卡片",
      "category": "cards",
      "source": {
        "name": "Aceternity UI · 组件目录",
        "url": "https://ui.aceternity.com/components"
      },
      "implementation": "归一化指针坐标映射 rotateX/Y，前景 translateZ；离开回正。"
    },
    {
      "slug": "hologram-card",
      "title": "全息反光卡片",
      "category": "cards",
      "source": {
        "name": "Aceternity UI · 组件目录",
        "url": "https://ui.aceternity.com/components"
      },
      "implementation": "多层渐变的光源位置由指针驱动；固定反射坐标作为选中状态。"
    },
    {
      "slug": "spotlight-card",
      "title": "追光边缘卡片",
      "category": "cards",
      "source": {
        "name": "Aceternity UI · 组件目录",
        "url": "https://ui.aceternity.com/components"
      },
      "implementation": "径向光斑与边框使用相同局部坐标；聚焦提供居中高亮。"
    },
    {
      "slug": "card-fan",
      "title": "扇形手牌",
      "category": "cards",
      "source": {
        "name": "Aceternity UI · 组件目录",
        "url": "https://ui.aceternity.com/components"
      },
      "implementation": "卡片以底部为变换原点扇形分布，单卡选择保留相邻空间关系。"
    },
    {
      "slug": "card-stack-cycle",
      "title": "层叠卡片轮换",
      "category": "cards",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "卡片以 index 决定深度、尺度和层级；顶部卡片离场后循环重排。"
    },
    {
      "slug": "flip-pass",
      "title": "双面翻转通行证",
      "category": "cards",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "两面共享三维旋转父层，背面不可见；文字保持独立平面。"
    },
    {
      "slug": "expanding-deck",
      "title": "横向展开卡组",
      "category": "cards",
      "source": {
        "name": "Aceternity UI · 组件目录",
        "url": "https://ui.aceternity.com/components"
      },
      "implementation": "flex 权重连续改变，选中卡获得宽度；其他卡保留标题入口。"
    },
    {
      "slug": "direction-reveal",
      "title": "方向感知揭示",
      "category": "cards",
      "source": {
        "name": "Aceternity UI · 组件目录",
        "url": "https://ui.aceternity.com/components"
      },
      "implementation": "比较相对中心的水平和垂直距离推断入场边，遮罩从对应方向移动。"
    },
    {
      "slug": "folder-peek",
      "title": "文件夹弹出预览",
      "category": "cards",
      "source": {
        "name": "React Bits · 动态组件索引",
        "url": "https://www.reactbits.dev/get-started/index"
      },
      "implementation": "文件夹前盖旋转，内部文档错位弹出，保持共同底部锚点。"
    },
    {
      "slug": "shared-card-detail",
      "title": "卡片原位详情",
      "category": "cards",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "保留同一个 DOM 身份，网格跨度与内容通过 FLIP 协调；返回恢复布局。"
    },
    {
      "slug": "swipe-decision",
      "title": "滑动决策卡片",
      "category": "gestures",
      "source": {
        "name": "Motion · 拖拽机制",
        "url": "https://motion.dev/docs/react-drag"
      },
      "implementation": "拖拽偏移映射旋转和判断标记；超过阈值出栈，否则弹回。"
    },
    {
      "slug": "sortable-itinerary",
      "title": "行程拖拽排序",
      "category": "gestures",
      "source": {
        "name": "Motion · 拖拽机制",
        "url": "https://motion.dev/docs/react-drag"
      },
      "implementation": "拖拽到相邻项目中点触发顺序交换，兄弟项以 FLIP 补间。"
    },
    {
      "slug": "snap-sheet",
      "title": "吸附底部抽屉",
      "category": "gestures",
      "source": {
        "name": "Vaul · 抽屉交互",
        "url": "https://vaul.emilkowal.ski/"
      },
      "implementation": "垂直拖拽采用三档吸附点，松手按当前位置取最近档位。"
    },
    {
      "slug": "rubber-slider",
      "title": "橡皮筋滑杆",
      "category": "gestures",
      "source": {
        "name": "React Bits · 动态组件索引",
        "url": "https://www.reactbits.dev/get-started/index"
      },
      "implementation": "越界位移按阻尼缩短，实际数值限定范围，回弹与数值分离。"
    },
    {
      "slug": "before-after",
      "title": "前后对比滑幕",
      "category": "gestures",
      "source": {
        "name": "Aceternity UI · 组件目录",
        "url": "https://ui.aceternity.com/components"
      },
      "implementation": "两层内容完全重叠，仅改变上层 clip-path；分割线与百分比同步。"
    },
    {
      "slug": "slide-confirm",
      "title": "滑动确认",
      "category": "gestures",
      "source": {
        "name": "Motion · 拖拽机制",
        "url": "https://motion.dev/docs/react-drag"
      },
      "implementation": "轨道填充随拖拽增长，终点阈值确认，未到终点回弹。"
    },
    {
      "slug": "drag-marquee",
      "title": "可拖动文字带",
      "category": "gestures",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "记录最近两次指针时间与位移估算速度；限制惯性终点在内容边界。"
    },
    {
      "slug": "swipe-reveal",
      "title": "侧滑快捷操作",
      "category": "gestures",
      "source": {
        "name": "Motion · 拖拽机制",
        "url": "https://motion.dev/docs/react-drag"
      },
      "implementation": "前景沿单轴移动露出底层操作，松手吸附到关闭或打开位置。"
    },
    {
      "slug": "split-pane",
      "title": "可调整分栏",
      "category": "gestures",
      "source": {
        "name": "Radix · 交互控件语义",
        "url": "https://www.radix-ui.com/primitives/docs/components"
      },
      "implementation": "左右区域共享一个比例状态，限制最小宽度，内容在实际容器内重排。"
    },
    {
      "slug": "pull-refresh",
      "title": "下拉刷新",
      "category": "gestures",
      "source": {
        "name": "Motion · 拖拽机制",
        "url": "https://motion.dev/docs/react-drag"
      },
      "implementation": "下拉距离驱动进度与旋转；越过阈值后进入加载状态并更新本地列表。"
    },
    {
      "slug": "floating-label",
      "title": "浮动标签验证",
      "category": "inputs",
      "source": {
        "name": "Radix · 交互控件语义",
        "url": "https://www.radix-ui.com/primitives/docs/components"
      },
      "implementation": "焦点和内容共同控制标签位置；失焦后校验，错误用位移反馈而非改变布局。"
    },
    {
      "slug": "otp-sequence",
      "title": "验证码接力输入",
      "category": "inputs",
      "source": {
        "name": "Radix · 交互控件语义",
        "url": "https://www.radix-ui.com/primitives/docs/components"
      },
      "implementation": "输入框单格状态、焦点推进和粘贴分配独立处理；六位填满后整组反馈。"
    },
    {
      "slug": "tag-composer",
      "title": "弹性标签输入",
      "category": "inputs",
      "source": {
        "name": "Radix · 交互控件语义",
        "url": "https://www.radix-ui.com/primitives/docs/components"
      },
      "implementation": "添加和移除改变真实文档流；已有标签 FLIP 让位，文字以 textContent 插入。"
    },
    {
      "slug": "range-window",
      "title": "双端范围选择",
      "category": "inputs",
      "source": {
        "name": "Radix · 交互控件语义",
        "url": "https://www.radix-ui.com/primitives/docs/components"
      },
      "implementation": "两个原生 range 共用数值约束，不能交叉，直方图仅突出范围内柱子。"
    },
    {
      "slug": "dial-control",
      "title": "旋钮参数控制",
      "category": "inputs",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "atan2 将指针角度映射到 270° 有效弧，数值与指针共享进度。"
    },
    {
      "slug": "day-night",
      "title": "日夜模式开关",
      "category": "inputs",
      "source": {
        "name": "Radix · 交互控件语义",
        "url": "https://www.radix-ui.com/primitives/docs/components"
      },
      "implementation": "同一圆形拇指横移，同时更换月相遮罩与场景亮度。"
    },
    {
      "slug": "date-range",
      "title": "日期区间胶囊",
      "category": "inputs",
      "source": {
        "name": "Radix · 交互控件语义",
        "url": "https://www.radix-ui.com/primitives/docs/components"
      },
      "implementation": "两次点击组成区间，端点圆角与中段连续底色实时联动。"
    },
    {
      "slug": "upload-dropzone",
      "title": "文件拖放反馈",
      "category": "inputs",
      "source": {
        "name": "Aceternity UI · 组件目录",
        "url": "https://ui.aceternity.com/components"
      },
      "implementation": "dragenter 计数避免子元素闪烁，展示真实名称与大小；不上传、不伪造成功。"
    },
    {
      "slug": "color-orbit",
      "title": "色彩实时调配",
      "category": "inputs",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "HSL 参数共同驱动预览和色值；复制用户选择的真实数据。"
    },
    {
      "slug": "multi-step-form",
      "title": "空间换页表单",
      "category": "inputs",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "步骤状态保存输入值，前进后退使用相反方向过渡，完成显示真实汇总。"
    },
    {
      "slug": "toast-stack",
      "title": "层叠通知中心",
      "category": "feedback",
      "source": {
        "name": "Sonner · 通知交互",
        "url": "https://sonner.emilkowal.ski/"
      },
      "implementation": "新通知插入顶部，其余缩放后移；展开后保持独立关闭操作。"
    },
    {
      "slug": "undo-delete",
      "title": "可撤销删除",
      "category": "feedback",
      "source": {
        "name": "Sonner · 通知交互",
        "url": "https://sonner.emilkowal.ski/"
      },
      "implementation": "删除前保存记录位置，撤销恢复同一条目；过期只影响本地演示。"
    },
    {
      "slug": "hold-action",
      "title": "长按确认环",
      "category": "feedback",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "按住期间连续累计进度；pointercancel、离开及键盘抬起都会取消。"
    },
    {
      "slug": "heart-burst",
      "title": "收藏粒子反馈",
      "category": "feedback",
      "source": {
        "name": "React Bits · 动态组件索引",
        "url": "https://www.reactbits.dev/get-started/index"
      },
      "implementation": "状态即时更新，粒子从按钮中心径向散开；重复点击清理旧粒子。"
    },
    {
      "slug": "staged-loader",
      "title": "分阶段任务加载",
      "category": "feedback",
      "source": {
        "name": "Aceternity UI · 组件目录",
        "url": "https://ui.aceternity.com/components"
      },
      "implementation": "每个阶段具备独立状态，进度与阶段同步；取消清理待执行计时器。"
    },
    {
      "slug": "download-control",
      "title": "下载进度控制",
      "category": "feedback",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "明确 idle/running/paused/done 状态；进度环和按钮文案来自同一状态。"
    },
    {
      "slug": "notification-island",
      "title": "动态通知岛",
      "category": "feedback",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "同一胶囊根据内容插值宽高；内部状态内容错峰进入。"
    },
    {
      "slug": "skeleton-reveal",
      "title": "骨架到内容",
      "category": "feedback",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "占位保持最终布局尺寸，加载完以剪裁和错峰透明度揭示内容。"
    },
    {
      "slug": "success-confetti",
      "title": "完成庆祝反馈",
      "category": "feedback",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "有界粒子数量，随机速度与重力轨迹；结束后清理 DOM，降低动态效果时省略粒子。"
    },
    {
      "slug": "optimistic-toggle",
      "title": "乐观保存与回滚",
      "category": "feedback",
      "source": {
        "name": "Sonner · 通知交互",
        "url": "https://sonner.emilkowal.ski/"
      },
      "implementation": "立即显示预期状态，异步结果失败时恢复原值并提供重试；演示结果可控。"
    },
    {
      "slug": "scramble-text",
      "title": "字符解密标题",
      "category": "typography",
      "source": {
        "name": "React Bits · 动态组件索引",
        "url": "https://www.reactbits.dev/get-started/index"
      },
      "implementation": "固定字符位置，仅对尚未揭示的字位随机替换，避免整行宽度抖动。"
    },
    {
      "slug": "split-text",
      "title": "逐字错峰入场",
      "category": "typography",
      "source": {
        "name": "React Bits · 动态组件索引",
        "url": "https://www.reactbits.dev/get-started/index"
      },
      "implementation": "按字拆分但保留整体可访问名称，错峰延迟来自字序，字框避免布局位移。"
    },
    {
      "slug": "rotating-word",
      "title": "词语转轮",
      "category": "typography",
      "source": {
        "name": "React Bits · 动态组件索引",
        "url": "https://www.reactbits.dev/get-started/index"
      },
      "implementation": "旧词向上离开、新词从下进入，共同包裹层按文本长度改变宽度。"
    },
    {
      "slug": "typewriter-editor",
      "title": "可编辑打字机",
      "category": "typography",
      "source": {
        "name": "Aceternity UI · 组件目录",
        "url": "https://ui.aceternity.com/components"
      },
      "implementation": "文字数组按字输出，保留用户输入；暂停只停计时，不丢失当前位置。"
    },
    {
      "slug": "proximity-type",
      "title": "距离感应字重",
      "category": "typography",
      "source": {
        "name": "React Bits · 动态组件索引",
        "url": "https://www.reactbits.dev/get-started/index"
      },
      "implementation": "每字独立计算到光标的距离，连续映射缩放和亮度；离开统一复位。"
    },
    {
      "slug": "text-mask",
      "title": "聚光文字遮罩",
      "category": "typography",
      "source": {
        "name": "Aceternity UI · 组件目录",
        "url": "https://ui.aceternity.com/components"
      },
      "implementation": "两份同位置文字使用圆形 clip-path，避免重排；滑杆提供触屏和键盘入口。"
    },
    {
      "slug": "rolling-counter",
      "title": "机械数字滚轮",
      "category": "typography",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "数字列保留 0—9 列表，根据目标数字平移；不靠整段文字淡入替换。"
    },
    {
      "slug": "focus-words",
      "title": "逐词焦点框",
      "category": "typography",
      "source": {
        "name": "React Bits · 动态组件索引",
        "url": "https://www.reactbits.dev/get-started/index"
      },
      "implementation": "测量目标词框，单一描边层同时插值位置和宽度；非焦点文字轻微虚化。"
    },
    {
      "slug": "stroke-heading",
      "title": "描边文字填色",
      "category": "typography",
      "source": {
        "name": "React Bits · 动态组件索引",
        "url": "https://www.reactbits.dev/get-started/index"
      },
      "implementation": "描边底层常驻，实色上层按进度裁切；进度可逆、保留固定字形几何。"
    },
    {
      "slug": "text-reflow",
      "title": "文本重排过渡",
      "category": "typography",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "逐词测量前后位置，以 FLIP 补偿换行位移，真实布局最终落位。"
    },
    {
      "slug": "scroll-progress",
      "title": "阅读进度轨道",
      "category": "scroll",
      "source": {
        "name": "Motion · 滚动动画",
        "url": "https://motion.dev/docs/scroll"
      },
      "implementation": "滚动进度按实际可滚动高度归一化；尺寸变化后重新计算。"
    },
    {
      "slug": "sticky-story",
      "title": "固定叙事切换",
      "category": "scroll",
      "source": {
        "name": "Aceternity UI · 组件目录",
        "url": "https://ui.aceternity.com/components"
      },
      "implementation": "用滚动位置确定章节，固定视觉层与实际滚动文档分离。"
    },
    {
      "slug": "scroll-card-stack",
      "title": "滚动叠层卡片",
      "category": "scroll",
      "source": {
        "name": "React Bits · 动态组件索引",
        "url": "https://www.reactbits.dev/get-started/index"
      },
      "implementation": "sticky 顶部偏移形成堆叠，已经过的卡片按距离逐渐缩小。"
    },
    {
      "slug": "horizontal-journey",
      "title": "纵向驱动横移",
      "category": "scroll",
      "source": {
        "name": "Motion · 滚动动画",
        "url": "https://motion.dev/docs/scroll"
      },
      "implementation": "纵向文档提供滚动距离，固定轨道将归一化进度映射为横向位移。"
    },
    {
      "slug": "parallax-layers",
      "title": "三层滚动视差",
      "category": "scroll",
      "source": {
        "name": "Aceternity UI · 组件目录",
        "url": "https://ui.aceternity.com/components"
      },
      "implementation": "各层位移共享滚动输入但使用不同倍率，所有元素限制在演示视口内。"
    },
    {
      "slug": "scroll-word-highlight",
      "title": "滚动逐词高亮",
      "category": "scroll",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "基于段落相对视口位置计算进度，每个词有独立的启动区间。"
    },
    {
      "slug": "scroll-path",
      "title": "滚动轨迹描边",
      "category": "scroll",
      "source": {
        "name": "Anime.js · SVG 与路径动画",
        "url": "https://animejs.com/documentation/svg/"
      },
      "implementation": "路径总长度驱动 stroke-dashoffset，节点状态与同一进度对应。"
    },
    {
      "slug": "scroll-zoom",
      "title": "滚动缩放窗口",
      "category": "scroll",
      "source": {
        "name": "Motion · 滚动动画",
        "url": "https://motion.dev/docs/scroll"
      },
      "implementation": "窗口缩放、圆角与内部反向缩放共享进度，避免文字随父层过大变形。"
    },
    {
      "slug": "scroll-velocity",
      "title": "速度响应文字",
      "category": "scroll",
      "source": {
        "name": "React Bits · 动态组件索引",
        "url": "https://www.reactbits.dev/get-started/index"
      },
      "implementation": "用时间差计算速度并低通滤波，倾斜值限制上界；停止后衰减。"
    },
    {
      "slug": "chapter-scrubber",
      "title": "章节进度导航",
      "category": "scroll",
      "source": {
        "name": "Motion · 滚动动画",
        "url": "https://motion.dev/docs/scroll"
      },
      "implementation": "章节按钮与容器滚动位置双向同步，程序滚动尊重减少动态效果。"
    },
    {
      "slug": "chart-scrub",
      "title": "趋势游标探查",
      "category": "data",
      "source": {
        "name": "Observable / D3 · 可视化示例",
        "url": "https://observablehq.github.io/notebook-kit/gallery"
      },
      "implementation": "曲线与游标使用同一数据坐标系；最近索引驱动数值和垂直参考线。"
    },
    {
      "slug": "bar-race",
      "title": "动态排行换位",
      "category": "data",
      "source": {
        "name": "Observable / D3 · 可视化示例",
        "url": "https://observablehq.github.io/notebook-kit/gallery"
      },
      "implementation": "稳定身份的行按值排序，FLIP 负责位置，宽度过渡负责数值。"
    },
    {
      "slug": "donut-segments",
      "title": "环形分区探索",
      "category": "data",
      "source": {
        "name": "Observable / D3 · 可视化示例",
        "url": "https://observablehq.github.io/notebook-kit/gallery"
      },
      "implementation": "圆环分段使用路径长度表达比例，选中分段加粗，中央数值同步。"
    },
    {
      "slug": "brush-selection",
      "title": "刷选数据区间",
      "category": "data",
      "source": {
        "name": "D3 · Brush 区间选择",
        "url": "https://d3js.org/d3-brush"
      },
      "implementation": "拖拽起终点转为数据索引，与范围控件共享状态；汇总只使用选中数据。"
    },
    {
      "slug": "heatmap-inspector",
      "title": "热力格探查",
      "category": "data",
      "source": {
        "name": "Observable / D3 · 可视化示例",
        "url": "https://observablehq.github.io/notebook-kit/gallery"
      },
      "implementation": "离散数值映射色阶，悬停和键盘聚焦共享明细，点击固定当前选择。"
    },
    {
      "slug": "metric-spring",
      "title": "数值弹性过渡",
      "category": "data",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "数字从当前值补间到目标，取消旧补间以支持快速切换。"
    },
    {
      "slug": "timeline-inspector",
      "title": "时间线节点探索",
      "category": "data",
      "source": {
        "name": "Aceternity UI · 组件目录",
        "url": "https://ui.aceternity.com/components"
      },
      "implementation": "时间线进度、节点选中和详情由同一索引驱动，连接线连续增长。"
    },
    {
      "slug": "treemap-drill",
      "title": "矩形树图下钻",
      "category": "data",
      "source": {
        "name": "Observable / D3 · 可视化示例",
        "url": "https://observablehq.github.io/notebook-kit/gallery"
      },
      "implementation": "层级数据驱动网格面积权重，钻取后显示子节点，保留返回路径。"
    },
    {
      "slug": "scatter-focus",
      "title": "散点聚焦筛选",
      "category": "data",
      "source": {
        "name": "Observable / D3 · 可视化示例",
        "url": "https://observablehq.github.io/notebook-kit/gallery"
      },
      "implementation": "固定数据坐标不重排，以半径和透明度表达筛选，保持空间上下文。"
    },
    {
      "slug": "table-reorder",
      "title": "表格排序动效",
      "category": "data",
      "source": {
        "name": "Observable / D3 · 可视化示例",
        "url": "https://observablehq.github.io/notebook-kit/gallery"
      },
      "implementation": "排序保留行节点，先测量旧位置再移动 DOM，用 FLIP 表达排名变化。"
    },
    {
      "slug": "coverflow",
      "title": "透视封面轮播",
      "category": "spatial",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "按相对索引计算 translateX、rotateY、scale 和层级，中间封面保持正面。"
    },
    {
      "slug": "orbit-selector",
      "title": "轨道选择器",
      "category": "spatial",
      "source": {
        "name": "Anime.js · SVG 与路径动画",
        "url": "https://animejs.com/documentation/svg/"
      },
      "implementation": "整体轨道旋转与图标反向旋转配合，保持标签正向。"
    },
    {
      "slug": "cube-switcher",
      "title": "立方体视图切换",
      "category": "spatial",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "四个面围绕同一 Y 轴排列，旋转父容器完成空间导航。"
    },
    {
      "slug": "magnetic-field",
      "title": "磁场方向阵列",
      "category": "spatial",
      "source": {
        "name": "React Bits · 动态组件索引",
        "url": "https://www.reactbits.dev/get-started/index"
      },
      "implementation": "逐格使用 atan2 计算指针方向，距离映射亮度；触屏拖动同样可用。"
    },
    {
      "slug": "cursor-spring",
      "title": "弹簧跟随光标",
      "category": "spatial",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "采用阻尼弹簧积分，目标与当前位置分离；离开停止循环，减少动态时直接跟随。"
    },
    {
      "slug": "ripple-grid",
      "title": "点击波纹网格",
      "category": "spatial",
      "source": {
        "name": "Aceternity UI · 组件目录",
        "url": "https://ui.aceternity.com/components"
      },
      "implementation": "每个格子与点击格的欧氏距离决定延迟，亮度与缩放呈波形。"
    },
    {
      "slug": "bezier-editor",
      "title": "贝塞尔曲线编辑",
      "category": "spatial",
      "source": {
        "name": "Anime.js · SVG 与路径动画",
        "url": "https://animejs.com/documentation/svg/"
      },
      "implementation": "两个控制点映射 CSS cubic-bezier，曲线编辑与对象动画共享参数。"
    },
    {
      "slug": "path-follower",
      "title": "路径跟随器",
      "category": "spatial",
      "source": {
        "name": "Anime.js · SVG 与路径动画",
        "url": "https://animejs.com/documentation/svg/"
      },
      "implementation": "getPointAtLength 计算位置与邻点切线角度，位置和旋转同时更新。"
    },
    {
      "slug": "spring-playground",
      "title": "弹簧参数实验台",
      "category": "spatial",
      "source": {
        "name": "Motion · 官方交互示例",
        "url": "https://motion.dev/examples"
      },
      "implementation": "实际积分弹簧加速度与速度，参数改变超调和收敛，不用同一缓动假装物理。"
    },
    {
      "slug": "tilt-grid",
      "title": "三维倾斜矩阵",
      "category": "spatial",
      "source": {
        "name": "React Bits · 动态组件索引",
        "url": "https://www.reactbits.dev/get-started/index"
      },
      "implementation": "父层透视旋转保持矩阵整体关系，每个单元独立抬升，选中状态可保留。"
    }
  ]
}