black-yt Wave Mosaic Web Theme
设计来源
- 核心视觉和源头设计参考 black-yt/black-yt.github.io。
- 这个 skill 记录的是当前可复用的设计模式和实现骨架；源站后续可能继续演进，复刻时应保留动态方块背景、4 种背景颜色切换、
Space Grotesk字体和轻量透明卡片质感这些核心特征，再按目标页面的信息架构做适配。
文件导航
| 序号 | 文件内容概览 | 关键词 | 触发时机 | 文件路径 |
|---|---|---|---|---|
| 1 | 说明 Wave Mosaic 主题的视觉目标和约束，覆盖固定全屏 canvas 动态方块、4 种背景颜色、CSS 变量、Space Grotesk 字体、透明卡片、低噪声 hover/glow 和性能参数。 | wave mosaic、canvas background、dynamic tiles、4 backgrounds、CSS variables、Space Grotesk、theme switcher、transparent cards、hover glow、performance、24fps、mosaic grid | 触发本 skill 后默认读取；设计页面视觉方向前；判断是否需要 canvas 背景或 4 色切换前；调整动态方块参数、字体、透明质感或组件风格前读取 | SKILL.md |
| 2 | 提供可直接复刻的 HTML/CSS/JS 实现，包含 <head> 字体和 favicon、固定 canvas、主题按钮、data-theme 切换、CSS 变量、背景绘制脚本和页面结构骨架。 |
HTML、CSS、JavaScript、<head>、favicon、Google Fonts、#wave-canvas、data-theme、theme dots、canvas draw loop、responsive、copyable template |
需要生成完整页面文件前；复刻一模一样的背景和主题切换前；迁移到 GitHub Pages 前；检查 favicon/字体/canvas/主题按钮是否缺失时必须读取 | references/theme-implementation.md |
| 3 | 提供源站同款顶部圆角导航栏和论文筛选滑块的可复制实现，覆盖居中横向导航、移动端横向滚动、scroll-spy 高亮、anchor 跳转、active link 自动入视、core/collab 论文切换、滑块 indicator 定位和主题变量复用。 | top nav、masthead、site-nav、anchor navigation、scroll-spy、smooth scroll、nav-active、seg-control、seg-indicator、paper filter、core papers、collaboration papers、data-paper-type、offsetLeft、rounded tabs | 需要复刻顶部导航栏前；需要页面内锚点跳转和当前章节高亮前；需要核心论文/合作论文筛选滑块前；调整圆角、边框、字体、滑块动画、移动端横向滚动或 active 状态时必须读取 | references/navigation-and-segmented-controls.md |
使用原则
- 用这个 skill 复刻一种低噪声、高级、学术/技术感的网页主题。
- 必须包含固定全屏 canvas 动态方块背景，背景位于内容下方且不拦截点击。
- 必须包含 4 种背景颜色：
white、yellow、blue、dark。 - 背景颜色切换使用
<html data-theme="...">；默认白色背景不设置data-theme。 - 颜色必须由 CSS custom properties 驱动，不要在组件里散落硬编码主题色。
- 字体优先使用
Space Grotesk，中文/系统 fallback 使用Noto Sans SC、Inter、ui-sans-serif。 - 页面主体保持透明，让 canvas wave-mosaic 背景可见。
- 组件风格使用轻微边框、低饱和渐变、细腻 hover 和主题色 glow，不使用大面积高饱和渐变。
必读实现
完整背景和主题实现见 references/theme-implementation.md。顶部导航栏和论文筛选滑块见 references/navigation-and-segmented-controls.md。
需要写页面时：
- 先复制参考文件中的
head字体和 favicon 配置。 - 复制 4 种背景颜色的 CSS 变量。
- 复制
#theme-switcher和.theme-dot样式。 - 复制 canvas wave-mosaic 背景脚本。
- 复制 background color switcher 脚本。
- 需要顶部导航、页面跳转或论文筛选滑块时，复制导航与 segmented control reference。
- 再按页面需求添加卡片、表格、accordion 或内容区。
动态方块背景
核心参数必须保持一致：
| 参数 | 值 | 作用 |
|---|---|---|
TILE |
26 |
每个方块的网格尺寸 |
GAP |
1 |
方块间隔，形成 mosaic grid |
FRAME_MS |
1000 / 24 |
约 24 fps，减少 CPU 占用 |
t += |
0.007 |
慢速平静波动 |
z-index |
0 |
背景层 |
pointer-events |
none |
不拦截页面交互 |
每个 tile 的透明度来自两组交叉 sine wave：
0.6 * sin(c * 0.21 + t * 0.36) * sin(r * 0.17 + t * 0.28)0.4 * sin(c * 0.11 - r * 0.13 + t * 0.19)- 用 cubic bias：
v = norm * norm * norm - 透明度范围：
0.004 + v * 0.186 - 低于
0.02的 tile 跳过绘制，提高性能。
背景颜色对应 RGB：
| Theme | RGB |
|---|---|
white |
10,10,10 |
yellow |
120,85,20 |
blue |
38,88,155 |
dark |
220,210,175 |
4 种背景颜色系统
必须提供这些背景颜色：
white：纯白、黑灰文字、低对比浅灰边框。yellow：暖黄纸感、棕色文字、低饱和米色组件。blue：冷蓝技术感、蓝灰背景、深蓝文字。dark：近黑背景、暖灰文字、暗色组件。
必须包含这些变量组：
- 页面：
--bg、--masthead-bg、--masthead-border - 卡片/表格：
--paper-border、--paper-hover - 组件：
--c-bg-start、--c-bg-end、--c-border、--c-text - hover：
--c-hover-start、--c-hover-end、--c-hover-border、--c-hover-text - segmented / active：
--seg-start、--seg-end、--seg-shadow、--seg-inactive、--seg-active-text - glow：
--glow-rgb
Background Color Switcher
- 位置：固定在右下角，
bottom: 1.5em; right: 1.5em。 - 容器：pill 形，
border-radius: 9999px。 - dot：
18px × 18px圆点。 - active dot：
scale(1.35)，并用双层box-shadow表达当前背景颜色。 - hover dot：
scale(1.18)。 - 本地存储 key 推荐用项目名，例如
site-background或[project]-background。
组件复刻规则
- 内容容器用
position: relative; z-index: 1压在 canvas 上方。 - 表格/卡片背景用
linear-gradient(135deg, var(--c-bg-start), var(--c-bg-end))。 - 边框统一用
1px或1.5px solid var(--c-border)。 - hover 时只做轻微
translateY(-1px/-2px)、边框变深和低透明阴影。 - 深色背景要显式设置文本、链接、表格边框和代码块颜色。
- 移动端避免内容宽度溢出；固定控制器要给足
z-index。
验证清单
- 4 个 background dots 都可点击，刷新后保留背景颜色。
white背景时<html>不带data-theme。- canvas 背景可见，页面主体不是不透明白底。
- 背景在切换背景颜色后同步变化。
- 滚动和点击不受 canvas 影响。
- 切到后台时动画暂停，回到页面后恢复。
- mobile resize 不因为地址栏高度变化频繁重设 canvas。
- 深色模式下正文、链接、表格、代码块都可读。