项目档案库 / SDK

pbakaus/radiant 开源库：用途、安装与使用指南

Radiant 提供 94 个精选生成式着色器，每个均为独立 HTML 文件，零依赖零构建。通过 iframe 嵌入网页，支持 postMessage 动态调整参数，6 种 CSS 滤镜配色方案。适用于网站背景、Hero 区域、数字标牌等。本页包含完整安装指南、使用方法和实现特点。

978HTMLStar 于 2026年3月19日2026年9月18日更新

查看 GitHub 仓库打开项目主页

AI 总结

Radiant 是一个精选生成式着色器艺术库，提供 94 个零依赖的 Canvas 2D/WebGL 视觉效果，通过 iframe 即可嵌入网页，支持运行时参数调整和 6 种 CSS 滤镜配色切换，适用于网站背景、Hero 区域等多种场景。

中文项目介绍

Radiant 是由 Paul Bakaus 维护的开源项目，旨在为 Web 开发者提供高质量、即插即用的生成式着色器视觉效果。项目核心包含 94 个独立 HTML 文件，每个文件整合了样式、Canvas 元素和脚本，无需任何依赖或构建步骤即可运行。这些着色器解决了 WebGL/Canvas 开发复杂度高、集成困难的问题，让用户能快速在网站背景、Hero 区域、演示文稿或数字标牌中实现专业级动态效果。所有着色器均支持鼠标/触摸交互、可见性暂停以节省电量、DPR 自适应渲染，并可通过 postMessage 接口实时调整参数。项目还提供在线画廊（SvelteKit 构建）和压缩包下载，并内置 6 种配色方案（Amber、Mono、Blue、Rose、Emerald、Arctic），通过 CSS filter 即可全局切换颜色，无需修改着色器代码。MIT 许可允许自由用于个人与商业项目。

详细信息与使用说明

1. 项目定位与用途

Radiant 是一个精选的生成式着色器艺术集合，定位为 Web 视觉效果的即插即用资源库。它提供 94 个覆盖 Canvas 2D 与 WebGL 的着色器，每个均为独立 HTML 文件，零依赖、零构建步骤。主要用途是为网站、演示文稿或数字标牌提供动态背景、Hero 视觉元素或创意编码参考，降低高质量 Web 图形集成的门槛。

2. 解决的问题

Radiant 解决了 Web 开发者集成复杂着色器效果时的三大痛点：一是消除 WebGL/Canvas 的开发学习成本和代码复杂度，提供开箱即用的文件；二是避免依赖管理和构建配置的麻烦，每个着色器可直接在浏览器运行；三是提供统一的参数控制接口（postMessage）和配色方案（CSS filter），实现运行时定制而无需修改源码。此外，可见性暂停和 DPR 自适应等优化也减轻了性能负担。

3. 适用场景

项目明确适用于：网站全屏背景动画、 landing page 的 Hero 区域视觉、演示文稿和演讲背景、 lobby 或活动的数字标牌显示，以及创意编码学习与 remix。着色器按视觉风格分类（如 fill、object、particles、physics、noise、organic、geometric），用户可根据需求选择合适的效果。所有着色器均支持交互，适合需要用户参与的场景。

4. 安装方式

要本地运行 Radiant 画廊或开发新着色器，需执行以下步骤：首先克隆仓库（git clone https://github.com/pbakaus/radiant.git），然后进入目录运行 npm install 安装依赖。开发模式下使用 npm run dev 启动 Vite 开发服务器；生产构建使用 npm run build；若需生成着色器压缩包，运行 npm run build:zip。仓库中未明确给出其他包管理器（如 yarn）的指令，也未提供 CDN 或直接下载单文件的安装方式，但用户可直接从 static/ 目录复制 HTML 文件使用。

5. 使用方式

使用 Radiant 着色器非常简单：第一步，从在线画廊（radiant-shaders.com）下载压缩包，或直接从仓库 static/ 目录选取单个 HTML 文件；第二步，通过 iframe 嵌入页面，示例代码为 <iframe src="shader.html" style="position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: -1;"></iframe>；第三步，如需动态控制，使用 postMessage 向 iframe 发送参数更新，格式为 { type: 'param', name: 'PARAM_NAME', value: newValue }。所有可用参数及其范围定义在 src/lib/shaders.ts 中。配色切换则通过对 iframe 应用 CSS filter 实现，如 filter: hue-rotate(175deg) 对应蓝色方案。

6. 实现特点与补充说明

Radiant 的技术实现具有几个关键特点：前端画廊基于 SvelteKit 2 + Svelte 5 构建，采用静态站点适配（@sveltejs/adapter-static）；着色器本身完全独立，不依赖任何运行时库。性能优化方面，画廊组件使用 IntersectionObserver 实现 iframe 懒加载，并自动在不可见时暂停动画以节省电量；着色器渲染考虑设备像素比但上限为 2x，并目标 60fps。元数据驱动设计：src/lib/shaders.ts 集中管理所有着色器的参数、标签和 hero 布局配置，支持动态过滤与排序。仓库还包含脚本用于生成预览图（generate-previews.mjs）和视频（generate-videos.mjs），以及构建 zip 包的脚本（build-zip.mjs）。配色方案定义在 src/lib/color-schemes.ts，共 6 种，通过 CSS 滤镜实现无损切换。

思维导图

Radiant 项目结构

核心资源

94 个着色器 HTML (static/)

着色器元数据 (src/lib/shaders.ts)

配色方案 (src/lib/color-schemes.ts)

画廊前端

SvelteKit 应用 (src/)

UI 组件 (src/lib/components/)

路由与页面 (src/routes/)

构建与脚本

开发构建 (package.json scripts)

Zip 打包 (scripts/build-zip.mjs)

预览生成 (scripts/generate-previews.mjs)

视频生成 (scripts/generate-videos.mjs)

配置文件

Vite 配置 (vite.config.ts)

TypeScript 配置 (tsconfig.json)

依赖定义 (package.json)

静态配置 (static/_headers)

常见问题

如何嵌入一个 Radiant 着色器到我的网页？

只需使用 iframe 标签引用 static/ 目录下的 HTML 文件，并设置样式为全屏固定定位即可。示例：<iframe src="shader.html" style="position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: -1;"></iframe>。

如何动态调整着色器的参数（如速度、颜色）？

通过 postMessage 向 iframe 的 contentWindow 发送消息，格式为 { type: 'param', name: '参数名', value: 新值 }。所有可用参数及其默认值、范围均定义在 src/lib/shaders.ts 文件中。

着色器是否有外部依赖或需要构建步骤？

没有。每个着色器都是自包含的独立 HTML 文件，内联了样式和脚本，直接在浏览器中打开即可运行，无需安装任何库或执行构建。

如何切换着色器的颜色方案？

Radiant 提供 6 种配色方案（Amber、Mono、Blue、Rose、Emerald、Arctic），通过对 iframe 应用 CSS filter 实现，无需修改着色器代码。例如，filter: hue-rotate(175deg) 对应蓝色方案。

可以在商业项目中使用这些着色器吗？

可以。Radiant 采用 MIT 许可证，允许在个人或商业产品、客户项目中自由使用， attribution（署名）表示欢迎但非强制要求。