看得见的前端视觉词汇表

可自动增高的 Agent 输入台:动作菜单、模型选择、Enter 发送、多行输入,以及发送/停止的动效切换。

可折叠的 Agent 任务计划:待办/进行中/完成/取消状态、进度变形为对勾、完成计数、稳定流式行与紧凑元数据。

面向 Agent 的语法高亮代码面:稳定流式更新、可选行号与高亮行、有界平滑跟随、文件名/语言元数据与复制反馈。

人机协同决策面:批准/拒绝/修订,以及单选、多选、自由文本或多步问题;提交后折叠为已记录结果。

语法高亮的文件变更披露:渐进行、行号、实时增删计数、有界平滑跟随,完成后可折叠。

轻量执行披露:语法高亮的终端输出与请求响应、有界自动跟随、成功/错误/取消态,完成后折叠,支持复制与重试。

稳定的流式回答面:完成后复制/重试/反馈、可选可展开来源摘要,以及嵌套 live region 播报控制。

稳定的生成图画面:排队→生成→精修→完成/可恢复错误,逐步解析媒体且不 remount、不挤压周围会话。

人机协同权限卡:审阅工具详情与参数、允许一次/始终允许/拒绝,可选 Shiki 高亮代码值。

自适应 Agent 活动流:推理文本、搜索结果、工具调用、结构化执行轨迹,或按时间混排;进行中有界跟随,完成后折叠为可重开摘要。

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

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

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

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

把任意内容呈现成一段录屏:窗口 mock 背后是壁纸与压暗层,摄像头气泡兼作播放按钮,计时器带闪烁录制红点,「点击听声音」药丸在播放后滑回气泡背后藏起来。全部尺寸用容器查询单位写成,同一张卡从网格缩略图到整宽 hero 都是等比的,不需要任何断点;另可开启锁定 16:9 的剧场视图。

「一次一题」聚焦式多步表单:分段进度条配等宽计数,方向性滑动切换配合容器高度变形;支持文本题与选择卡题,校验失败抖动且错误行预留空间不跳版,Enter 直接推进,完成态画圈打勾。

带线稿动画插图的空状态区块:信封收件箱清零、悬停弹开抽屉的档案柜、来回扫描的搜索放大镜;统一「插图 + 短文案 + 主操作」结构。

紧凑的积分感知 AI 输入条:可关闭的积分横幅;流式进行中再提交会入队,可插队(Steer)、编辑或删除;输入 / 唤起技能面板并把命令凝固成可移除的技能 chip;附件演示、联网搜索开关、模型菜单与发送⇄停止变形按钮。

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

中文产品登录弹窗:蓝色渐变头部带漂浮光斑,微信扫码列与手机号快捷登录并排(区号下拉、验证码 60 秒重发倒计时),未勾选协议提交时协议行抖动提示,并带 ICP 备案页脚。

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

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

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

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

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

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

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

侧栏会话列表:带操作槽的分组标题、30px 行(未读圆点、时间与悬停操作钮互换),以及用共享布局在行间平滑滑动的选中底块。

AI 产物的画布侧栏:发丝面板壳、带操作簇的头部、交叉淡切的预览/代码双视图切换,以及带恢复按钮的版本导航。

人机协同审批队列:带风险分级与过期时间的请求项、可展开详情、原地落定的批准/拒绝流转,以及带影响范围、增删统计与撤销的操作回执卡。

Agent 执行轨迹组件族:发丝竖轨上按类型着装的步骤节点、带脉冲环与节奏扫光的进行中步骤、原始输出展开、并行工具组,以及可嵌套展开的子 Agent 迷你轨迹。

流式结构化输出组件族:对不完整 JSON 容错的分色渲染——可承受未闭合字符串的增量 tokenizer、仅对新到片段做淡入、流式光标,以及函数调用外壳。

引用与来源组件族:行内引用角标(悬停弹出来源预览浮层)、来源卡片,以及答案尾部带级联进场的来源列表。

沉浸式语音模式光球:单一连续渐变球体,呼吸、色相漂移、回声环与思考高光随待机/聆听/思考/说话四态切换。

使用量统计组件族:用于关键指标的连体统计条、基于 color-mix 强度色阶与逐列级联淡入的 GitHub 风格贡献热力图,以及纯文本周期切换器。

偏好设置表单组件族:带发丝分隔行的带标题设置分组、文字自动反差的十六进制颜色输入胶囊、文本框、预设选择按钮,以及头部幽灵操作按钮。

AI agent 会话流组件族:用户消息 pill、回合头、Markdown 排版容器、思考与工具调用状态行、审批请求卡、流式输出光标、带展开动画的文件与变更产物卡、命令执行行,以及悬停显现的回合操作栏。

AI agent 聊天输入台组件族:上下文 chips、权限 chip、内置分段推理力度滑杆的模型选择器,以及可变形的发送/停止按钮,并带添加菜单与语音听写态。

响应式 Agent 应用外壳:桌面端为可拖宽三栏布局,平板端将侧区切换为覆盖层,移动端一次只展示一个任务表面;支持弹簧过渡与横跨全宽的 46px 顶部工具栏,并内置置顶摘要浮层卡片。

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

每周可用时间编辑器,每一天在「可用/不可用」之间弹簧切换,时间段的增删带模糊滑动动效,时间通过可滚动下拉菜单选取,并可通过复制菜单将时段套用到其他天。

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

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

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

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

钱包概览卡片,账户切换器与搜索均从触发器变形展开,余额以瀑布动效呈现并带实时涨跌胶囊与隐私开关,支持一键复制地址以及转账/充值/兑换/购买等操作。

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

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

角落触发按钮变形展开为反馈弹窗,支持消息输入,并带发送中、成功、重试等动效状态。

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

按钮变形展开为菜单,以虹膜式效果从中心向外绽放,网格项沿径向错落展开。

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

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

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

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

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

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

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

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

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

iOS 风格的灵动岛胶囊组件,在多个实时活动视图间变形切换,外壳弹性缩放并带模糊交叉淡化。

⌘K 呼出的命令面板,支持模糊搜索过滤,当前行带弹簧动效高亮,毛玻璃质感表面。

紧凑的图标操作项,在悬停或聚焦时通过共享布局动效展开为带文字标签的控件。

图标选项卡栏,当前选项卡展开为带文字标签的胶囊,上方面板随切换变形高度,内容按方向感知滑动。

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

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

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

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

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

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

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

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

跨链兑换组件,内置链与代币选择器、视图变形动效、翻转动画与实时报价。

一次性验证码输入框,聚焦环平滑滑动定位,数字逐格滚入,错误时抖动提示,成功时绘制对勾动画。

移动端风格的列表行,左右滑动可露出上下文操作按钮。