wave-mosaic-web-theme · git:20260629.23d88bc · 2026-06-29 · sha256 10494dcbb7a15587
wave-mosaic-web-theme git:20260629.23d88bcA

Name: wave-mosaic-web-theme
Author: black-yt
Immutable. This exact content is served forever at /api/v1/blob/10494dcbb7a15587.
---
name: wave-mosaic-web-theme
description: "当需要为网页复刻 black-yt 风格的高级前端主题时使用；覆盖 canvas wave-mosaic 动态方块背景、Pure White/Warm Yellow/Cool Blue/Dark 四种背景颜色切换、Space Grotesk 字体、CSS 变量、floating background dots、顶部圆角导航栏、论文筛选滑块、卡片/表格/按钮主题化和性能细节。"
---

# Wave Mosaic Web Theme

## 设计来源

- 核心视觉和源头设计参考 [black-yt/black-yt.github.io](https://github.com/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](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](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/theme-implementation.md)。顶部导航栏和论文筛选滑块见 [references/navigation-and-segmented-controls.md](references/navigation-and-segmented-controls.md)。

需要写页面时：

1. 先复制参考文件中的 `head` 字体和 favicon 配置。
2. 复制 4 种背景颜色的 CSS 变量。
3. 复制 `#theme-switcher` 和 `.theme-dot` 样式。
4. 复制 canvas wave-mosaic 背景脚本。
5. 复制 background color switcher 脚本。
6. 需要顶部导航、页面跳转或论文筛选滑块时，复制导航与 segmented control reference。
7. 再按页面需求添加卡片、表格、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。
- 深色模式下正文、链接、表格、代码块都可读。