Wave mosaic web theme
徐望瀚日常工作中使用和维护的可复用 agent skills。
npx -y skills add black-yt/skills --skill wave-mosaic-web-themeAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
当需要为网页复刻 black-yt 风格的高级前端主题时使用；覆盖 canvas wave-mosaic 动态方块背景、Pure White/Warm Yellow/Cool Blue/Dark 四种背景颜色切换、Space Grotesk 字体、CSS 变量、floating background dots、顶部圆角导航栏、论文筛选滑块、卡片/表格/按钮主题化和性能细节。
SKILL.md
7.3 KB, as published. Nobody here has run it
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。
- 深色模式下正文、链接、表格、代码块都可读。