# 前端设计素材目录

生成日期：2026-10-15。由 `node tools/audit-library.js` 根据当前清单生成。

89 件素材（55 个组件、34 个页面），24 套风格，16 个分类，13 个合集。

## 按钮（3）

| ID | 素材 | 类型 / 运行条件 | 标签 |
| --- | --- | --- | --- |
| c-02 | 幽灵边框按钮 | 组件 · 离线可用 | 次级操作 / 描边 / 填充动效 |
| c-25 | 流光描边按钮 | 组件 · 离线可用 | 按钮 / 描边 / conic-gradient |
| c-26 | 按钮加载态 | 组件 · 离线可用 | 按钮 / 加载 / 反馈 |

## 卡片（4）

| ID | 素材 | 类型 / 运行条件 | 标签 |
| --- | --- | --- | --- |
| c-03 | 玻璃拟态卡片 | 组件 · 离线可用 | 毛玻璃 / backdrop-filter / 浮层 |
| c-06 | 头像组堆叠 | 组件 · 离线可用 | 头像 / 社交 / 堆叠 |
| c-27 | 3D 翻转卡片 | 组件 · 离线可用 | 卡片 / 3D / 翻转 |
| c-28 | 悬停上浮商品卡 | 组件 · 离线可用 | 卡片 / 商品 / hover |

## 表单（5）

| ID | 素材 | 类型 / 运行条件 | 标签 |
| --- | --- | --- | --- |
| c-31 | 胶囊搜索框 | 组件 · 离线可用 | 表单 / 搜索 / 聚焦展开 |
| c-36 | 数量步进器 | 组件 · 离线可用 | 表单 / 步进器 / 购物车 |
| p-10 | 密码可见性与强度 | 组件 · 离线可用 · 本次新增 | 表单 / 密码 / 校验 / 交互 |
| p-11 | 本地文件选择区 | 组件 · 离线可用 · 本次新增 | 表单 / 文件上传 / 本地 / 交互 |
| p-12 | 字数限制留言框 | 组件 · 离线可用 · 本次新增 | 表单 / textarea / 字数 / 交互 |

## 导航（6）

| ID | 素材 | 类型 / 运行条件 | 标签 |
| --- | --- | --- | --- |
| c-37 | 移动端底部导航 | 组件 · 离线可用 | 导航 / 底部栏 / 移动端 |
| c-38 | 下拉菜单 | 组件 · 离线可用 | 导航 / 下拉 / 菜单 |
| c-39 | 步骤条 | 组件 · 离线可用 | 导航 / 步骤 / 流程 |
| i-01 | 玻璃 Dock · 悬停放大程序坞 | 组件 · 离线可用 · 本次新增 | Dock / doc栏 / 程序坞 / macOS / 磁吸 / 悬停放大 / 交互工作台 |
| i-03 | 扇形快捷菜单 · 弹性展开 | 组件 · 离线可用 · 本次新增 | 径向菜单 / 快捷操作 / 弹性 / 导航 / 交互工作台 |
| i-04 | 文档目录 · 滚动跟随导航 | 组件 · 离线可用 · 本次新增 | 文档 / doc栏 / 目录 / 滚动监听 / scrollspy / 交互工作台 |

## 交互（17）

| ID | 素材 | 类型 / 运行条件 | 标签 |
| --- | --- | --- | --- |
| c-07 | 3D 倾斜卡片 | 组件 · 离线可用 | 3D / 鼠标跟随 / perspective |
| c-08 | 浮动标签输入框 | 组件 · 离线可用 | 表单 / 输入框 / 浮动标签 |
| c-09 | Tabs 标签页 | 组件 · 离线可用 | 导航 / 分段控件 / 胶囊 |
| c-10 | 手风琴折叠 | 组件 · 离线可用 | 折叠 / details / FAQ |
| c-23 | 弹性开关 | 组件 · 离线可用 | 开关 / 表单 / 回弹 |
| c-24 | 无缝滚动跑马灯 | 组件 · 离线可用 | 滚动 / 跑马灯 / 无缝循环 |
| c-40 | 工具提示 | 组件 · 离线可用 | 交互 / tooltip / 悬浮 |
| c-41 | 星级评分 | 组件 · 离线可用 | 交互 / 评分 / 星星 |
| c-42 | 确认对话框 | 组件 · 离线可用 | 交互 / 模态 / 确认 |
| c-43 | 聊天气泡 | 组件 · 离线可用 | 交互 / 聊天气泡 / 客服 |
| i-02 | Spotlight · 快捷命令面板 | 组件 · 离线可用 · 本次新增 | 命令面板 / Spotlight / 搜索 / 键盘 / Command K / 交互工作台 |
| i-05 | 图像对比 · 拖动揭幕 | 组件 · 离线可用 · 本次新增 | 对比滑块 / 图片对比 / 拖拽 / range / before after / 交互工作台 |
| i-06 | 可排序清单 · 拖放与键盘 | 组件 · 离线可用 · 本次新增 | 拖放排序 / 清单 / 键盘 / 触屏 / 工作流 / 交互工作台 |
| a-01 | 节点画布 · 缩放、连线与撤销 | 组件 · 离线可用 · 本次新增 | 节点编辑器 / 无限画布 / SVG / 拖拽 / 撤销 / 工作流 / 进阶交互 |
| a-02 | 多轨时间轴 · 剪辑、吸附与播放 | 组件 · 离线可用 · 本次新增 | 时间轴 / 剪辑器 / 播放头 / 拖拽 / 键盘 / 吸附 / 进阶交互 |
| a-03 | 贝塞尔缓动 · 曲线与运动预览 | 组件 · 离线可用 · 本次新增 | cubic-bezier / SVG / 缓动曲线 / 动效工具 / 控制柄 / 进阶交互 |
| a-04 | 动态图库 · FLIP 重排与共享展开 | 组件 · 离线可用 · 本次新增 | FLIP / Web Animations / 布局动画 / 筛选图库 / 共享元素 / 作品集 / 进阶交互 |

## 加载（4）

| ID | 素材 | 类型 / 运行条件 | 标签 |
| --- | --- | --- | --- |
| c-11 | 骨架屏加载 | 组件 · 离线可用 | 加载 / 骨架屏 / shimmer |
| c-12 | 环形进度条 | 组件 · 离线可用 | 加载 / 进度 / SVG |
| c-44 | 轨道加载 | 组件 · 离线可用 | 加载 / 轨道 / spinner |
| c-45 | 上传进度卡 | 组件 · 离线可用 | 加载 / 进度 / 上传 |

## 背景（3）

| ID | 素材 | 类型 / 运行条件 | 标签 |
| --- | --- | --- | --- |
| c-15 | 极光流动背景 | 组件 · 离线可用 | 背景 / 氛围 / 光斑 |
| c-46 | 蓝图网格背景 | 组件 · 离线可用 | 背景 / 网格 / 图纸 |
| c-48 | 声呐波纹背景 | 组件 · 离线可用 | 背景 / 波纹 / 雷达 |

## 文字（4）

| ID | 素材 | 类型 / 运行条件 | 标签 |
| --- | --- | --- | --- |
| c-19 | 打字机文字 | 组件 · 离线可用 | 文字 / 打字机 / 等宽 |
| c-20 | 渐变流动文字 | 组件 · 离线可用 | 文字 / 渐变 / background-clip |
| c-21 | 数字滚动计数器 | 组件 · 离线可用 | 文字 / 计数器 / 滚动 |
| c-49 | 霓虹灯文字 | 组件 · 离线可用 | 文字 / 霓虹 / 发光 |

## 数据展示（3）

| ID | 素材 | 类型 / 运行条件 | 标签 |
| --- | --- | --- | --- |
| p-01 | 指标卡 · 迷你趋势 | 组件 · 离线可用 · 本次新增 | 数据 / KPI / SVG / 仪表盘 |
| p-03 | 存储用量环图 | 组件 · 离线可用 · 本次新增 | 数据 / conic-gradient / 存储 |
| p-05 | 活动时间线 | 组件 · 离线可用 · 本次新增 | 数据 / 时间线 / 活动记录 |

## 页面布局（4）

| ID | 素材 | 类型 / 运行条件 | 标签 |
| --- | --- | --- | --- |
| p-06 | 团队任务看板 | 组件 · 离线可用 · 本次新增 | 布局 / 看板 / 任务 / CSS Grid |
| p-07 | 便笺式 Bento 布局 | 组件 · 离线可用 · 本次新增 | 布局 / Bento / CSS Grid / 首屏 |
| p-08 | 文档侧边导航 | 组件 · 离线可用 · 本次新增 | 布局 / 侧栏 / 文档 / 导航 |
| p-09 | 杂志文章摘要 | 组件 · 离线可用 · 本次新增 | 布局 / 文章 / 排版 / 内容卡 |

## 状态反馈（2）

| ID | 素材 | 类型 / 运行条件 | 标签 |
| --- | --- | --- | --- |
| p-14 | 可关闭状态提醒 | 组件 · 离线可用 · 本次新增 | 反馈 / 通知 / 关闭 / 交互 |
| p-15 | 系统服务状态 | 组件 · 离线可用 · 本次新增 | 反馈 / 服务状态 / 监控 / 状态页 |

## 封面特效（22）

| ID | 素材 | 类型 / 运行条件 | 标签 |
| --- | --- | --- | --- |
| fx-01 | [穿越无垠星海](../assets/fx-player.html?fx=0) | 页面 · 离线可用 | Canvas 2D / 首屏背景 / warp |
| fx-02 | [极光下的幻境](../assets/fx-player.html?fx=1) | 页面 · 离线可用 | Canvas 2D / 首屏背景 / aurora |
| fx-03 | [代码即世界](../assets/fx-player.html?fx=2) | 页面 · 离线可用 | Canvas 2D / 首屏背景 / poem rain |
| fx-04 | [流光之海](../assets/fx-player.html?fx=3) | 页面 · 离线可用 | Canvas 2D / 首屏背景 / waves |
| fx-05 | [粒子星球](../assets/fx-player.html?fx=4) | 页面 · 离线可用 | Canvas 2D / 首屏背景 / planet |
| fx-06 | [光之流场](../assets/fx-player.html?fx=5) | 页面 · 离线可用 | Canvas 2D / 首屏背景 / flow field |
| fx-07 | [流星划过夜空](../assets/fx-player.html?fx=6) | 页面 · 离线可用 | Canvas 2D / 首屏背景 / meteor |
| fx-08 | [坠入银河漩涡](../assets/fx-player.html?fx=7) | 页面 · 离线可用 | Canvas 2D / 首屏背景 / galaxy |
| fx-09 | [熔岩之心](../assets/fx-player.html?fx=8) | 页面 · 离线可用 | Canvas 2D / 首屏背景 / lava |
| fx-10 | [盛夏烟花大会](../assets/fx-player.html?fx=9) | 页面 · 离线可用 | Canvas 2D / 首屏背景 / fireworks |
| fx-11 | [星座之网](../assets/fx-player.html?fx=10) | 页面 · 离线可用 | Canvas 2D / 首屏背景 / constellation |
| fx-12 | [生命的螺旋](../assets/fx-player.html?fx=11) | 页面 · 离线可用 | Canvas 2D / 首屏背景 / helix |
| fx-13 | [月光洒满海面](../assets/fx-player.html?fx=12) | 页面 · 离线可用 | Canvas 2D / 首屏背景 / moonlit sea |
| fx-14 | [静谧雪夜](../assets/fx-player.html?fx=13) | 页面 · 离线可用 | Canvas 2D / 首屏背景 / snow |
| fx-15 | [音浪律动](../assets/fx-player.html?fx=14) | 页面 · 离线可用 | Canvas 2D / 首屏背景 / soundwave |
| fx-16 | [凝视黑洞视界](../assets/fx-player.html?fx=15) | 页面 · 离线可用 | Canvas 2D / 首屏背景 / black hole |
| fx-17 | [樱花纷飞时节](../assets/fx-player.html?fx=16) | 页面 · 离线可用 | Canvas 2D / 首屏背景 / sakura |
| fx-18 | [雷暴之夜](../assets/fx-player.html?fx=17) | 页面 · 离线可用 | Canvas 2D / 首屏背景 / storm |
| fx-19 | [波点之海](../assets/fx-player.html?fx=18) | 页面 · 离线可用 | Canvas 2D / 首屏背景 / dot wave |
| fx-20 | [旋转的星轨](../assets/fx-player.html?fx=19) | 页面 · 离线可用 | Canvas 2D / 首屏背景 / star trails |
| cover-fx-caustics | [十种焦散封面特效](../%E7%B4%A0%E6%9D%90/3/%E7%84%A6%E6%95%A3.html) | 页面 · 离线可用 | 焦散 / 光影 / 特效画廊 |
| cover-fx-gallery | [二十套封面特效画廊](../%E7%B4%A0%E6%9D%90/3/%E8%83%8C%E6%99%AF%E4%B8%BB%E9%A2%9820%E7%A7%8D.html) | 页面 · 离线可用 | 特效画廊 / 导航 / 深浅主题 |

## 主题开关（4）

| ID | 素材 | 类型 / 运行条件 | 标签 |
| --- | --- | --- | --- |
| toggle-1 | [主题切换 · 日月](../%E7%B4%A0%E6%9D%90/%E5%BC%80%E5%85%B31.html) | 页面 · 需联网 Three.js | 开关 / 深浅色 / Three.js / WebGL |
| toggle-2 | [3D 日 / 月 切换](../%E7%B4%A0%E6%9D%90/%E5%BC%80%E5%85%B32.html) | 页面 · 需联网 Three.js | 开关 / 3D / 深浅色 |
| toggle-3 | [Dark / Light Toggle](../%E7%B4%A0%E6%9D%90/%E5%BC%80%E5%85%B33.html) | 页面 · 需联网 Three.js | 开关 / 深浅色 / 极简 |
| toggle-3d-sunmoon | [3D 太阳 / 月球 · 深浅色切换按钮](../%E7%B4%A0%E6%9D%90/sun-moon-toggle.html) | 页面 · 离线可用 | 开关 / 3D / 天体 |

## 点云 · 三维（4）

| ID | 素材 | 类型 / 运行条件 | 标签 |
| --- | --- | --- | --- |
| pc-wenyao | [交互点云 · 文鳐](../%E7%B4%A0%E6%9D%90/%E6%96%87%E9%B3%90%E7%82%B9%E4%BA%91.html) | 页面 · 离线可用 | 点云 / 三维投影 / Canvas |
| pc-feiyu | [交互点云 · 侧面飞鱼](../%E7%B4%A0%E6%9D%90/%E4%BE%A7%E9%9D%A2%E9%A3%9E%E9%B1%BC%E7%82%B9%E4%BA%91.html) | 页面 · 离线可用 | 点云 / 三维投影 / Canvas |
| pc-portrait | [点云人像 · 照片生成器](../%E7%B4%A0%E6%9D%90/%E7%82%B9%E4%BA%91%E8%BD%AC%E6%8D%A2.html) | 页面 · 离线可用 | 点云 / 工具 / 图片处理 |
| pc-wenyao-flat | [文鳐点云 · 二维轻量版](../%E7%B4%A0%E6%9D%90/%E6%96%87%E9%B3%90%E7%82%B9%E4%BA%91-%E4%B8%8D%E5%90%AF%E7%94%A8%E4%B8%89%E7%BB%B4.html) | 页面 · 离线可用 · 本次新增 | 点云 / 二维 / Canvas / 轻量 |

## 生成艺术（3）

| ID | 素材 | 类型 / 运行条件 | 标签 |
| --- | --- | --- | --- |
| gen-led36 | [LED MATRIX · 三十六相](../%E7%B4%A0%E6%9D%90/deepseek_html_20261003_2fe25d.html) | 页面 · 离线可用 | LED 点阵 / 文字动效 / 生成艺术 |
| gen-dot36 | [DOT MATRIX · 三十六律](../%E7%B4%A0%E6%9D%90/deepseek_html_20261003_c5b54a.html) | 页面 · 离线可用 | 点阵 / 文字动效 / 生成艺术 |
| gen-dotmatrix | [点阵视觉 · WebGL 工程](../%E7%B4%A0%E6%9D%90/%E7%82%B9%E9%98%B5%E8%A7%86%E8%A7%89%E8%AE%BE%E8%AE%A1/%E7%82%B9%E9%98%B5%E8%A7%86%E8%A7%89-DOT-MATRIX.html) | 页面 · 离线可用 | WebGL / GLSL / 音频联动 / 多作品 |

## 综合演示（1）

| ID | 素材 | 类型 / 运行条件 | 标签 |
| --- | --- | --- | --- |
| sim-foldingwing | [折叠翼跨介质航行器 · 数字孪生](../%E7%B4%A0%E6%9D%90/%E6%8A%98%E5%8F%A0%E7%BF%BC%E8%B7%A8%E4%BB%8B%E8%B4%A8%E8%88%AA%E8%A1%8C%E5%99%A8_%E6%95%B0%E5%AD%97%E5%AD%AA%E7%94%9F%E6%B5%B7%E7%A9%BA%E9%97%AD%E7%8E%AF%E4%BB%BF%E7%9C%9F.html) | 页面 · 需联网 Three.js | 数字孪生 / 仿真可视化 / 仪表 |

## 风格模板

- 杂志编辑（editorial）
- 装饰艺术（deco）
- 孟菲斯（memphis）
- 蓝图（blueprint）
- 新粗野（brutal）
- 瑞士极简（swiss）
- 工业风格（industrial）
- 纸张纹理（paper）
- 黑曜石（obsidian）
- 终端界面（terminal）
- 禅意日式（zen）
- 蒸汽波（vapor）
- 暗黑科技（darktech）
- 手绘速写（sketch）
- 复古胶片（retrofilm）
- 糖果渐变（candy）
- 金属铬（chrome）
- 北欧极简（nordic）
- 像素复古（pixel）
- 泼墨水彩（watercolor）
- 赛博朋克（cyberpunk）
- 极简主义（minimal）
- 古典复兴（classic）
- 未来主义（futurism）

## 场景合集

- **进阶交互与动效编辑**：节点画布、多轨时间轴、贝塞尔曲线与 FLIP 图库：四件带完整操作反馈的编辑器与动效素材，无外部依赖。
- **Dock 与交互工作台**：从玻璃程序坞到命令面板、文档目录、图像对比和拖放清单，六件可直接操作的交互素材。
- **暗夜氛围**：把星空、黑洞与雷暴装进首屏：适合发布会、作品集与一切想在第一秒压住场面的页面。
- **一键换主题**：四种性格迥异的深浅色切换开关，配上几套双主题友好的风格模板，站点主题系统一次配齐。
- **点云与粒子**：从照片生成点云，到七百颗粒子的星球——所有以「点」为最小单位的视觉素材都在这里。
- **首屏 CTA 套装**：按钮、标题动效与背景各就各位，按这套搭配首屏，五分钟搭出一个能打的 Hero 区。
- **生成艺术**：点阵、螺旋与光的海——算法生成的动态视觉，适合活动页、演出视觉与一切需要「活起来」的背景。
- **落地页风格精选**：六套性格鲜明的完整落地页模板：从杂志编辑到蒸汽波，点开即可全屏预览并复制整套代码。
- **表单套件**：搜索、浮动标签、数量步进、密码与留言输入，按真实输入场景取用。
- **导航与反馈**：底部导航、下拉菜单、步骤条，配上 Tooltip、Toast、聊天气泡与评分——页面的骨架与反馈系统一次到位。
- **轻量后台与数据面板**：指标趋势、存储、活动记录、任务看板与服务状态，搭建轻量后台概览。
- **内容与页面布局**：Bento 网格、杂志摘要和文档侧栏，搭配编辑与极简风格使用。
- **表单输入与状态反馈**：密码、文件选择、字数统计与可关闭提醒，让页面覆盖输入与反馈场景。