组件

可组合的下拉选择器,面板以弹性动画从触发器展开并分离,另提供 Morph 变体,通过共享布局让触发器直接生长为面板。

表单选择控件,支持对勾绘制动画、弹簧按压反馈以及不确定(indeterminate)状态。

单选控件,指示圆点通过 layoutId 平滑滑动定位,并带有弹簧按压反馈。

参考 Codex 应用设计的导航栏,紧凑刻度在悬停时呈金字塔状展开,并浮现目标页面的预览。

悬停或聚焦触发的文字提示,进出场带模糊过渡与弹簧生成动画;另有 Morph 变体,一块共享气泡在相邻触发器之间滑移变形。

粘性气泡浮层,面板通过 SVG 果冻滤镜(goo filter)从触发器中渗出——如液态颈部先拉伸后收缩,清晰内容随后淡入;另提供 Morph 变体,面板从触发器一角以裁剪动画展开。支持点击或悬停触发,可受控也可非受控。

带刻度点的范围滑块,弹性竖条滑块在吸附步进间平滑滑动;支持拖拽与键盘操作,对「减少动效」偏好友好。

iOS 风格的滚轮选择器:基于原生惯性滚动的 3D 转筒,自动吸附至最近刻度,支持滚轮、拖拽与键盘操作。可并排组合成日期与时间选择器,对「减少动效」偏好友好。

虚拟滚动数据表格,万行以上依然流畅,支持表头排序、行选择、列宽调整与列重排,并带粘性表头。动效克制,对「减少动效」偏好友好。

基于 Canvas 着色器的背景效果(网格渐变、颗粒噪点、扭曲、波浪、Voronoi 图案、点阵环绕等),通过单一类型化的 variant 属性切换。「减少动效」偏好下动态效果会静止。

轮播项排列在圆柱体内壁,越靠中心越远、越靠边缘越大。可拖拽、滚动或方向键滚动切换,带弹性滑动与吸附。「减少动效」偏好下取消滑动过渡。

加载指示器,内置十七种样式:旋转圈、圆点、条形、点阵、抖动噪点、变形、彗星、乱码扫描、融球、牛顿摆、螺旋、百分比,以及五款终端风格的 ASCII 动画。单一 size 属性即可缩放,使用 currentColor 取色,「减少动效」偏好下所有变换动效都会替换为平缓的透明度脉冲。

随机字符从左到右逐个解析为真实文本——进入视口、悬停或 text 变化时播放。解码过程中宽度不抖动,「减少动效」偏好下直接显示最终文本。

基于 fragment shader 的主视觉背景(极光、丝绸、等离子、光芒射线、像素爆裂(点击涟漪)、抖动噪点),单一类型化 variant 属性切换。「减少动效」偏好下渲染静态一帧;无 WebGL 时回退为同色系 CSS 渐变。

把任意位图在 canvas 上渲染成印刷网点:明暗决定网点大小,网格可旋转(45° 才是印刷味),圆点或方点、疏密可调。再给一张彩色版,灰网点便在悬停时交叉淡入彩色版,每个点取它所在位置的颜色。点与点之间透明,可直接叠在任何表面上。

一束缓慢的光沿按钮或卡片边框环绕运行——纯 CSS 锥形渐变包裹器,可调光色、速度与描边厚度。「减少动效」偏好下静止为固定描边。

一叠卡片进入视口时错峰弹跳着扇形展开。间距、旋转与错峰节奏可调;「减少动效」偏好下保留扇形布局,仅做透明度渐入。

悬停时一道斜向光带扫过卡片或按钮表面。光色、角度、时长可调;触屏设备不渲染,「减少动效」偏好下换成轻微透明度高亮。

内容加载占位块,自带柔和微光扫过——形状完全由 className 决定,可组合出头像、文本条、图块。「减少动效」偏好下换成平缓的透明度脉冲。

首屏底部的向下滚动指示器,两种形态:鼠标轮廓内圆点下落,或两枚 chevron 依次脉冲。跟随 currentColor,可带文字标签,「减少动效」偏好下静态显示。

一个组件承载七种 hover 动效图标(描边/摆动/旋转/弹跳/弹入/脉动/微移),用单个 variant prop 切换。基于 motion + lucide,尊重减少动态偏好。

可组合的动效下拉菜单:面板从触发器近角弹簧展开并带视口碰撞翻转;hover 与键盘共用一块在行间滑动的焦点表面;支持分组标签、图标+双行描述+快捷键、勾选项、悬停/方向键子菜单,以及完整的键盘循环导航。

App Store 式卡片展开:卡片经共享 layoutId 直接变形为居中弹层,背景整页重模糊;扩展内容在表面落定后淡入,关闭时沿原路缩回原位并归还焦点。

悬停时呈现 3D 透视倾斜效果,并带有跟随光标的高光。

带弹簧按压反馈的按钮,还包含状态按钮 StatefulButton(空闲 → 加载中 → 成功 / 失败)与磁吸按钮 MagneticButton。

支持水平或垂直方向的无限滚动,悬停时暂停。

胶囊、分段或下划线样式的选项卡,配合 layoutId 实现弹簧动效的指示条切换。

带弹簧驱动滑块与按压反馈的切换开关。

带标签、左右图标的文本输入框,支持错误抖动提示与成功状态的对勾绘制动画。

参考 Vaul 设计的可拖拽底部面板,支持吸附点、惯性滑动与毛玻璃质感表面。

借助 Framer Motion 的共享布局,让一枚胶囊背景块在悬停项之间平滑滑动,进出场带模糊过渡。

macOS 风格的程序坞,操作项分组排列,配合滑动的高亮胶囊标记当前项。

类似 Family App 风格的弹窗。单一面板会随内部视图切换而变形高度,内容以模糊交叉淡化过渡。

一组文字动效原语,涵盖逐字揭示、加载态微光扫过与字母级瀑布切换。

一组数字动效原语,涵盖数值递增计数与滚轮式数字翻转。

状态徽标,图标随状态变化播放动画,带脉冲反馈,并提供紧凑尺寸变体。

用于按钮文字与图标切换的 CTA 按钮及插槽原语,切换时带模糊过渡动效。

堆叠式消息通知,支持状态变形、滑动关闭、操作按钮以及感知布局的动效。

主题切换按钮,借助 View Transition API 以全屏矩形裁剪路径展开切换效果。

单项展开的手风琴组件,采用带权重的弹簧布局与图标行,内容展开对「减少动效」偏好友好。

从左侧或右侧弹簧滑入的侧边面板,带背景模糊、页面滚动锁定,支持 Esc 键关闭。

由滚动驱动的动效:基于 Lenis 的平滑滚动 Provider,以及读取其状态的阅读进度指示器。