COMPONENTS / 26
组件
Yi UI 的全部组件：从线条、留白与排版开始，构建属于自己的界面。源码开放，复制即用。
Graphics & Motion / 图形与动效
08Isometric Mark等轴测标志
把任意平面多边形挤出成等轴测线条 3D：多种顶面材质与地面、跟随鼠标的线条高光、点击按下与音效。
Flow Diagram流程动画图示
节点、细线与流动光点组成的循环动画流程图：统一时间轴、进入视口才播放、减少动态效果时停在静帧；色调与底纹可配置，附带光点路径、逐字输入、加载圈与状态点等原语。
Dotted Globe点阵地球
用点阵绘制的 WebGL 地球，颜色跟随主题，支持城市标记、标签、弧线、拖拽旋转与离屏暂停。
Glyph Field字符矩阵
由主题色字符组成的自适应画布背景，支持混合色调、渐隐遮罩、中心内容与离屏暂停。
Shuffle Grid动态格
方格里的内容随机出现、换位、点亮，支持分类胶囊切换、首字母头像、纯色像素块与离屏暂停。
Orbit轨道环绕
可组合的同心轨道与正向节点，支持半弧、反向运行与离屏暂停。
Ripple波纹脉冲
同心波纹与径向标记，支持扩散脉冲、覆盖范围与离屏暂停。
Code Stack代码文件堆叠
带行号与语法骨架的代码文件卡，支持扇形、级联、网格排列与悬停散开。
Value Slider数值滑块
带标签与读数的数值滑块，支持区间、缓冲进度、刻度磁吸、数值格式化与拖出两端的弹性过冲。
Control Panel控制面板
承载方条控件的面板容器：标题栏、分组网格、恢复按钮，以及把当前参数复制为 JSX 的按钮。
XY Pad二维拖拽板
一块带网格的区域，拖动手柄同时调两个值，十字线与淡色填充标出位置，键盘左右 / 上下分别调两条轴。
Angle Dial角度刻度尺
方条样式的角度输入：左右拖动刻度、中间竖线指针读数，满一圈首尾相接，与数值滑块同一套高度。
Segmented Control分段选择
方条样式的互斥选项组，选中块在选项间滑动，可带图标或小样，与数值滑块同一套高度。
Toggle Switch方条开关
整条可点的开关，打开时铺上淡色、圆形手柄滑到右端，与数值滑块同一套高度。
Tone Picker色调选择
方条左侧标签、右侧一排色点的单选组，色点取主题变量，跟随亮暗与颜色主题。
Chart Card图表卡片
图表卡片布局（标题、指标行、图例、明细表）加三个图表：刻度式环形仪表、多序列折线 / 柱 / 面积图（支持堆叠与正负对比）、横向排名条。基于 shadcn chart，颜色全部取自主题变量。
Stat Card统计卡片
一组可组合的统计卡片原语：KPI 数字与涨跌幅（绿涨红跌 / 红涨绿跌可切换）、目标状态行、配额进度条、分格计量条、延迟分区表、占比分布条与图例，数字默认按万 / 亿压缩。
Mini Chart迷你图
放进卡片的极简图表：柱、折线、面积、阶梯线、进度环与环形图。无网格无纵轴，可选 11px 横轴，涨跌色随配色约定变化，尊重「减少动态效果」。
Text Animate文字动效
关键词轮换、分字显现、乱码解码与高亮扫过，支持中文与渐进增强。
Marquee跑马灯
纯 CSS 无缝跑马灯，支持四向滚动、恒定速度、渐隐与斜向丝带。
Timeline时间线
可组合的时间线原语，支持经历、活动流、项目进度、水平路线图与交替更新日志。
Card Stack卡片堆叠
细边框卡片的层叠轮播，支持自动轮换、拖拽、键盘切换与减少动态效果。
Checklist手写清单
勾选时文字被手写感划线划掉的清单，支持受控与非受控、进度汇总、自动播放与紧凑尺寸。
Local Time实时当地时间
按指定 IANA 时区显示实时时间：行内时间可带 UTC 偏移、昼夜图标与同访客的时差；另提供世界时钟（列表 / 卡片）和平滑转动的 SVG 模拟表盘。
Greeting时段问候
按访客本地时间问候：时段图标与色调、可配置的分段时间与称呼；附带四时段指示条和会轮换副标题的问候卡片，首屏用静态文案避免水合差异。
Grid Layout线条网格布局
用全宽横线、竖线容器与点阵分隔带，为内容建立清晰的秩序。