给 AI 编码助手的交互选型知识库：64 个词条，选对一个再写代码
UI Interaction Kit 把「有质感」「跟手」「像液体」「更高级」这类模糊的动效需求，翻译成 64 个已定义的交互词条
（interaction patterns / motion textures），让 AI 编码助手在动手前先选对一个主交互，再按明确的规则实现。
它不是组件库，也不绑定框架：每个词条都写清了触发方式、开始状态、变化过程、结束状态、取消状态，可直接用于网页、原生 App 与小程序。
本页是这 64 个词条的可运行 Demo（纯原生 JavaScript，零依赖），支持深色 / 浅色主题与减少动效降级。
滚动驱动的三个模式另有独立的完整示例页 scroll.html（该页的全息扫描段使用 Three.js WebGL，加载失败会降级为静态示意）。
Skill 本体可安装到 CodeBuddy、Claude Code、Cursor 等支持 SKILL.md 的 AI 编码工具。
质感动效 8
Magnetic Attraction 磁吸 · Velocity-driven Deformation 液态形变 · Layered Parallax 3D 视差 · Center-focus Scaling 中心聚焦 · Liquid Tab Indicator 液态 Tab · Shared-element Image Expansion 图片展开 · Gesture-driven Transition 手势转场 · Collision and Spring Response 碰撞回弹
图表交互 7
Brush Selection 框选 · Crosshair 十字线 · Data Point Highlight 数据点高亮 · Tooltip 数据提示框 · Legend Filter 图例筛选 · Zoom 缩放 · Drill Down 数据下钻
高级交互模式 10
Radial Theme Transition · Drag-to-Reorder · Staggered Bulk Selection · Velocity-Based Slider Snap · Animated Text Disclosure · Spring Stepper Progress · Ripple Feedback for Related Switches · Curved Card Deletion · Stacked Card Scroll · Expanding Tag Selection
展开与折叠 15
Circle to Pill · Pill to Card · Compact to Expand · Corner Radius Morph · Size Morph · Content Reflow · Reverse Collapse · Accordion · Collapse · Dropdown · Treeview · Expandable Card · Sidebar · Radio Menu · Container Transform
导航 · 弹窗 · 加载 21
Tabs · Segment Control · Breadcrumb · Pagination · Stepper · Sidebar · Bottom Navigation · Tooltip · Popover · Dropdown Menu · Drawer · Bottom Sheet · Modal · Toast · Page Loader · Skeleton · Shimmer · Spinner · Progress Bar · Circular Progress · Button Loader
滚动驱动官网 3Scroll-driven Opening 滚动驱动开场 · Horizontal Scroll Section 横向滚动区段 · Scroll-driven Hologram Scan 滚动驱动全息扫描（完整示例页
scroll.html）
GitHub 仓库 ·
SKILL.md 决策入口 ·
references 规则与验收 ·
README / 安装方式
UI Interaction Kit: 64 front-end interaction patterns — pick the right one before writing code
UI Interaction Kit turns vague motion requests — "make it feel snappier", "follow my finger", "like liquid" —
into 64 well-defined interaction patterns (motion textures, chart interactions, app patterns, overlays, loading states, scroll-driven scenes),
so an AI coding assistant chooses one primary interaction before touching the code. It is not a component library
and it is framework-agnostic: every entry documents its trigger, start state, motion, end state and cancel state,
and applies to the web, native apps and mini programs alike.
This page is the runnable demo for all 64 entries (vanilla JavaScript, zero dependencies) with dark / light themes
and a reduced-motion fallback. The Skill itself installs into CodeBuddy, Claude Code, Cursor and any other AI coding
tool that supports SKILL.md. The three scroll-driven patterns have their own full-length example page,
scroll.html (its hologram-scan section uses Three.js WebGL and falls back to a static
drawing if that fails to load).
Motion Texture (8)
Magnetic Attraction · Velocity-driven Deformation · Layered Parallax · Center-focus Scaling · Liquid Tab Indicator · Shared-element Image Expansion · Gesture-driven Transition · Collision and Spring Response
Chart Interaction (7)
Brush Selection · Crosshair · Data Point Highlight · Tooltip · Legend Filter · Zoom · Drill Down
App Interaction Patterns (10)
Radial Theme Transition · Drag-to-Reorder · Staggered Bulk Selection · Velocity-Based Slider Snap · Animated Text Disclosure · Spring Stepper Progress · Ripple Feedback for Related Switches · Curved Card Deletion · Stacked Card Scroll · Expanding Tag Selection
Expand & Collapse (15)
Circle to Pill · Pill to Card · Compact to Expand · Corner Radius Morph · Size Morph · Content Reflow · Reverse Collapse · Accordion · Collapse · Dropdown · Treeview · Expandable Card · Sidebar · Radio Menu · Container Transform
Navigation · Overlays · Loading (21)
Tabs · Segment Control · Breadcrumb · Pagination · Stepper · Sidebar · Bottom Navigation · Tooltip · Popover · Dropdown Menu · Drawer · Bottom Sheet · Modal · Toast · Page Loader · Skeleton · Shimmer · Spinner · Progress Bar · Circular Progress · Button Loader
Scroll-Driven Official Site (3)Scroll-driven Opening · Horizontal Scroll Section · Scroll-driven Hologram Scan — full example in
scroll.html
GitHub repository ·
SKILL.md decision entry ·
References: rules & acceptance ·
README / install