UI Component Library
课件的组件库
调研 esther-design-system（一套给 AI 用的个人品牌设计系统）后，把它「用规则约束 AI 自由发挥」 的思路搬过来：把课件用到的通用组件排列组合到一个静态页面， 再吸取其中适合科学课件的交互效果，改用本站色板重做。所有色值都来自var(--color-*)token，不硬编码。
01 · Foundations
基础组件
全站所有交互组件共享的最底层积木，来自 components/ui/。改这里的样式会影响全站，请谨慎。
RangeSlider
用于深度/浓度/温度等连续数值的教学交互，配合 valueDisplay 展示当前值。
StatCard
展示单个关键数值，tone 对应语义色：ocean 中性 / cyan 正面 / flame 警示。
SegmentedControl
少量选项（2-4个）的互斥切换，比原生 select 更适合教学场景的强调感。
HintCard
info/warn/danger/neutral 四种语义，警示强度递增，warn 用 #E5872A 橙色。
InteractiveCard
示例
容器标题
中间是自定义交互内容区域。
这是底部备注区，通常放数据来源或安全提示。
带标题栏/底部提示的统一交互组件外壳，几乎所有教学交互组件都基于它搭建。
PendingNote
课件新增章节里，暂无真实素材/一手资料时的统一占位标记，橙色边框区别于正式内容。
02 · Card Patterns
卡片模式
站内高频出现的卡片视觉变体样式，均已在真实页面使用（见每张卡片下的入口链接），这里只做样式抽离展示，不重复教学数据。
编号大字卡片
耳压平衡
一句话说明这个点在教什么。
踢蹼技术
一句话说明这个点在教什么。
流线型
一句话说明这个点在教什么。
用于强调「有几步/有几种」的清单类内容，编号做视觉锚点。
标签分类卡片
考核标准示例
具体时长/深度数值。
考核标准示例
具体时长/深度数值。
考核标准示例
具体时长/深度数值。
用于按类别（考核标准/装备类型）展示条目，顶部 tag 用语义色区分类别。
时间轴条目
纵向时间轴，圆点+连接线，paradigm 高亮节点用 flame 强调「范式转移」类关键节点。
03 · Motion & Interaction
交互效果
调研 esther-design-system 后吸取的交互组件。原版的品牌色板、字体（Bangers/Fraunces）和部分效果（点击粒子爆炸、星光文字、漫画文字、旋转文字环）更贴合个人博客/活动页调性，与本站宪法有冲突，因此全部重新设计：颜色/字体换成本站 token，语义收窄到教学场景（警示、达标反馈、概念总览），不是简单排除不用。
TextHighlighter 正文标注
自由潜的呼吸渴望来自CO2 浓度上升， 不是缺氧。真正危险的是过度通气， 它会让血液CO2 骤降， 掩盖了O2 已经很低的信号。
一段正文最多标注 1-2 处，避免视觉噪音。box/danger 变体呼应 HintCard 的警示语义。
FlipCard 翻转卡片
正面放核心词/问题，背面放解释/答案。适合术语闪卡、公式速查。
HoverRevealCard 悬停揭示卡片
悬停 / 聚焦查看 →
运动控制丧失，是黑视（BO）前的警示征兆，出现即需立即介入。
悬停 / 聚焦查看 →
脑部轻度缺氧导致的肌肉不自主抽动，常见于泳池动态项目上浮后。
比翻转卡片更轻量，正面常驻，悬停/聚焦时遮罩浮现。已绑定 focus，键盘可达。
TabSwitcher 标签切换
推进效率最高，需要专门学习海豚式踢腿技术。
2-5 个标签为宜。点标签直接看到对应说明，适合装备型号对比、术语对比。
Accordion 手风琴
默认展开第一项。适合 FAQ、分步说明、有层级的目录结构。
TypingText 打字机文字
自由潜教会你
适合 Hero 区多个同类关键词轮播。尊重 reduced-motion，减弱动效时只显示第一个词。
KineticText 动态字重文字
悬停单字变粗+变色，适合关于页/装饰性标题，不建议用在正文密集段落。
SparkleHighlight 星光文字
自由潜教会你 信任身体
原版蓝/黄/红三色星光收窄为 cyan 单色，数量从 8-12 降到 6 个。适合 Hero 关键词、达标反馈，不用在正文。
ImpactBadge 强调徽标
改造自漫画文字，去掉描边/半色调纹理/装饰字体，保留冲击力。danger 对应安全红线，positive 对应正面达成。
AchievementBurst 达标粒子反馈
已触发 0 次
改造自点击粒子爆炸，收窄到明确达标语义（非装饰性点击）。颜色实时读取 --color-ocean/--color-cyan，自动适配 4 套主题。
HubSpoke 放射连接图
原版旋转文字环换成静态放射布局：标签持续转动会让文字难以读清，牺牲可读性换视觉效果。改成固定分布+连接线，只做一次入场淡入，标签始终可读。3-6 个标签为宜。
04 · Page Patterns
页面级模式
跨页面复用的布局/交互模式，本身承载真实教学内容，因此不在这里重复实现，只给出入口链接。
章节结构（ChapterSection）
编号 + eyebrow + 大标题 + 正文的固定节奏，是全站所有主题正文章节的统一骨架。滚动进入视口时 stagger 淡入。
真实页面 → 现在的自由潜水都在比什么课堂演示独享内容（PresenterOnly）
dynamic import + SSR 隔离，学员设备只看到占位卡片，教练输入口令后本设备解锁敏感/主观内容。
真实页面 → 我应该选哪个体系 · 体系迭代观察来源
交互效果调研自 esthersjw/esther-design-system。原版的品牌色板与字体（Bangers/Fraunces）没有直接使用； 点击粒子爆炸、星光文字、漫画文字、旋转文字环这几个效果也不是简单排除， 而是全部重新设计：颜色换成本站 var(--color-*) token， 语义收窄到具体教学场景（安全红线强调、训练达标反馈、概念总览），见「交互效果」分区第 17-20 项。