diff --git a/docs/WEBGL-WALLPAPER.md b/docs/WEBGL-WALLPAPER.md
new file mode 100644
index 0000000000..66bbfb78c5
--- /dev/null
+++ b/docs/WEBGL-WALLPAPER.md
@@ -0,0 +1,55 @@
+# WebGL 壁纸
+
+在显示设置的「壁纸模式」中选择 **WebGL 动态壁纸**，或把 [`backgroundWallpaper.mode`](../src/config/backgroundWallpaper.ts) 设为 `"webgl"`。默认加载 `cloud-train`（云海、蒸汽列车与桥梁）。WebGL 2 不可用、场景加载失败或着色器报错时，原图片壁纸会保留为回退；切走该模式时会释放画布和场景资源。
+
+## 配置 Cloud Train
+
+```ts
+webgl: {
+  scene: "cloud-train",
+  options: {
+    speed: 1, resolution: 0.75, feedback: 0.3,
+    zoom: 1, offset: 0, amplitude: 1, detail: 8,
+    exposure: 1, saturation: 1, hue: 0, temperature: 0,
+    skyTint: "#ffffff", smokeTint: "#ffffff", trainTint: "#ffffff",
+    introEnabled: true, introDuration: 3, introFeather: 0.22,
+    paused: false,
+  },
+},
+```
+
+`speed` 范围 0–5；`resolution` 范围 0.25–1；`feedback` 范围 0–0.85。场景会限制其余参数范围，避免无效配置直接进入着色器。窗口隐藏时停止渲染；系统开启减少动态效果时保持静态画面。
+
+## 使用自己的片元着色器
+
+把 WebGL 2 片元着色器放在 `public` 下。例如已提供的 [`example-wallpaper.frag`](../public/assets/shaders/example-wallpaper.frag)：
+
+```ts
+webgl: {
+  scene: "fragment",
+  options: {
+    url: "/assets/shaders/example-wallpaper.frag",
+    speed: 1,
+    resolution: 1,
+  },
+},
+```
+
+着色器须以 `#version 300 es` 开头，声明 `uniform vec3 iResolution`、`uniform float iTime`、`out vec4 color`，并提供 `void main()`。渲染宿主自动更新分辨率和时间。`url` 也可指向允许跨域读取的地址。
+
+## 编写完整场景模块
+
+多通道、反馈纹理或自行管理参数的场景，可在 [`src/utils/webgl-wallpaper/scenes/`](../src/utils/webgl-wallpaper/scenes/) 新增 `my-scene.ts`。模块默认导出一个接收 `WebGLWallpaperSceneContext` 的工厂函数，返回含 `dispose()` 的对象；把配置 `scene` 改为 `"my-scene"` 即可。宿主通过 `import.meta.glob` 按需加载，不用修改模式切换代码。工厂应在画出第一帧后调用 `onFirstFrame()`，并在 `dispose()` 中取消动画帧、监听器及 GPU 资源；可使用 `signal` 取消异步资产加载。
+
+```ts
+import type { WebGLWallpaperSceneContext } from "../types";
+
+export default function createScene({ canvas, onFirstFrame }: WebGLWallpaperSceneContext) {
+  const gl = canvas.getContext("webgl2");
+  if (!gl) throw new Error("WebGL 2 is unavailable");
+  // 在此编译着色器并启动渲染；第一帧成功后调用 onFirstFrame()。
+  return { dispose() { /* 释放场景的 WebGL 资源与监听器 */ } };
+}
+```
+
+Cloud Train 的完整多通道实现见 [`cloud-train.ts`](../src/utils/webgl-wallpaper/scenes/cloud-train.ts)，宿主生命周期见 [`host.ts`](../src/utils/webgl-wallpaper/host.ts)。
diff --git a/docs/screenshots/webgl-cloud-train-desktop.png b/docs/screenshots/webgl-cloud-train-desktop.png
new file mode 100644
index 0000000000..9ba9d4ebe3
Binary files /dev/null and b/docs/screenshots/webgl-cloud-train-desktop.png differ
diff --git a/public/assets/shaders/example-wallpaper.frag b/public/assets/shaders/example-wallpaper.frag
new file mode 100644
index 0000000000..f08aba02be
--- /dev/null
+++ b/public/assets/shaders/example-wallpaper.frag
@@ -0,0 +1,12 @@
+#version 300 es
+precision highp float;
+uniform vec3 iResolution;
+uniform float iTime;
+out vec4 color;
+
+void main() {
+    vec2 uv = gl_FragCoord.xy / iResolution.xy;
+    float wave = 0.5 + 0.5 * sin(uv.x * 8.0 + iTime * 0.4);
+    vec3 sky = mix(vec3(0.02, 0.08, 0.16), vec3(0.08, 0.32, 0.48), uv.y);
+    color = vec4(sky + vec3(0.03, 0.07, 0.09) * wave, 1.0);
+}
diff --git a/src/components/controls/DisplaySettingsIntegrated.svelte b/src/components/controls/DisplaySettingsIntegrated.svelte
index c77c01be61..ea98077790 100644
--- a/src/components/controls/DisplaySettingsIntegrated.svelte
+++ b/src/components/controls/DisplaySettingsIntegrated.svelte
@@ -4,6 +4,7 @@ import {
 	WALLPAPER_FULLSCREEN,
 	WALLPAPER_NONE,
 	WALLPAPER_OVERLAY,
+	WALLPAPER_WEBGL,
 } from "@constants/constants";
 import I18nKey from "@i18n/i18nKey";
 import { i18n } from "@i18n/translation";
@@ -118,7 +119,8 @@ const defaultCardFollowThemeEnabled = getDefaultCardFollowThemeEnabled();
 const isWallpaperSwitchable = displaySettingsConfig.wallpaperModeSwitchable;
 const isFullscreenLayoutSwitchable = $derived(
 	displaySettingsConfig.fullscreenLayoutSwitchable &&
-		wallpaperMode === WALLPAPER_FULLSCREEN,
+		(wallpaperMode === WALLPAPER_FULLSCREEN ||
+			wallpaperMode === WALLPAPER_WEBGL),
 );
 const allowLayoutSwitch = displaySettingsConfig.layoutSwitchable;
 let effectiveDefaultLayout = $derived(
@@ -213,10 +215,12 @@ const hasWallpaperTab = $derived(
 	isWallpaperSwitchable ||
 		isFullscreenLayoutSwitchable ||
 		((wallpaperMode === WALLPAPER_OVERLAY ||
+			wallpaperMode === WALLPAPER_WEBGL ||
 			wallpaperMode === WALLPAPER_FULLSCREEN) &&
 			hasOverlaySettings) ||
 		((wallpaperMode === WALLPAPER_BANNER ||
-			wallpaperMode === WALLPAPER_FULLSCREEN) &&
+			wallpaperMode === WALLPAPER_FULLSCREEN ||
+			wallpaperMode === WALLPAPER_WEBGL) &&
 			hasBannerSettings),
 );
 const hasEffectsTab = $derived(isSakuraSwitchable);
@@ -258,6 +262,7 @@ $effect(() => {
 $effect(() => {
 	if (
 		(wallpaperMode === WALLPAPER_OVERLAY ||
+			wallpaperMode === WALLPAPER_WEBGL ||
 			wallpaperMode === WALLPAPER_FULLSCREEN) &&
 		hasOverlaySettings
 	) {
@@ -270,7 +275,9 @@ let overlaySliderItems = $derived<OverlaySliderItem[]>([
 		key: "opacity",
 		// 全屏壁纸模式不需要背景透明度，隐藏该滑块（仍显示模糊与卡片透明度）
 		enabled:
-			isOverlayOpacitySwitchable && wallpaperMode !== WALLPAPER_FULLSCREEN,
+			isOverlayOpacitySwitchable &&
+			wallpaperMode !== WALLPAPER_FULLSCREEN &&
+			wallpaperMode !== WALLPAPER_WEBGL,
 		label: i18n(I18nKey.overlayOpacity),
 		displayValue: `${Math.round(overlayOpacity * 100)}%`,
 		ariaLabel: i18n(I18nKey.overlayOpacity),
@@ -287,6 +294,7 @@ let overlaySliderItems = $derived<OverlaySliderItem[]>([
 		// 全屏壁纸模式关闭模糊渐变时隐藏模糊滑块（overlay 模式不受影响）
 		enabled:
 			isOverlayBlurSwitchable &&
+			wallpaperMode !== WALLPAPER_WEBGL &&
 			!(wallpaperMode === WALLPAPER_FULLSCREEN && !isFullscreenBlurRampEnabled),
 		label: i18n(I18nKey.overlayBlur),
 		displayValue: `${overlayBlur.toFixed(1)}px`,
@@ -463,7 +471,11 @@ function switchWallpaperMode(newMode: WALLPAPER_MODE) {
 	setWallpaperMode(newMode);
 	window.scrollTo({ top: 0 });
 
-	if (newMode === WALLPAPER_OVERLAY || newMode === WALLPAPER_FULLSCREEN) {
+	if (
+		newMode === WALLPAPER_OVERLAY ||
+		newMode === WALLPAPER_FULLSCREEN ||
+		newMode === WALLPAPER_WEBGL
+	) {
 		requestAnimationFrame(refreshAllRangeProgress);
 	}
 }
@@ -642,6 +654,10 @@ $effect(() => {
 		if (isOverlayCardOpacitySwitchable) {
 			setOverlayCardOpacity(overlayCardOpacity);
 		}
+	} else if (wallpaperMode === WALLPAPER_WEBGL) {
+		// WebGL 由场景直接渲染；仅沿用内容卡片透明度。
+		if (isOverlayCardOpacitySwitchable)
+			setOverlayCardOpacity(overlayCardOpacity);
 	} else if (wallpaperMode === WALLPAPER_FULLSCREEN) {
 		// 全屏壁纸不透明，只应用模糊与卡片透明度
 		if (isOverlayBlurSwitchable) {
@@ -858,11 +874,20 @@ $effect(() => {
 					<Icon icon="material-symbols:hide-image-outline" class="text-[1.25rem] shrink-0"></Icon>
 					<span class="text-xs font-medium">{i18n(I18nKey.wallpaperNoneMode)}</span>
 				</button>
+				<button
+					class="btn-regular rounded-md py-2 px-3 flex items-center justify-center gap-2 active:scale-95 transition-all relative overflow-hidden"
+					class:opacity-60={wallpaperMode !== WALLPAPER_WEBGL}
+					class:bg-(--btn-regular-bg-hover)={wallpaperMode === WALLPAPER_WEBGL}
+					onclick={() => switchWallpaperMode(WALLPAPER_WEBGL)}
+				>
+					<Icon icon="material-symbols:deployed-code-outline" class="text-[1.25rem] shrink-0"></Icon>
+					<span class="text-xs font-medium">{i18n(I18nKey.wallpaperWebglMode)}</span>
+				</button>
 			</div>
 		</div>
 		{/if}
 
-		<!-- Fullscreen Layout Section -->
+		<!-- 全屏图片与 WebGL 共用经典/Hero 布局设置。 -->
 		{#if isFullscreenLayoutSwitchable}
 		<div>
 			<div class="section-title">
@@ -898,8 +923,8 @@ $effect(() => {
 		</div>
 		{/if}
 
-		<!-- Overlay Settings Section（全屏壁纸模式也复用 overlay 的透明/模糊/卡片透明度设置） -->
-		{#if (wallpaperMode === WALLPAPER_OVERLAY || (wallpaperMode === WALLPAPER_FULLSCREEN && fullscreenLayout === "hero")) && hasOverlaySettings && hasVisibleOverlaySlider}
+		<!-- Overlay 设置仅在覆盖模式或全屏 Hero 布局显示；经典布局保留原有卡片样式。 -->
+		{#if (wallpaperMode === WALLPAPER_OVERLAY || ((wallpaperMode === WALLPAPER_FULLSCREEN || wallpaperMode === WALLPAPER_WEBGL) && fullscreenLayout === "hero")) && hasOverlaySettings && hasVisibleOverlaySlider}
 		<div class="">
 			<div class="section-title">
 				{i18n(I18nKey.overlaySettings)}
@@ -937,7 +962,7 @@ $effect(() => {
 		{/if}
 
 		<!-- Banner Settings Section -->
-		{#if (wallpaperMode === WALLPAPER_BANNER || wallpaperMode === WALLPAPER_FULLSCREEN) && hasBannerSettings}
+		{#if (wallpaperMode === WALLPAPER_BANNER || wallpaperMode === WALLPAPER_FULLSCREEN || wallpaperMode === WALLPAPER_WEBGL) && hasBannerSettings}
 		<div class="">
 			<div class="section-title">
 				{i18n(I18nKey.wallpaperSettings)}
@@ -986,8 +1011,8 @@ $effect(() => {
 					</div>
 				</button>
 				{/if}
-				<!-- Waves Animation Switch（横幅模式和 classic 全屏模式） -->
-				{#if isWavesSwitchable && (wallpaperMode === WALLPAPER_BANNER || (wallpaperMode === WALLPAPER_FULLSCREEN && fullscreenLayout === "classic"))}
+				<!-- Waves Animation Switch（横幅模式和 classic 全屏图片/WebGL 模式） -->
+				{#if isWavesSwitchable && (wallpaperMode === WALLPAPER_BANNER || ((wallpaperMode === WALLPAPER_FULLSCREEN || wallpaperMode === WALLPAPER_WEBGL) && fullscreenLayout === "classic"))}
 				<button
 					class="w-full btn-regular rounded-md py-2 px-3 flex items-center gap-3 text-left active:scale-95 transition-all relative overflow-hidden"
 					class:bg-(--btn-regular-bg-hover)={wavesEnabled}
@@ -1004,8 +1029,8 @@ $effect(() => {
 					</div>
 				</button>
 				{/if}
-				<!-- Gradient Transition Switch（横幅模式和 classic 全屏模式） -->
-				{#if isGradientSwitchable && (wallpaperMode === WALLPAPER_BANNER || (wallpaperMode === WALLPAPER_FULLSCREEN && fullscreenLayout === "classic"))}
+				<!-- Gradient Transition Switch（横幅模式和 classic 全屏图片/WebGL 模式） -->
+				{#if isGradientSwitchable && (wallpaperMode === WALLPAPER_BANNER || ((wallpaperMode === WALLPAPER_FULLSCREEN || wallpaperMode === WALLPAPER_WEBGL) && fullscreenLayout === "classic"))}
 				<button
 					class="w-full btn-regular rounded-md py-2 px-3 flex items-center gap-3 text-left active:scale-95 transition-all relative overflow-hidden"
 					class:bg-(--btn-regular-bg-hover)={gradientEnabled}
diff --git a/src/components/layout/Navbar.astro b/src/components/layout/Navbar.astro
index 5f04fea78a..07c5d0204a 100644
--- a/src/components/layout/Navbar.astro
+++ b/src/components/layout/Navbar.astro
@@ -34,7 +34,8 @@ const navbarTransparentMode =
 				const t = backgroundWallpaper.banner?.navbar?.transparentMode || "semi";
 				return t === "semifull" && !isHomePageCheck ? "semi" : t;
 			})()
-		: backgroundWallpaper.mode === "fullscreen"
+		: backgroundWallpaper.mode === "fullscreen" ||
+				backgroundWallpaper.mode === "webgl"
 			? (() => {
 					const fs =
 						backgroundWallpaper.fullscreen?.navbar?.transparentMode ||
@@ -140,7 +141,7 @@ const logoVariants = await Promise.all(
         const isHome = navbar.getAttribute("data-is-home") === "true";
         let mode;
         let blur;
-        if (wm === "fullscreen") {
+        if (wm === "fullscreen" || wm === "webgl") {
           mode = fsTMode === "semifull" && isHome ? "semifull" : "semi";
           blur = fsBlur;
         } else if (wm === "banner") {
diff --git a/src/components/layout/WallpaperSection.astro b/src/components/layout/WallpaperSection.astro
index a947750a4a..9edb810eac 100644
--- a/src/components/layout/WallpaperSection.astro
+++ b/src/components/layout/WallpaperSection.astro
@@ -26,8 +26,10 @@ const wallpaperPosition = state.isFullscreenMode
 ---
 
 <!-- Wallpaper - 如果允许切换则始终渲染，否则只渲染当前模式 -->
-{(state.isWallpaperSwitchable || state.isBannerMode || state.isFullscreenMode || state.isOverlayMode) && (
+{(state.isWallpaperSwitchable || state.isBannerMode || state.isFullscreenMode || state.isOverlayMode || state.isWebglMode) && (
 <div id="wallpaper-wrapper" class="absolute z-10 w-full overflow-hidden" style="--overlay-opacity: ${backgroundWallpaper.overlay?.opacity ?? 0.8}; --overlay-z-index: ${backgroundWallpaper.overlay?.zIndex ?? -1}; --overlay-blur: ${backgroundWallpaper.overlay?.blur ?? 0}px;">
+    {/* 场景宿主始终存在，只有 WebGL 模式才动态加载模块；图片保留为图形不可用时的回退。 */}
+    <div id="webgl-wallpaper-host" aria-hidden="true"></div>
 <!-- 背景图片显示 -->
     {state.hasMultipleImages ? (
     /* 轮播模式：渲染所有图片为 slide-item */
@@ -627,7 +629,7 @@ const wallpaperPosition = state.isFullscreenMode
 )}
 
 {/* 当壁纸未渲染时，添加空的 Swup 占位容器，避免 Swup 找不到容器而回退为整页加载 */}
-{!(state.isWallpaperSwitchable || state.isBannerMode || state.isFullscreenMode || state.isOverlayMode) && (
+{!(state.isWallpaperSwitchable || state.isBannerMode || state.isFullscreenMode || state.isOverlayMode || state.isWebglMode) && (
 <>
     <div id="banner-overlay-container" class="hidden"></div>
     <div id="banner-dim-container" class="hidden"></div>
diff --git a/src/config/backgroundWallpaper.ts b/src/config/backgroundWallpaper.ts
index 456378d44a..82e9b44966 100644
--- a/src/config/backgroundWallpaper.ts
+++ b/src/config/backgroundWallpaper.ts
@@ -1,8 +1,14 @@
 import type { BackgroundWallpaperConfig } from "@/types/backgroundWallpaper";
 
 export const backgroundWallpaper: BackgroundWallpaperConfig = {
-	// 壁纸模式："banner" 横幅壁纸，"fullscreen" 全屏壁纸，"overlay" 覆盖透明，"none" 纯色背景无壁纸
+	// 壁纸模式："banner" 横幅壁纸，"fullscreen" 全屏壁纸，"overlay" 覆盖透明，"webgl" 动态场景，"none" 纯色背景无壁纸
 	mode: "banner",
+	// 将 mode 设为 "webgl"，或在设置面板选择 WebGL，即可显示此场景。
+	// 自定义壁纸：在 src/utils/webgl-wallpaper/scenes/ 添加同名 .ts 模块并修改 scene。
+	webgl: {
+		scene: "cloud-train",
+		options: { speed: 0.75, resolution: 0.75, detail: 6, feedback: 0.3 },
+	},
 	// 是否启用背景视频播放，配置后将在导航栏显示视频播放按钮
 	playerEnable: true,
 	/**
@@ -62,7 +68,7 @@ export const backgroundWallpaper: BackgroundWallpaperConfig = {
 		// playerUrl: "/assets/videos/firefly.mp4",
 		playerUrl: "https://bed.twoleaf.cn/file/1785658612716_firefly.mp4",
 	},
-	// 横幅壁纸和全屏壁纸共享配置
+	// 横幅、全屏图片和 WebGL 壁纸共享标题、波纹等配置
 	common: {
 		// 壁纸遮罩暗度，让横幅文字显示更清晰，0-1之间，值越大越暗
 		dimOpacity: 0.2,
@@ -187,11 +193,11 @@ export const backgroundWallpaper: BackgroundWallpaperConfig = {
 		// 卡片透明度，0-1之间，值越小越透明
 		cardOpacity: 0.6,
 	},
-	// 全屏壁纸模式特有配置
+	// 全屏图片与 WebGL 共用的布局和导航配置
 	// 壁纸模糊度(blur)、卡片透明度(cardOpacity)、层级(zIndex) 复用上方 overlay 模式的配置；
 	// 背景透明度(opacity)不适用（全屏壁纸不透明）；导航栏透明模式由 fullscreen.navbar.transparentMode 控制，脱离 banner 的 navbar 配置
 	fullscreen: {
-		// 布局模式："classic" 经典文档流全屏壁纸，"hero" 固定全屏首屏壁纸
+		// 布局模式："classic" 经典文档流壁纸，"hero" 固定全屏首屏壁纸（WebGL 同样适用）
 		layout: "classic",
 		// 图片位置
 		position: "center",
diff --git a/src/config/displaySettingsConfig.ts b/src/config/displaySettingsConfig.ts
index e5106e6ce3..0dd9738082 100644
--- a/src/config/displaySettingsConfig.ts
+++ b/src/config/displaySettingsConfig.ts
@@ -42,7 +42,7 @@ export const displaySettingsConfig: DisplaySettingsConfig =
 		// 壁纸模式切换开关
 		wallpaperModeSwitchable: true,
 
-		// 全屏壁纸布局切换开关（classic / hero）
+		// 全屏图片与 WebGL 壁纸布局切换开关（classic / hero）
 		fullscreenLayoutSwitchable: true,
 
 		// 水波纹动画开关
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index 42a2122cff..f60536df72 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -9,6 +9,7 @@ export const DEFAULT_THEME: typeof LIGHT_MODE = LIGHT_MODE; // 仅作为向后
 export const WALLPAPER_BANNER = "banner",
 	WALLPAPER_FULLSCREEN = "fullscreen",
 	WALLPAPER_OVERLAY = "overlay",
+	WALLPAPER_WEBGL = "webgl",
 	WALLPAPER_NONE = "none";
 
 // Banner height unit: vh
diff --git a/src/i18n/i18nKey.ts b/src/i18n/i18nKey.ts
index 2e93718f8b..3b4e33082f 100644
--- a/src/i18n/i18nKey.ts
+++ b/src/i18n/i18nKey.ts
@@ -376,6 +376,7 @@ enum I18nKey {
 	fullscreenClassicLayout = "fullscreenClassicLayout",
 	fullscreenHeroLayout = "fullscreenHeroLayout",
 	wallpaperOverlayMode = "wallpaperOverlayMode",
+	wallpaperWebglMode = "wallpaperWebglMode",
 	wallpaperNoneMode = "wallpaperNoneMode",
 
 	// 壁纸设置
diff --git a/src/i18n/languages/en.ts b/src/i18n/languages/en.ts
index c88109fa96..d477a79057 100644
--- a/src/i18n/languages/en.ts
+++ b/src/i18n/languages/en.ts
@@ -390,6 +390,7 @@ export const en: Translation = {
 	[Key.fullscreenClassicLayout]: "Classic",
 	[Key.fullscreenHeroLayout]: "Hero",
 	[Key.wallpaperOverlayMode]: "Overlay Wallpaper",
+	[Key.wallpaperWebglMode]: "WebGL",
 	[Key.wallpaperNoneMode]: "None Wallpaper",
 
 	// Wallpaper Settings
diff --git a/src/i18n/languages/ja.ts b/src/i18n/languages/ja.ts
index 71d8d21600..1633d37396 100644
--- a/src/i18n/languages/ja.ts
+++ b/src/i18n/languages/ja.ts
@@ -387,6 +387,7 @@ export const ja: Translation = {
 	[Key.fullscreenClassicLayout]: "クラシック",
 	[Key.fullscreenHeroLayout]: "ヒーロー",
 	[Key.wallpaperOverlayMode]: "透明",
+	[Key.wallpaperWebglMode]: "WebGL",
 	[Key.wallpaperNoneMode]: "単色背景",
 
 	// 壁紙設定
diff --git a/src/i18n/languages/ko.ts b/src/i18n/languages/ko.ts
index c88720458e..ba81e71d74 100644
--- a/src/i18n/languages/ko.ts
+++ b/src/i18n/languages/ko.ts
@@ -388,6 +388,7 @@ export const ko: Translation = {
 	[Key.fullscreenClassicLayout]: "클래식",
 	[Key.fullscreenHeroLayout]: "히어로",
 	[Key.wallpaperOverlayMode]: "오버레이 배경화면",
+	[Key.wallpaperWebglMode]: "WebGL",
 	[Key.wallpaperNoneMode]: "배경화면 없음",
 
 	// Wallpaper Settings
diff --git a/src/i18n/languages/ru.ts b/src/i18n/languages/ru.ts
index e020dc1bc8..3b5f4170c9 100644
--- a/src/i18n/languages/ru.ts
+++ b/src/i18n/languages/ru.ts
@@ -391,6 +391,7 @@ export const ru: Translation = {
 	[Key.fullscreenClassicLayout]: "Классический",
 	[Key.fullscreenHeroLayout]: "Hero",
 	[Key.wallpaperOverlayMode]: "Прозрачный",
+	[Key.wallpaperWebglMode]: "WebGL",
 	[Key.wallpaperNoneMode]: "Однотонный фон",
 
 	// Настройки обоев
diff --git a/src/i18n/languages/zh_CN.ts b/src/i18n/languages/zh_CN.ts
index b8be021c20..adb3c87e88 100644
--- a/src/i18n/languages/zh_CN.ts
+++ b/src/i18n/languages/zh_CN.ts
@@ -380,6 +380,7 @@ export const zh_CN: Translation = {
 	[Key.fullscreenClassicLayout]: "经典模式",
 	[Key.fullscreenHeroLayout]: "Hero 模式",
 	[Key.wallpaperOverlayMode]: "覆盖透明",
+	[Key.wallpaperWebglMode]: "WebGL",
 	[Key.wallpaperNoneMode]: "纯色背景",
 
 	// 壁纸设置
diff --git a/src/i18n/languages/zh_TW.ts b/src/i18n/languages/zh_TW.ts
index 4dab01ef8e..217cccd363 100644
--- a/src/i18n/languages/zh_TW.ts
+++ b/src/i18n/languages/zh_TW.ts
@@ -382,6 +382,7 @@ export const zh_TW: Translation = {
 	[Key.fullscreenClassicLayout]: "經典模式",
 	[Key.fullscreenHeroLayout]: "Hero 模式",
 	[Key.wallpaperOverlayMode]: "覆蓋透明",
+	[Key.wallpaperWebglMode]: "WebGL",
 	[Key.wallpaperNoneMode]: "純色背景",
 
 	// 壁紙設置
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 3509c8d0c6..0926be299d 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -525,7 +525,7 @@ const ogImageAlt = propsOgImageAlt ?? pageTitle;
         document.body.classList.toggle(
           "wallpaper-transparent",
           wm === "overlay" ||
-            (wm === "fullscreen" &&
+            ((wm === "fullscreen" || wm === "webgl") &&
               document.documentElement.getAttribute("data-fullscreen-layout") === "hero"),
         );
       })();
diff --git a/src/styles/layout-base.css b/src/styles/layout-base.css
index 2e7052baab..4c733187f0 100644
--- a/src/styles/layout-base.css
+++ b/src/styles/layout-base.css
@@ -89,14 +89,14 @@
       --content-top: 5.5rem;
     }
   }
-  /* overlay / none / fullscreen 非首页：内容从导航栏下方开始 */
+  /* overlay / none / 全屏 Hero 非首页：内容从导航栏下方开始 */
   html[data-wallpaper-mode="overlay"] .content-panel,
   html[data-wallpaper-mode="none"] .content-panel,
-  html[data-wallpaper-mode="fullscreen"] body:not(.is-home) .content-panel {
+  html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) body:not(.is-home) .content-panel {
     --content-top: 5.5rem;
   }
-  /* fullscreen 首页 hero：内容推到首屏之下 */
-  html[data-wallpaper-mode="fullscreen"] body.is-home .content-panel {
+  /* 全屏图片/WebGL 首页 Hero：内容推到首屏之下；classic 仍由文档流承接。 */
+  html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) body.is-home .content-panel {
     --content-top: 100vh;
   }
 
diff --git a/src/styles/layout-styles.css b/src/styles/layout-styles.css
index 1648c1658d..2386f7ce3f 100644
--- a/src/styles/layout-styles.css
+++ b/src/styles/layout-styles.css
@@ -403,12 +403,12 @@ html.is-page-transitioning .banner-home-text-overlay {
 /* 移动端暗色模式文字阴影优化（仅横幅/全屏壁纸模式） */
 @media (max-width: 1023px) and (prefers-color-scheme: dark) {
     html.dark[data-wallpaper-mode="banner"] .banner-title,
-    html.dark[data-wallpaper-mode="fullscreen"] .banner-title {
+    html.dark:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) .banner-title {
         text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
     }
 
     html.dark[data-wallpaper-mode="banner"] .banner-subtitle,
-    html.dark[data-wallpaper-mode="fullscreen"] .banner-subtitle {
+    html.dark:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) .banner-subtitle {
         text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
     }
 }
@@ -567,6 +567,40 @@ html[data-wallpaper-mode="overlay"] #wallpaper-wrapper {
     transition: opacity 0.6s ease !important;
 }
 
+/* WebGL 画布始终覆盖图片回退；wrapper 的 classic/Hero 定位由下方全屏共用规则决定。 */
+html[data-wallpaper-mode="webgl"] #wallpaper-wrapper {
+    position: fixed !important;
+    inset: 0 !important;
+    width: 100% !important;
+    height: 100vh !important;
+    height: 100lvh !important;
+    z-index: var(--overlay-z-index, -1) !important;
+    opacity: 1 !important;
+    pointer-events: none !important;
+    overflow: hidden !important;
+    min-height: unset !important;
+    max-height: unset !important;
+    transform: none !important;
+}
+
+#webgl-wallpaper-host {
+    position: absolute;
+    inset: 0;
+    z-index: 6;
+    pointer-events: none;
+}
+
+#webgl-wallpaper-host canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+/* 画布首帧成功后再遮住图片；场景加载或显卡不可用时仍有壁纸。 */
+html[data-wallpaper-mode="webgl"] #wallpaper-wrapper.webgl-ready #banner-images-container {
+    visibility: hidden;
+}
+
 /* Overlay 模式下图片模糊效果 */
 #wallpaper-wrapper.wallpaper-overlay img {
     width: 100% !important;
@@ -608,8 +642,8 @@ html[data-wallpaper-mode="banner"] #wallpaper-wrapper {
         top: 0 !important;
     }
 }
-/* fullscreen / overlay：首帧即显示（尺寸/定位由各自规则处理） */
-html[data-wallpaper-mode="fullscreen"] #wallpaper-wrapper,
+/* fullscreen / webgl / overlay：首帧即显示（尺寸/定位由各自规则处理） */
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) #wallpaper-wrapper,
 html[data-wallpaper-mode="overlay"] #wallpaper-wrapper {
     display: block !important;
 }
@@ -674,7 +708,7 @@ html[data-wallpaper-mode="overlay"] #content-panel {
 
 /* 刷新首帧即全屏：data-wallpaper-mode 在解析期内联脚本中同步设置，早于 rAF 应用
    wallpaper-fullscreen 类；据此设置 wrapper 尺寸，避免刷新时先横幅大小后变全屏的闪烁 */
-html[data-wallpaper-mode="fullscreen"] #wallpaper-wrapper {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) #wallpaper-wrapper {
     position: fixed !important;
     inset: 0 !important;
     width: 100% !important;
@@ -693,7 +727,7 @@ html[data-wallpaper-mode="fullscreen"] #wallpaper-wrapper {
 
 /* 首帧即让图片全屏覆盖并居中（镜像 wallpaper-fullscreen 类的 img 规则）：
    避免类晚加时图片按自然尺寸渲染（比视口宽、靠左）后闪到居中的位移 */
-html[data-wallpaper-mode="fullscreen"] #wallpaper-wrapper img {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) #wallpaper-wrapper img {
     width: 100% !important;
     height: 100% !important;
     object-fit: cover !important;
@@ -704,21 +738,21 @@ html[data-wallpaper-mode="fullscreen"] #wallpaper-wrapper img {
 }
 
 /* fullscreen 非首页：隐藏横幅标题/元信息覆盖层（镜像 wallpaper-fullscreen 类规则） */
-html[data-wallpaper-mode="fullscreen"] body:not(.is-home) #wallpaper-wrapper .banner-home-text-overlay,
-html[data-wallpaper-mode="fullscreen"] body:not(.is-home) #wallpaper-wrapper .banner-page-title-overlay,
-html[data-wallpaper-mode="fullscreen"] body:not(.is-home) #wallpaper-wrapper .banner-post-meta-overlay {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) body:not(.is-home) #wallpaper-wrapper .banner-home-text-overlay,
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) body:not(.is-home) #wallpaper-wrapper .banner-page-title-overlay,
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) body:not(.is-home) #wallpaper-wrapper .banner-post-meta-overlay {
     display: none !important;
 }
 
 /* Fullscreen 非首页 + 非固定导航栏：无 hero，隐藏 top-row 占位，避免顶部空白 */
-html[data-wallpaper-mode="fullscreen"] body:not(.is-home):not(.sticky-navbar):not(.dynamic-navbar) #top-row {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) body:not(.is-home):not(.sticky-navbar):not(.dynamic-navbar) #top-row {
     height: 0 !important;
     overflow: visible !important;
     transition: none !important;
 }
 
 /* 让 sticky 导航栏跨壁纸滑动、滚到内容区才释放；去掉 transition:none 使 .navbar-hidden 下滑可动画 */
-html[data-wallpaper-mode="fullscreen"] body.is-home:not(.sticky-navbar):not(.dynamic-navbar) #top-row {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) body.is-home:not(.sticky-navbar):not(.dynamic-navbar) #top-row {
     height: calc(100lvh);
     overflow: visible !important;
 }
@@ -739,7 +773,7 @@ html[data-wallpaper-mode="fullscreen"] body.is-home:not(.sticky-navbar):not(.dyn
 }
 
 /* 首页首屏保持清晰：模糊只由 JS 按滚动驱动（--fullscreen-blur 未设置时 fallback 为 0） */
-html[data-wallpaper-mode="fullscreen"] body.is-home #wallpaper-wrapper img {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) body.is-home #wallpaper-wrapper img {
     filter: blur(var(--fullscreen-blur, 0px)) !important;
 }
 body.is-home #wallpaper-wrapper.wallpaper-fullscreen img,
@@ -819,7 +853,7 @@ body:not(.is-home) #wallpaper-wrapper.wallpaper-fullscreen .scroll-down-indicato
 }
 
 /* Fullscreen 滚动向下指示器（属性驱动，wrapper 不再有 wallpaper-fullscreen 类） */
-html[data-wallpaper-mode="fullscreen"] body.is-home #wallpaper-wrapper .scroll-down-indicator {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) body.is-home #wallpaper-wrapper .scroll-down-indicator {
     display: flex;
     position: fixed;
     bottom: 5rem;
@@ -831,22 +865,22 @@ html[data-wallpaper-mode="fullscreen"] body.is-home #wallpaper-wrapper .scroll-d
     color: rgba(255, 255, 255, 0.8);
     transition: opacity 0.4s ease, transform 0.4s ease;
 }
-html[data-wallpaper-mode="fullscreen"] #wallpaper-wrapper .scroll-down-indicator.hide {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) #wallpaper-wrapper .scroll-down-indicator.hide {
     opacity: 0 !important;
     visibility: hidden;
     pointer-events: none;
 }
 @media (max-width: 1023px) {
-    html[data-wallpaper-mode="fullscreen"] #wallpaper-wrapper .scroll-down-indicator {
+    html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) #wallpaper-wrapper .scroll-down-indicator {
         bottom: 10rem;
     }
 }
-html[data-wallpaper-mode="fullscreen"] #wallpaper-wrapper .scroll-down-indicator .scroll-down-icon {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) #wallpaper-wrapper .scroll-down-indicator .scroll-down-icon {
     font-size: 5rem;
     animation: scroll-down-bounce 2s ease-in-out infinite;
     filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
 }
-html[data-wallpaper-mode="fullscreen"] #wallpaper-wrapper .scroll-down-indicator:hover {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) #wallpaper-wrapper .scroll-down-indicator:hover {
     color: rgba(255, 255, 255, 1);
 }
 
@@ -872,7 +906,7 @@ html:not([data-wallpaper-mode="overlay"]):not([data-wallpaper-mode="none"]):not(
 
 /* 壁纸晕影，仅 banner + fullscreen：边缘压暗、中心保持鲜明（纯静态） */
 html[data-wallpaper-mode="banner"] #wallpaper-wrapper::after,
-html[data-wallpaper-mode="fullscreen"] #wallpaper-wrapper::after {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) #wallpaper-wrapper::after {
     content: "";
     position: absolute;
     inset: 0;
@@ -890,7 +924,7 @@ html[data-wallpaper-mode="fullscreen"] #wallpaper-wrapper::after {
 
 
 /* classic 全屏布局：覆盖新版 fixed Hero 规则，恢复文档流全屏壁纸 */
-html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="classic"] #wallpaper-wrapper {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"])[data-fullscreen-layout="classic"] #wallpaper-wrapper {
     position: relative !important;
     inset: auto !important;
     width: 100% !important;
@@ -901,24 +935,24 @@ html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="classic"] #wallpa
     transition: none !important;
 }
 
-html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="classic"] body.is-home #wallpaper-wrapper {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"])[data-fullscreen-layout="classic"] body.is-home #wallpaper-wrapper {
     height: 100vh !important;
 }
 
-html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="classic"] body:not(.is-home) #wallpaper-wrapper {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"])[data-fullscreen-layout="classic"] body:not(.is-home) #wallpaper-wrapper {
     height: var(--banner-height-non-home) !important;
     min-height: var(--banner-height-non-home) !important;
     max-height: var(--banner-height-non-home) !important;
 }
 
-html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="classic"] body:not(.is-home) .content-panel {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"])[data-fullscreen-layout="classic"] body:not(.is-home) .content-panel {
     position: absolute !important;
     top: calc(var(--banner-height-non-home) - 3.5rem) !important;
     margin-top: 0 !important;
     min-height: calc(100vh - (var(--banner-height-non-home) - 3.5rem)) !important;
 }
 
-html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="classic"] #wallpaper-wrapper img {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"])[data-fullscreen-layout="classic"] #wallpaper-wrapper img {
     width: 100% !important;
     height: 100% !important;
     object-fit: cover !important;
@@ -928,28 +962,28 @@ html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="classic"] #wallpa
     opacity: 1 !important;
 }
 
-html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="classic"] body.is-home .content-panel {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"])[data-fullscreen-layout="classic"] body.is-home .content-panel {
     min-height: 100vh;
 }
 
-html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="classic"] body:not(.sticky-navbar):not(.dynamic-navbar) #top-row {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"])[data-fullscreen-layout="classic"] body:not(.sticky-navbar):not(.dynamic-navbar) #top-row {
     height: 0 !important;
     overflow: visible !important;
 }
 
-html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="classic"] body:not(.is-home) #wallpaper-wrapper .banner-page-title-overlay,
-html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="classic"] body:not(.is-home) #wallpaper-wrapper .banner-post-meta-overlay {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"])[data-fullscreen-layout="classic"] body:not(.is-home) #wallpaper-wrapper .banner-page-title-overlay,
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"])[data-fullscreen-layout="classic"] body:not(.is-home) #wallpaper-wrapper .banner-post-meta-overlay {
     display: flex !important;
 }
 
 /* classic 首页：隐藏残留/持久化的非首页覆盖层（wrapper 在 Swup 容器外、切页不重渲染，
    从非首页切回首页时上一页的标题覆盖层会残留，其自带 lg:flex 在桌面端会让标题残影居中闪现） */
-html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="classic"] body.is-home #wallpaper-wrapper .banner-page-title-overlay,
-html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="classic"] body.is-home #wallpaper-wrapper .banner-post-meta-overlay {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"])[data-fullscreen-layout="classic"] body.is-home #wallpaper-wrapper .banner-page-title-overlay,
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"])[data-fullscreen-layout="classic"] body.is-home #wallpaper-wrapper .banner-post-meta-overlay {
     display: none !important;
 }
 
-html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="classic"] #wallpaper-wrapper .scroll-down-indicator {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"])[data-fullscreen-layout="classic"] #wallpaper-wrapper .scroll-down-indicator {
     display: flex !important;
     position: absolute !important;
     bottom: 5rem !important;
@@ -958,17 +992,17 @@ html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="classic"] #wallpa
 }
 
 @media (max-width: 1023px) {
-    html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="classic"] #wallpaper-wrapper .scroll-down-indicator {
+    html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"])[data-fullscreen-layout="classic"] #wallpaper-wrapper .scroll-down-indicator {
         bottom: 10rem !important;
     }
 }
 
 /* classic 非首页移动端：与其他模式一致——隐藏壁纸，内容从导航栏下方开始 */
 @media (max-width: 1023px) {
-    html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="classic"] body:not(.is-home) #wallpaper-wrapper {
+    html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"])[data-fullscreen-layout="classic"] body:not(.is-home) #wallpaper-wrapper {
         display: none !important;
     }
-    html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="classic"] body:not(.is-home) .content-panel {
+    html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"])[data-fullscreen-layout="classic"] body:not(.is-home) .content-panel {
         top: 5.5rem !important;
         min-height: calc(100vh - 5.5rem) !important;
     }
diff --git a/src/styles/main.css b/src/styles/main.css
index 847a404c5f..86ebc75fbd 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -299,33 +299,33 @@ html {
 
     /* 全屏壁纸首页动态透明（semifull）：顶部透明，下滑后显示卡片底色。
        需要比上面 wallpaper-transparent 的固定底色更高特异性，才能让顶部透明生效 */
-    html[data-wallpaper-mode="fullscreen"] #navbar[data-transparent-mode="semifull"]:not(.scrolled) > div {
+    html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) #navbar[data-transparent-mode="semifull"]:not(.scrolled) > div {
         background: transparent !important;
         --navbar-surface-blur: 0px !important;
         box-shadow: none !important;
     }
 
     /* 全屏 semi 玻璃 */
-    html[data-wallpaper-mode="fullscreen"] #navbar[data-transparent-mode="semi"] > div {
+    html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) #navbar[data-transparent-mode="semi"] > div {
         --navbar-surface-blur: var(--navbar-glass-blur, 20px) !important;
         box-shadow: inset 0 1px 0 var(--navbar-glass-highlight), 0 1px 0 var(--navbar-glass-hairline) !important;
     }
-    :root.dark[data-wallpaper-mode="fullscreen"] #navbar[data-transparent-mode="semi"] > div {
+    :root.dark:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) #navbar[data-transparent-mode="semi"] > div {
         box-shadow: inset 0 1px 0 var(--navbar-glass-highlight), 0 1px 0 var(--navbar-glass-hairline) !important;
     }
     /* 全屏 semifull 滚动后玻璃化 */
-    html[data-wallpaper-mode="fullscreen"] #navbar[data-transparent-mode="semifull"].scrolled > div {
+    html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) #navbar[data-transparent-mode="semifull"].scrolled > div {
         --navbar-surface-blur: var(--navbar-glass-blur, 20px) !important;
         box-shadow: inset 0 1px 0 var(--navbar-glass-highlight), 0 1px 0 var(--navbar-glass-hairline) !important;
     }
-    :root.dark[data-wallpaper-mode="fullscreen"] #navbar[data-transparent-mode="semifull"].scrolled > div {
+    :root.dark:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) #navbar[data-transparent-mode="semifull"].scrolled > div {
         box-shadow: inset 0 1px 0 var(--navbar-glass-highlight), 0 1px 0 var(--navbar-glass-hairline) !important;
     }
     /* 全屏 semi 滚动后加回投影 */
-    html[data-wallpaper-mode="fullscreen"] #navbar[data-transparent-mode="semi"].navbar-sticky-shadow > div {
+    html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) #navbar[data-transparent-mode="semi"].navbar-sticky-shadow > div {
         box-shadow: inset 0 1px 0 var(--navbar-glass-highlight), 0 1px 0 var(--navbar-glass-hairline) !important;
     }
-    :root.dark[data-wallpaper-mode="fullscreen"] #navbar[data-transparent-mode="semi"].navbar-sticky-shadow > div {
+    :root.dark:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) #navbar[data-transparent-mode="semi"].navbar-sticky-shadow > div {
         box-shadow: inset 0 1px 0 var(--navbar-glass-highlight), 0 1px 0 var(--navbar-glass-hairline) !important;
     }
 
@@ -342,7 +342,7 @@ html {
 
     /* 全屏壁纸模式：导航栏统一禁用边框/轮廓（覆盖 semifull/none 及 enable-card-border 的卡片边框），
        避免切换页面瞬间 enable-card-border 边框闪现黑色边框 */
-    html[data-wallpaper-mode="fullscreen"] #navbar > div {
+    html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"]) #navbar > div {
         border: none !important;
         outline: none !important;
     }
diff --git a/src/styles/waves.css b/src/styles/waves.css
index 240539438b..7efa9abb96 100644
--- a/src/styles/waves.css
+++ b/src/styles/waves.css
@@ -126,12 +126,12 @@ html[data-wallpaper-mode="none"] #wallpaper-wrapper #banner-dim-container {
    data-wallpaper-mode 在解析期内联脚本中同步设置，早于 rAF 应用
    wallpaper-fullscreen/overlay 类；据此隐藏可避免刷新时波浪/渐变先显示后消失的闪烁。
    -------------------------------------------------------------------------- */
-html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="hero"] body:not(.is-home) #wallpaper-wrapper #banner-dim-container {
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"])[data-fullscreen-layout="hero"] body:not(.is-home) #wallpaper-wrapper #banner-dim-container {
     display: none !important;
 }
-html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="hero"] .waves,
-html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="hero"] #header-waves,
-html[data-wallpaper-mode="fullscreen"][data-fullscreen-layout="hero"] #wallpaper-wrapper #wallpaper-gradient,
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"])[data-fullscreen-layout="hero"] .waves,
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"])[data-fullscreen-layout="hero"] #header-waves,
+html:is([data-wallpaper-mode="fullscreen"], [data-wallpaper-mode="webgl"])[data-fullscreen-layout="hero"] #wallpaper-wrapper #wallpaper-gradient,
 html[data-wallpaper-mode="overlay"] .waves,
 html[data-wallpaper-mode="overlay"] #header-waves,
 html[data-wallpaper-mode="overlay"] #wallpaper-wrapper #wallpaper-gradient,
diff --git a/src/types/backgroundWallpaper.ts b/src/types/backgroundWallpaper.ts
index 6ef472687e..03f9a799f0 100644
--- a/src/types/backgroundWallpaper.ts
+++ b/src/types/backgroundWallpaper.ts
@@ -1,7 +1,13 @@
 export type FullscreenWallpaperLayout = "classic" | "hero";
 
 export type BackgroundWallpaperConfig = {
-	mode: "banner" | "fullscreen" | "overlay" | "none"; // 壁纸模式：banner横幅模式、fullscreen全屏壁纸、overlay全屏透明覆盖模式或none纯色背景
+	mode: "banner" | "fullscreen" | "overlay" | "webgl" | "none"; // webgl 为可配置的 WebGL 场景壁纸，复用全屏布局
+	webgl?: {
+		// scenes 目录中的模块文件名；可加入自己的模块并在这里切换。
+		scene: string;
+		// 场景自定义参数由对应模块解析，避免站点核心代码绑定某一着色器。
+		options?: Record<string, unknown>;
+	};
 	playerEnable?: boolean; // 是否启用背景视频播放，默认false
 	src:
 		| string
@@ -11,7 +17,7 @@ export type BackgroundWallpaperConfig = {
 				mobile?: string | string[];
 				playerUrl?: string | string[]; // 背景视频播放地址，支持单个视频路径或数组（多视频列表循环）
 		  }; // 支持单个图片、图片数组或分别设置桌面端和移动端图片
-	// 横幅壁纸和全屏壁纸共享配置
+	// 横幅、全屏图片和 WebGL 壁纸共享标题、波纹等配置
 	common?: {
 		dimOpacity?: number; // 横幅文字遮罩暗度，0-1之间，值越大越暗，默认0.15
 		playerMode?: "order" | "random"; // 多视频播放模式："order" 顺序循环（默认），"random" 随机切换
@@ -42,7 +48,7 @@ export type BackgroundWallpaperConfig = {
 			interval?: number; // 轮播间隔时间，单位毫秒
 			transitionEffect?: "fade" | "zoom" | "slide" | "kenburns"; // 过渡效果: 'fade' 渐变 | 'zoom' 缩放 | 'slide' 滑动 | 'kenburns' 旋转木马
 		};
-		// 水波纹动画效果配置，横幅壁纸和全屏壁纸共享，开启会影响页面性能
+		// 水波纹动画效果配置，横幅和 classic 全屏图片/WebGL 共享，开启会影响页面性能
 		waves?: {
 			enable:
 				| boolean
@@ -101,9 +107,9 @@ export type BackgroundWallpaperConfig = {
 		blur?: number; // 背景模糊程度，单位px
 		cardOpacity?: number; // 卡片背景透明度，0-1之间
 	};
-	// 全屏壁纸模式特有配置
+	// 全屏图片与 WebGL 共用的布局和导航配置
 	fullscreen?: {
-		layout?: FullscreenWallpaperLayout; // 全屏布局：classic 文档流模式，hero 固定全屏首屏模式
+		layout?: FullscreenWallpaperLayout; // 全屏图片/WebGL 布局：classic 文档流模式，hero 固定全屏首屏模式
 		position?: string; // 壁纸位置，支持CSS object-position的所有值
 		// 全屏壁纸模式的导航栏配置（仅有半透明/动态透明两种）
 		navbar?: {
diff --git a/src/types/displaySettingsConfig.ts b/src/types/displaySettingsConfig.ts
index 49d4031d0b..8c461d2cfa 100644
--- a/src/types/displaySettingsConfig.ts
+++ b/src/types/displaySettingsConfig.ts
@@ -34,7 +34,7 @@ export type DisplaySettingsConfig = {
 	// 壁纸模式切换开关
 	wallpaperModeSwitchable: boolean;
 
-	// 全屏壁纸布局切换开关（classic / hero）
+	// 全屏图片与 WebGL 壁纸布局切换开关（classic / hero）
 	fullscreenLayoutSwitchable: boolean;
 
 	// 水波纹动画开关
diff --git a/src/types/siteConfig.ts b/src/types/siteConfig.ts
index cfb572c0a4..5f5de8d660 100644
--- a/src/types/siteConfig.ts
+++ b/src/types/siteConfig.ts
@@ -6,6 +6,7 @@ import type {
 	WALLPAPER_FULLSCREEN,
 	WALLPAPER_NONE,
 	WALLPAPER_OVERLAY,
+	WALLPAPER_WEBGL,
 } from "../constants/constants";
 import type { ImmersiveReadingConfig } from "./immersiveReadingConfig";
 import type { NsfwMode } from "./nsfw";
@@ -19,6 +20,7 @@ export type WALLPAPER_MODE =
 	| typeof WALLPAPER_BANNER
 	| typeof WALLPAPER_FULLSCREEN
 	| typeof WALLPAPER_OVERLAY
+	| typeof WALLPAPER_WEBGL
 	| typeof WALLPAPER_NONE;
 
 export type Favicon = {
diff --git a/src/utils/banner-utils.ts b/src/utils/banner-utils.ts
index f2ec03263e..8798f7024e 100644
--- a/src/utils/banner-utils.ts
+++ b/src/utils/banner-utils.ts
@@ -5,10 +5,8 @@ export function isBannerMode(): boolean {
 	);
 }
 
-/** 当前是否为 fullscreen 壁纸模式（static 导航栏在首页需像 banner 一样跨壁纸保持） */
+/** 当前是否为全屏图片或 WebGL 壁纸模式（static 导航栏在首页需像 banner 一样跨壁纸保持） */
 export function isFullscreenMode(): boolean {
-	return (
-		document.documentElement.getAttribute("data-wallpaper-mode") ===
-		"fullscreen"
-	);
+	const mode = document.documentElement.getAttribute("data-wallpaper-mode");
+	return mode === "fullscreen" || mode === "webgl";
 }
diff --git a/src/utils/banner-visibility-utils.ts b/src/utils/banner-visibility-utils.ts
index b7f06eab77..7e1bd14f1e 100644
--- a/src/utils/banner-visibility-utils.ts
+++ b/src/utils/banner-visibility-utils.ts
@@ -23,6 +23,7 @@ export interface BannerVisibilityState {
 	isBannerMode: boolean;
 	isFullscreenMode: boolean;
 	isOverlayMode: boolean;
+	isWebglMode: boolean;
 	isWallpaperSwitchable: boolean;
 	isBackgroundEnabled: boolean;
 	hasWallpaper: boolean;
@@ -98,8 +99,10 @@ export function getBannerVisibilityState(
 
 	const isBannerMode = backgroundWallpaper.mode === "banner";
 	const isFullscreenMode = backgroundWallpaper.mode === "fullscreen";
+	const isWebglMode = backgroundWallpaper.mode === "webgl";
 	const isClassicFullscreenMode =
-		isFullscreenMode && backgroundWallpaper.fullscreen?.layout !== "hero";
+		(isFullscreenMode || isWebglMode) &&
+		backgroundWallpaper.fullscreen?.layout !== "hero";
 	const isOverlayMode = backgroundWallpaper.mode === "overlay";
 	const isWallpaperSwitchable = displaySettingsConfig.wallpaperModeSwitchable;
 	const isBackgroundEnabled =
@@ -130,7 +133,9 @@ export function getBannerVisibilityState(
 
 	const homeTextEnable = backgroundWallpaper.common?.homeText?.enable ?? false;
 	const showHomeText =
-		(isBannerMode || isFullscreenMode) && !!homeTextEnable && isHomePageCheck;
+		(isBannerMode || isFullscreenMode || isWebglMode) &&
+		!!homeTextEnable &&
+		isHomePageCheck;
 	const homeTextLinksEnable =
 		backgroundWallpaper.common?.homeText?.linksEnable !== false;
 
@@ -149,7 +154,10 @@ export function getBannerVisibilityState(
 	);
 
 	const showBannerDim =
-		(isBannerMode || isFullscreenMode || isWallpaperSwitchable) &&
+		(isBannerMode ||
+			isFullscreenMode ||
+			isWebglMode ||
+			isWallpaperSwitchable) &&
 		isBackgroundEnabled;
 	const dimOpacity = backgroundWallpaper.common?.dimOpacity ?? 0.15;
 
@@ -180,13 +188,15 @@ export function getBannerVisibilityState(
 		isBannerMode,
 		isFullscreenMode,
 		isOverlayMode,
+		isWebglMode,
 		isWallpaperSwitchable,
 		isBackgroundEnabled,
 		hasWallpaper:
 			isWallpaperSwitchable ||
 			isBannerMode ||
 			isFullscreenMode ||
-			isOverlayMode,
+			isOverlayMode ||
+			isWebglMode,
 		wavesEnabledOnDesktop,
 		wavesEnabledOnMobile,
 		shouldRenderWaves,
diff --git a/src/utils/fullscreen-wallpaper-utils.ts b/src/utils/fullscreen-wallpaper-utils.ts
index 86992a9204..4902880b15 100644
--- a/src/utils/fullscreen-wallpaper-utils.ts
+++ b/src/utils/fullscreen-wallpaper-utils.ts
@@ -37,7 +37,10 @@ export function updateFullscreenTitleParallax(): void {
 	if (!overlay) return;
 	// 非全屏或页面过渡中：复位（让 transition-swup-fade 的 CSS 生效）
 	if (
-		html.getAttribute("data-wallpaper-mode") !== "fullscreen" ||
+		!(
+			html.getAttribute("data-wallpaper-mode") === "fullscreen" ||
+			html.getAttribute("data-wallpaper-mode") === "webgl"
+		) ||
 		!isHeroFullscreenLayout() ||
 		html.classList.contains("is-animating") ||
 		html.classList.contains("is-changing")
@@ -82,7 +85,11 @@ export function syncFullscreenOverlays(): void {
 	);
 	overlays.forEach((el) => {
 		const element = el as HTMLElement;
-		if (mode === "fullscreen" && isHeroFullscreenLayout() && !isHome) {
+		if (
+			(mode === "fullscreen" || mode === "webgl") &&
+			isHeroFullscreenLayout() &&
+			!isHome
+		) {
 			element.style.setProperty("display", "none", "important");
 		} else {
 			element.style.removeProperty("display");
diff --git a/src/utils/layout-init.ts b/src/utils/layout-init.ts
index fbe9501048..52bc7e2b33 100644
--- a/src/utils/layout-init.ts
+++ b/src/utils/layout-init.ts
@@ -21,6 +21,7 @@ import { initScroll } from "@/utils/scroll-utils";
 import { initThemeListener, initWallpaperMode } from "@/utils/setting-utils";
 import { setupSwupTransitions } from "@/utils/swup-transitions";
 import { initTouchCodeCopyReveal } from "@/utils/touch-copy-utils";
+import { initWebglWallpaper } from "@/utils/webgl-wallpaper/host";
 
 /** 布局初始化编排（从 Layout.astro 迁出） */
 export function initLayout(): void {
@@ -53,6 +54,7 @@ export function initLayout(): void {
 
 	setupSwupTransitions();
 	initFullscreenWallpaper();
+	initWebglWallpaper();
 	registerContentOverflowListeners();
 	// 滚动路径不再读取布局；先在初始化时填充侧边栏 top 容器可见性缓存
 	refreshSidebarStickyState();
diff --git a/src/utils/setting-utils.ts b/src/utils/setting-utils.ts
index a33621bb68..3a135291f0 100644
--- a/src/utils/setting-utils.ts
+++ b/src/utils/setting-utils.ts
@@ -7,6 +7,7 @@ import {
 	WALLPAPER_FULLSCREEN,
 	WALLPAPER_NONE,
 	WALLPAPER_OVERLAY,
+	WALLPAPER_WEBGL,
 } from "@constants/constants";
 import type {
 	FullscreenWallpaperLayout,
@@ -283,7 +284,7 @@ export function initThemeListener(): void {
 // Wallpaper mode functions
 
 /**
- * 同步首页标题显示（hidden 类）：首页 + banner/fullscreen 模式显示标题，其余情况隐藏。
+ * 同步首页标题显示（hidden 类）：首页 + banner/fullscreen/webgl 模式显示标题，其余情况隐藏。
  * SSR 按 config 默认模式渲染 hidden（默认 overlay/none 时带 hidden），而模式可运行时切换、
  * 页面也会经 Swup 切换（body.is-home 变化），因此需要按当前 mode + 是否首页重新计算。
  * 标题开关（user-hidden 类）独立控制，不受影响。
@@ -296,7 +297,10 @@ export function syncBannerHomeTextVisibility(): void {
 	const mode = document.documentElement.getAttribute("data-wallpaper-mode");
 	const isHome = checkIsHomePage(window.location.pathname);
 	const show =
-		isHome && (mode === WALLPAPER_BANNER || mode === WALLPAPER_FULLSCREEN);
+		isHome &&
+		(mode === WALLPAPER_BANNER ||
+			mode === WALLPAPER_FULLSCREEN ||
+			mode === WALLPAPER_WEBGL);
 	overlay.classList.toggle("hidden", !show);
 }
 
@@ -341,7 +345,8 @@ export function applyFullscreenLayoutToDocument(
 	const mode = html.getAttribute("data-wallpaper-mode");
 	const transparent =
 		mode === WALLPAPER_OVERLAY ||
-		(mode === WALLPAPER_FULLSCREEN && safeLayout === "hero");
+		((mode === WALLPAPER_FULLSCREEN || mode === WALLPAPER_WEBGL) &&
+			safeLayout === "hero");
 	document.body?.classList.toggle("wallpaper-transparent", transparent);
 	window.dispatchEvent(
 		new CustomEvent("fullscreenLayoutChange", {
@@ -388,7 +393,8 @@ export function applyWallpaperModeToDocument(
 	// 卡片透明类：唯一运行时写入者（解析期由 body 起始脚本写入）
 	const transparent =
 		mode === WALLPAPER_OVERLAY ||
-		(mode === WALLPAPER_FULLSCREEN && isHeroFullscreen);
+		((mode === WALLPAPER_FULLSCREEN || mode === WALLPAPER_WEBGL) &&
+			isHeroFullscreen);
 	document.body.classList.toggle("wallpaper-transparent", transparent);
 
 	updateNavbarTransparency(mode);
@@ -413,7 +419,7 @@ export function updateNavbarTransparency(mode: WALLPAPER_MODE): void {
 		// 纯色背景模式
 		transparentMode = "none";
 		blurAmount = 0;
-	} else if (mode === WALLPAPER_FULLSCREEN) {
+	} else if (mode === WALLPAPER_FULLSCREEN || mode === WALLPAPER_WEBGL) {
 		// 全屏壁纸：首页 + semifull 动态透明，其余半透明玻璃
 		const isHomePage = checkIsHomePage(window.location.pathname);
 		const fsMode =
@@ -446,7 +452,9 @@ export function updateNavbarTransparency(mode: WALLPAPER_MODE): void {
 	// 滚动检测功能
 	if (
 		transparentMode === "semifull" &&
-		(mode === WALLPAPER_BANNER || mode === WALLPAPER_FULLSCREEN) &&
+		(mode === WALLPAPER_BANNER ||
+			mode === WALLPAPER_FULLSCREEN ||
+			mode === WALLPAPER_WEBGL) &&
 		typeof window.initSemifullScrollDetection === "function"
 	) {
 		// 在Banner和全屏壁纸模式的semifull下启用滚动检测
diff --git a/src/utils/webgl-wallpaper/host.ts b/src/utils/webgl-wallpaper/host.ts
new file mode 100644
index 0000000000..62c5a7b576
--- /dev/null
+++ b/src/utils/webgl-wallpaper/host.ts
@@ -0,0 +1,92 @@
+import { backgroundWallpaper } from "@/config";
+import type { WebGLWallpaperScene, WebGLWallpaperSceneModule } from "./types";
+
+// Build-time registry: adding scenes/<name>.ts makes it selectable by config.webgl.scene.
+const sceneLoaders = import.meta.glob<WebGLWallpaperSceneModule>(
+	"./scenes/*.ts",
+);
+let initialized = false;
+let generation = 0;
+let activeHost: HTMLElement | null = null;
+let activeCanvas: HTMLCanvasElement | null = null;
+let activeScene: WebGLWallpaperScene | null = null;
+let activeLoad: AbortController | null = null;
+
+function clearScene(): void {
+	generation += 1;
+	activeLoad?.abort();
+	activeLoad = null;
+	activeScene?.dispose();
+	activeScene = null;
+	activeCanvas?.remove();
+	activeCanvas = null;
+	activeHost?.closest("#wallpaper-wrapper")?.classList.remove("webgl-ready");
+	activeHost = null;
+}
+
+function syncWebglWallpaper(force = false): void {
+	const mode = document.documentElement.getAttribute("data-wallpaper-mode");
+	const host = document.getElementById("webgl-wallpaper-host");
+	if (mode !== "webgl" || !host) {
+		clearScene();
+		return;
+	}
+	if (!force && activeHost === host && activeCanvas) return;
+	clearScene();
+	activeHost = host;
+	const canvas = document.createElement("canvas");
+	canvas.setAttribute("aria-hidden", "true");
+	host.append(canvas);
+	activeCanvas = canvas;
+	const currentGeneration = generation;
+	const loadController = new AbortController();
+	activeLoad = loadController;
+	const sceneName = backgroundWallpaper.webgl?.scene ?? "cloud-train";
+	const loadScene = sceneLoaders[`./scenes/${sceneName}.ts`];
+	if (!loadScene) {
+		console.warn(`Unknown WebGL wallpaper scene: ${sceneName}`);
+		clearScene();
+		return;
+	}
+
+	// Loading is lazy and bounded by generation so a late import cannot revive an old page.
+	void loadScene()
+		.then((module) =>
+			module.default({
+				canvas,
+				options: backgroundWallpaper.webgl?.options ?? {},
+				signal: loadController.signal,
+				onFirstFrame: () => {
+					if (generation === currentGeneration && activeCanvas === canvas) {
+						host.closest("#wallpaper-wrapper")?.classList.add("webgl-ready");
+					}
+				},
+			}),
+		)
+		.then((scene) => {
+			if (generation !== currentGeneration || activeCanvas !== canvas) {
+				scene.dispose();
+				return;
+			}
+			activeScene = scene;
+		})
+		.catch((error: unknown) => {
+			if (generation !== currentGeneration) return;
+			console.warn(
+				"WebGL wallpaper unavailable; keeping the image fallback.",
+				error,
+			);
+			clearScene();
+		});
+}
+
+/** Register once; Swup page replacements and runtime mode changes share one host. */
+export function initWebglWallpaper(): void {
+	if (initialized) return;
+	initialized = true;
+	window.addEventListener("wallpaperModeChange", () => syncWebglWallpaper());
+	document.addEventListener("astro:page-load", () => syncWebglWallpaper());
+	document.addEventListener("swup:contentReplaced", () => syncWebglWallpaper());
+	window.addEventListener("pagehide", clearScene);
+	syncWebglWallpaper();
+}
diff --git a/src/utils/webgl-wallpaper/scenes/cloud-train.ts b/src/utils/webgl-wallpaper/scenes/cloud-train.ts
new file mode 100644
index 0000000000..72b61868e6
--- /dev/null
+++ b/src/utils/webgl-wallpaper/scenes/cloud-train.ts
@@ -0,0 +1,662 @@
+import type { WebGLWallpaperScene, WebGLWallpaperSceneContext } from "../types";
+
+// Scene-specific configuration. The host remains independent of these controls.
+const defaults = {
+	speed: 0.75,
+	resolution: 0.75,
+	feedback: 0.3,
+	vignette: 1,
+	zoom: 1,
+	offset: 0,
+	amplitude: 1,
+	detail: 6,
+	exposure: 1,
+	saturation: 1,
+	hue: 0,
+	temperature: 0,
+	skyTint: "#ffffff",
+	smokeTint: "#ffffff",
+	trainTint: "#ffffff",
+	introEnabled: true,
+	introDuration: 3,
+	introFeather: 0.22,
+	paused: false,
+};
+type CloudTrainSettings = typeof defaults;
+function number(
+	value: unknown,
+	fallback: number,
+	min: number,
+	max: number,
+): number {
+	const n = typeof value === "number" ? value : Number(value);
+	return Number.isFinite(n) ? Math.min(max, Math.max(min, n)) : fallback;
+}
+function tint(value: unknown): string {
+	return typeof value === "string" && /^#[0-9a-f]{6}$/i.test(value)
+		? value
+		: "#ffffff";
+}
+function settings(options: Record<string, unknown>): CloudTrainSettings {
+	return {
+		speed: number(options.speed, 0.75, 0, 5),
+		resolution: number(options.resolution, 0.75, 0.25, 1),
+		feedback: number(options.feedback, 0.3, 0, 0.85),
+		vignette: number(options.vignette, 1, 0, 1),
+		zoom: number(options.zoom, 1, 0.5, 2),
+		offset: number(options.offset, 0, -0.5, 0.5),
+		amplitude: number(options.amplitude, 1, 0, 2),
+		detail: Math.round(number(options.detail, 6, 1, 8)),
+		exposure: number(options.exposure, 1, 0.2, 2),
+		saturation: number(options.saturation, 1, 0, 2),
+		hue: number(options.hue, 0, -180, 180),
+		temperature: number(options.temperature, 0, -1, 1),
+		skyTint: tint(options.skyTint),
+		smokeTint: tint(options.smokeTint),
+		trainTint: tint(options.trainTint),
+		introEnabled:
+			typeof options.introEnabled === "boolean" ? options.introEnabled : true,
+		introDuration: number(options.introDuration, 3, 0.5, 10),
+		introFeather: number(options.introFeather, 0.22, 0.02, 0.6),
+		paused: typeof options.paused === "boolean" ? options.paused : false,
+	};
+}
+
+// Original supplied shader credited to mdb. No redistribution license was supplied.
+// Preserve the source project's deterministic noise and previous-frame feedback assumptions.
+// Tint within each material, before compositing and feedback. White is identity.
+function cloudTrainColorizeSource(source: string) {
+	let result = source.replace(
+		"return vec4(0.58, 0.7, 1.0, 1.);",
+		"return vec4(vec3(0.58, 0.7, 1.0)*skyTint, 1.);",
+	);
+	const trainStart = result.indexOf("col = mix(col, vec3(0.18");
+	const smokeStart = result.indexOf("// loco smoke");
+	if (trainStart < 0 || smokeStart < 0)
+		throw new Error("Train color source markers missing");
+	result =
+		result.slice(0, trainStart) +
+		result
+			.slice(trainStart, smokeStart)
+			.replace(/vec3\(([^()]*)\)/g, "vec3($1)*trainTint") +
+		result.slice(smokeStart);
+	result = result
+		.replace(
+			"if(y < 0.0) col = vec3(1.0, 0.94, 0.91);",
+			"if(y < 0.0) col = vec3(1.0, 0.94, 0.91)*smokeTint;",
+		)
+		.replace(
+			"if(y < - 0.02) col = vec3(0.92, 0.85, 0.82);",
+			"if(y < - 0.02) col = vec3(0.92, 0.85, 0.82)*smokeTint;",
+		);
+	return "uniform vec3 skyTint, smokeTint, trainTint;\n" + result;
+}
+
+// Reveal real depth layers, not rectangular screen bands. At intro=1 the
+// original layer boundaries and material compositing are unchanged.
+function cloudTrainOpeningSource(source: string): string {
+	return (
+		`uniform float intro, introFeather;
+float openingLayer(float start) {
+  if (intro >= 1.) return 1.;
+  float width = mix(.08, .24, clamp(introFeather / .6, 0., 1.));
+  return smoothstep(start, min(start + width, 1.), intro);
+}
+` +
+		source
+			.replace(
+				"#define layer(dh, v)  if (uv.y < h + midlevel - (dh) ) return vec4(v, 1.);",
+				"#define layer(dh, v) { float p=openingLayer(dist>=10. ? .08+.60*(100.-dist)/90. : (dist>1.5 ? .78 : .88)); if(uv.y < h + midlevel - (dh)) { accumulated.rgb+=(1.-accumulated.a)*p*(v); accumulated.a+=(1.-accumulated.a)*p; if(accumulated.a>=1.) return accumulated; } }",
+			)
+			.replaceAll(
+				"float midlevel;",
+				"vec4 accumulated=vec4(0.); float midlevel;",
+			)
+			.replace(
+				"return vec4(0.95, 0.80, 0.77, 0.);",
+				"return vec4(accumulated.a>0. ? accumulated.rgb/accumulated.a : vec3(0.95,0.80,0.77),accumulated.a);",
+			)
+			.replace(
+				"return vec4(vec3(0.58, 0.7, 1.0)*skyTint, 1.);",
+				"return vec4(accumulated.rgb+(1.-accumulated.a)*mix(vec3(.008,.035,.051),vec3(0.58, 0.7, 1.0)*skyTint,openingLayer(0.)), 1.);",
+			)
+			.replace(
+				"vec3 col = bg.rgb;",
+				"vec3 col = bg.rgb; vec3 openingBackground = col;",
+			)
+			.replace(
+				"col = mix(col, fg.rgb, fg.a);",
+				"col = mix(openingBackground, col, openingLayer(.70)); col = mix(col, fg.rgb, fg.a);",
+			)
+	);
+}
+
+function cloudTrainTintRgb(hex: string): [number, number, number] {
+	if (!/^#[0-9a-f]{6}$/i.test(hex)) return [1, 1, 1];
+	return [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255) as [
+		number,
+		number,
+		number,
+	];
+}
+
+class CloudTrainRenderer implements WebGLWallpaperScene {
+	#canvas: HTMLCanvasElement;
+	#settings: { current: CloudTrainSettings };
+	#wake = { current: () => {} };
+	#cleanup: (() => void) | undefined;
+	#onError: (message: string | undefined) => void;
+	#onFirstFrame: () => void;
+	constructor(
+		_layer: HTMLElement,
+		canvas: HTMLCanvasElement,
+		settings: CloudTrainSettings,
+		onError: (message: string | undefined) => void,
+		onFirstFrame: () => void,
+	) {
+		this.#canvas = canvas;
+		this.#settings = { current: settings };
+		this.#onError = onError;
+		this.#onFirstFrame = onFirstFrame;
+		this.#cleanup = this.#start();
+		canvas.addEventListener("webglcontextlost", this.#lost);
+		canvas.addEventListener("webglcontextrestored", this.#restored);
+	}
+	#start(): (() => void) | undefined {
+		const state = this.#settings,
+			wake = this.#wake;
+		let firstFrame = true;
+		const onFirstFrame = this.#onFirstFrame;
+		// 前景保留近景 c14、背景保留 c12/c10 等层；移除 c13 与 c11 以减少每像素噪声采样。
+		const original =
+			"float noise(vec2 x){\n    vec2 f = fract(x);\n    vec2 u = f*f*f*(f*(f*6.0-15.0)+10.0);\n    vec2 du = 30.0*f*f*(f*(f-2.0)+1.0);\n    \n    vec2 p = floor(x);\n\tfloat a = texture(iChannel0, (p+vec2(0.0, 0.0))/1024.0).x;\n\tfloat b = texture(iChannel0, (p+vec2(1.0,0.0))/1024.0).x;\n\tfloat c = texture(iChannel0, (p+vec2(0.0,1.0))/1024.0).x;\n\tfloat d = texture(iChannel0, (p+vec2(1.0,1.0))/1024.0).x;\n\n    \n\treturn a+(b-a)*u.x+(c-a)*u.y+(a-b-c+d)*u.x*u.y;\n}\n\nfloat fbm(vec2 x, int detail){\n    float a = 0.0;\n    float b = 1.0;\n    float t = 0.0;\n    for(int i = 0; i < detail; i++){\n        float n = noise(x);\n        a += b*n;\n        t += b;\n        b *= 0.7;\n        x *= 2.0; \n    \n    }\n    return a/t;\n}\n\nfloat fbm2(vec2 x, int detail){\n    float a = 0.0;\n    float b = 1.0;\n    float t = 0.0;\n    for(int i = 0; i < detail; i++){\n        float n = noise(x);\n        a += b*n;\n        t += b;\n        b *= 0.9;\n        x *= 2.0; \n    \n    }\n    return a/t;\n}\n\nfloat box(vec2 uv, float x1, float x2, float y1, float y2){\n    return (uv.x > x1 && uv.x < x2 && uv.y > y1 && uv.y < y2)?1.0:0.0;\n} \n\n#define dot2(v) dot(v, v)\n#define layer(dh, v)  if (uv.y < h + midlevel - (dh) ) return vec4(v, 1.);\n\nvec4 foreground(vec2 uv, float t){\n    float midlevel;\n    float h;\n    float disp;\n    float dist;\n    vec2 uv2;\n    \n    uv.y -= 0.2;\n    // clouds foreground //////////////////////////////////////////////////////////////\n    \n    // c14\n    midlevel = -0.1;\n    disp = 1.7;\n    dist = 1.0;\n    uv2 = uv + vec2(t/dist + 40.0, 0.0);\n    h = (fbm(uv2, 8) - 0.5)*disp;\n    layer(0.12, vec3(0.43, 0.32, 0.31));\n    layer(0.08, vec3(0.55, 0.42, 0.41));\n    layer(0.04, vec3(0.66, 0.42, 0.40));\n    layer(0., vec3(0.77, 0.48, 0.46));\n    \n    return vec4(0.95, 0.80, 0.77, 0.);\n}\n\nvec4 background(vec2 uv, float t){\n    float midlevel;\n    float h;\n    float disp;\n    float dist;\n    vec2 uv2;\n    \n    // clouds ///////////////////////////////////////////////////////\n    \n    // c12\n    midlevel = 0.3;\n    disp = 0.9;\n    dist = 10.0;\n    uv2 = uv + vec2(t/dist + 32.5, 0.0);\n    h = (fbm(uv2, 8) - 0.5)*disp;\n    layer(0.14, vec3(0.48, 0.19, 0.20));\n    layer(0.1, vec3(0.68, 0.28, 0.19));\n    layer(0.07, vec3(0.88, 0.38, 0.24));\n    layer(0., vec3(0.95, 0.45, 0.30));\n    \n    // c10\n    midlevel = 0.35;\n    disp = 3.5;\n    dist = 20.0;\n    uv2 = uv + vec2(t/dist + 27.5, 0.0);\n    h = (fbm(uv2, 8) - 0.5)*disp;\n    layer(0.12, vec3(0.43, 0.32, 0.31));\n    layer(0.08, vec3(0.55, 0.42, 0.41));\n    layer(0.04, vec3(0.66, 0.42, 0.40));\n    layer(0., vec3(0.77, 0.48, 0.46));\n    \n    // c9\n    midlevel = 0.45;\n    disp = 2.0;\n    dist = 25.0;\n    uv2 = uv + vec2(t/dist + 23.0, 0.0);\n    h = (fbm(uv2, 8) - 0.5)*disp;\n    layer(0.04, vec3(0.98, 0.57, 0.36));\n    layer(0., vec3(1.0, 0.62, 0.44));\n    \n    // c8\n    midlevel = 0.5;\n    disp = 2.3;\n    dist = 30.0;\n    uv2 = uv + vec2(t/dist + 20.5, 0.0);\n    h = (fbm(uv2, 8) - 0.5)*disp;\n    layer(0.12, vec3(0.41, 0.27, 0.27));\n    layer(0.08, vec3(0.53, 0.35, 0.32));\n    layer(0.04, vec3(0.80, 0.24, 0.17));\n    layer(0., vec3(0.99, 0.29, 0.20));\n    \n    // c7\n    midlevel = 0.5;\n    disp = 2.5;\n    dist = 35.0;\n    uv2 = uv + vec2(t/dist + 18.0, 0.0);\n    h = (fbm(uv2, 8) - 0.5)*disp;\n    layer(0.1, vec3(0.88, 0.38, 0.24));\n    layer(0.05, vec3(0.98, 0.42, 0.28));\n    layer(0., vec3(1.0, 0.48, 0.35));\n    \n    // c6\n    midlevel = 0.6;\n    disp = 2.0;\n    dist = 40.0;\n    uv2 = uv + vec2(t/dist + 18.0, 0.0);\n    h = (fbm(uv2, 8) - 0.5)*disp;\n    layer(0.1, vec3(0.95, 0.66, 0.48));\n    layer(0., vec3(1.0, 0.76, 0.60));\n    \n    // c5\n    midlevel = 0.75;\n    disp = 3.5;\n    dist = 45.0;\n    uv2 = uv + vec2(t/dist + 15.5, 0.0);\n    h = (fbm(uv2, 8) - 0.5)*disp;\n    layer(0.2, vec3(1.0, 0.55, 0.33));\n    layer(0.15, vec3(0.98, 0.50, 0.24));\n    layer(0.1, vec3(0.90, 0.55, 0.40));\n    layer(0., vec3(1.0, 0.62, 0.44));\n    \n    // c4\n    midlevel = 0.7;\n    disp = 2.7;\n    dist = 50.0;\n    uv2 = uv + vec2(t/dist + 12.0, 0.0);\n    h = (fbm(uv2, 8) - 0.5)*disp;\n    layer(0.04, vec3(0.73, 0.36, 0.30));\n    layer(0., vec3(0.80, 0.40, 0.34));\n    \n    // c3\n    midlevel = 0.8;\n    disp = 2.7;\n    dist = 60.0;\n    uv2 = uv + vec2(t/dist + 9.5, 0.0);\n    h = (fbm(uv2, 8) - 0.5)*disp;\n    layer(0.1, vec3(0.93, 0.58, 0.35));\n    layer(0., vec3(1.0, 0.76, 0.60));\n    \n    // c2\n    midlevel = 0.9;\n    disp = 3.0;\n    dist = 70.0;\n    uv2 = uv + vec2(t/dist + 7.0, 0.0);\n    h = (fbm(uv2, 8) - 0.5)*disp;\n    layer(0.1, vec3(0.56, 0.25, 0.22));\n    layer(0.05, vec3(0.60, 0.30, 0.27));\n    layer(0., vec3(0.74, 0.35, 0.30));\n    \n    // c1\n    midlevel = 1.0;\n    disp = 5.0;\n    dist = 100.0;\n    uv2 = uv + vec2(t/dist + 3.5, 0.0);\n    h = (fbm(uv2, 8) - 0.5)*disp;\n    layer(0.1, vec3(0.92, 0.85, 0.82));\n    layer(0., vec3(1.0, 0.94, 0.91));\n    \n    return vec4(0.58, 0.7, 1.0, 1.);\n}\n\nvoid mainImage( out vec4 fragColor, in vec2 fragCoord )\n{\n    vec2 uv = fragCoord/iResolution.y;\n    //uv.x += iTime;\n    float t = iTime*4.0;\n    vec4 bg = background(uv, t);\n    \n    vec4 fg = vec4(0.);\n    int n = 5;\n    if (uv.y < 0.5)\n    for (int i = 0; i < n; i++){\n        fg += foreground(uv, t+4.*float(i)/float(n)/60.) / (float(n));\n    }\n    \n    vec3 col = bg.rgb;\n    // train /////////////////////////////////////////////////////////////////////\n    float k;\n    float midlevel;\n    float h;\n    float disp;\n    float dist;\n    vec2 uv2;\n    uv.y -= 0.2;\n    // choo choo\n    k = 1.0;\n    uv2 = fract(uv*9.0);\n    float wagon = 1.0;\n    wagon *= 1.0 - step(0.45, uv.x);\n    wagon *= 1.0 - step(0.115, uv.y);\n    wagon *= step(0.103, uv.y);\n    wagon *= step(0.05, 1.0 - abs(uv2.x*2.0 - 1.0));\n    \n    float join = 1.0; \n    join *= 1.0 - step(0.45, uv.x);\n    join *= 1.0 - step(0.11, uv.y);\n    join *= step(0.107, uv.y);\n    \n    \n    float roof = 1.0;\n    roof *= 1.0 - step(0.45, uv.x);\n    roof *= 1.0 - step(0.117, uv.y);\n    roof *= step(0.11, uv.y);\n    roof *= step(0.15, 1.0 - abs(uv2.x*2.0 - 1.0));\n    \n    float loco = box(uv, 0.45, 0.5, 0.103, 0.112);\n    float chem1 = box(uv, 0.49, 0.495, 0.103, 0.12);\n    float chem2 = box(uv, 0.488, 0.496, 0.12, 0.123);\n    float locoRoof = box(uv, 0.443, 0.47, 0.11, 0.117);\n    \n    float wheel = 1.0 - step(0.00004, dot2(uv - vec2(0.457, 0.106)));\n    wheel += 1.0 - step(0.00002, dot2(uv - vec2(0.487, 0.105)));\n    wheel += 1.0 - step(0.00002, dot2(uv - vec2(0.497, 0.105)));\n    \n    if (uv.x < 0.45 && uv.y > 0.025 && uv.y < 0.2){\n        wheel += 1.0 - step(0.002, dot2(uv2 - vec2(0.2, 0.95)));\n        wheel += 1.0 - step(0.002, dot2(uv2 - vec2(0.8, 0.95)));\n    }\n    col = mix(col, vec3(0.18, 0.12, 0.15), join);\n    col =  mix(col, vec3(0.48, 0.19, 0.20), wagon);\n    col = mix(col, vec3(0.18, 0.12, 0.15), roof);\n    \n    col = mix(col, vec3(0.38, 0.19, 0.20), loco);\n    col = mix(col, vec3(0.38, 0.19, 0.20), chem1);\n    col = mix(col, vec3(0.18, 0.12, 0.15), locoRoof);\n    col = mix(col, vec3(0.18, 0.12, 0.15), chem2 + wheel);\n    // loco smoke //////\n    \n    dist = 5.0;\n    uv2 = uv + vec2(t/dist + 3.5, 0.0);\n    uv2.x -= t/dist*0.2;\n    h = fbm2(uv2, 8) - 0.55;\n    \n    if(uv.x < 0.49){\n        float x = -uv.x + 0.49;\n        float y = abs(uv.y + h*0.4 - 0.16*sqrt(x) - 0.12) - 0.8*x*exp(-x*10.0);\n        if(y < 0.0) col = vec3(1.0, 0.94, 0.91);\n        if(y < - 0.02) col = vec3(0.92, 0.85, 0.82);\n    }\n    \n    //bridge ///////\n    dist = 5.0;\n    uv2 = uv + vec2(t/dist + 32.5, 0.0);\n    uv2.x = fract(uv2.x*3.0);\n    k = 1.0;\n    k *= smoothstep(0.001, 0.003, abs(uv2.y - pow(uv2.x - 0.5, 2.0)*0.15 - 0.12));\n    k *= min(step(0.05, 1.0 - abs(uv2.x*2.0 - 1.0))\n         +   step(0.17, uv2.y), 1.0);\n    k *= min(smoothstep(0.02, 0.05, 1.0 - abs(uv2.x*2.0 - 1.0))\n         +   step(0.177, uv2.y), 1.0);\n         \n    k *= min(step(0.1, uv2.y)\n           + smoothstep(-0.09, -0.085, -uv2.y - 0.001/(1.0 - abs(uv2.x*2.0 - 1.0))), 1.0);\n           \n    k *= min(smoothstep(0.05, 0.2, 1.0 - abs(fract(uv2.x*16.0)*2.0 - 1.0))\n         +   step(0.12, uv2.y - pow(uv2.x - 0.5, 2.0)*0.15)\n         +   step(-0.1, -uv2.y), 1.0);\n    col = mix(vec3(0.29, 0.09, 0.08)*smoothstep(-0.08, 0.08, uv.y), col, k);\n    \n    \n    \n    col = mix(col, fg.rgb, fg.a);\n\n    // Output to screen\n    uv = fragCoord/iResolution.xy;\n    col = mix(col, texture(iChannel1, uv).rgb, 0.3);\n    fragColor = vec4(col,1.0);\n}\n\n";
+		const imageSource =
+			"#version 300 es\nprecision highp float;\nuniform sampler2D scene;\nuniform vec2 resolution;\nuniform float vignette;\nuniform float exposure, saturation;\nuniform float hue, temperature;\nuniform float intro, introFeather;\nout vec4 color;\nvoid main(){\nvec2 uv=gl_FragCoord.xy/resolution;\nvec3 col=texture(scene,uv).rgb;\nif(hue!=0.){\n  vec3 axis=normalize(vec3(1.));\n  float angle=radians(hue);\n  col=col*cos(angle)+cross(axis,col)*sin(angle)+axis*dot(axis,col)*(1.-cos(angle));\n}\ncol*=vec3(1.+temperature*.25,1.,1.-temperature*.25);\ncol=max(col,vec3(0.));\ncol=mix(vec3(dot(col,vec3(.2126,.7152,.0722))),col,saturation)*exposure;\ncol*=mix(1.,.5+.5*pow(max(16.*uv.x*uv.y*(1.-uv.x)*(1.-uv.y),0.),.2),vignette);\nif(intro<1.){\n  float eased=intro*intro*(3.-2.*intro);\n  float edge=mix(-introFeather,1.+introFeather,eased);\n  float reveal=1.-smoothstep(edge-introFeather,edge+introFeather,uv.x);\n  col=mix(vec3(.008,.035,.051),col,reveal);\n}\ncolor=vec4(col,1.);\n}\n";
+		const vertex =
+			"#version 300 es\nin vec2 p;void main(){gl_Position=vec4(p,0,1);}";
+		// 开场分层揭示只在前几秒需要；完成后改用原始的逐层提前返回，
+		// 避免持续在每个像素上执行开场混合与累积逻辑。
+		const fragment = (opening: boolean) =>
+			"#version 300 es\nprecision highp float;\nuniform vec3 iResolution;uniform float iTime,uFeedback,zoom,offset,amplitude,uDetail,uSamples;uniform sampler2D iChannel0,iChannel1;out vec4 result;\n" +
+			(opening
+				? cloudTrainOpeningSource(cloudTrainColorizeSource(original))
+				: cloudTrainColorizeSource(original)
+			)
+				.replace(
+					"texture(iChannel1, uv).rgb, 0.3",
+					"texture(iChannel1, uv).rgb, uFeedback",
+				)
+				.replace(
+					"vec2 uv = fragCoord/iResolution.y;",
+					"vec2 uv = (fragCoord/iResolution.y - .5*iResolution.xy/iResolution.y)/zoom + .5*iResolution.xy/iResolution.y; uv.y -= offset;",
+				)
+				.replaceAll(
+					"(fbm(uv2, 8) - 0.5)*disp",
+					"(fbm(uv2, 8) - 0.5)*disp*amplitude",
+				)
+				.replaceAll("i < detail;", "i < min(detail, int(uDetail));")
+				.replace("int n = 5;", "int n = int(uSamples);") +
+			"\nvoid main(){mainImage(result,gl_FragCoord.xy);}";
+
+		const el = this.#canvas,
+			gl = el.getContext("webgl2", {
+				alpha: false,
+				antialias: false,
+				depth: false,
+			});
+		if (!gl) {
+			throw new Error("WebGL 2 is required");
+		}
+		const programs: WebGLProgram[] = [],
+			textures: WebGLTexture[] = [],
+			buffers: WebGLBuffer[] = [],
+			fbos: WebGLFramebuffer[] = [];
+		let raf = 0,
+			last = 0,
+			time = 0,
+			w = 0,
+			h = 0,
+			read = 0,
+			history = false,
+			dead = false;
+		let introProgress = state.current.paused ? 1 : 0;
+		function program(src: string) {
+			const p = gl!.createProgram()!;
+			programs.push(p);
+			for (const [type, source] of [
+				[gl!.VERTEX_SHADER, vertex],
+				[gl!.FRAGMENT_SHADER, src],
+			] as const) {
+				const s = gl!.createShader(type)!;
+				gl!.shaderSource(s, source);
+				gl!.compileShader(s);
+				if (!gl!.getShaderParameter(s, gl!.COMPILE_STATUS)) {
+					const e = gl!.getShaderInfoLog(s);
+					gl!.deleteShader(s);
+					throw Error(e || "Shader error");
+				}
+				gl!.attachShader(p, s);
+				gl!.deleteShader(s);
+			}
+			gl!.bindAttribLocation(p, 0, "p");
+			gl!.linkProgram(p);
+			if (!gl!.getProgramParameter(p, gl!.LINK_STATUS))
+				throw Error(gl!.getProgramInfoLog(p) || "Link error");
+			return p;
+		}
+		function texture() {
+			const t = gl!.createTexture()!;
+			textures.push(t);
+			gl!.bindTexture(gl!.TEXTURE_2D, t);
+			gl!.texParameteri(gl!.TEXTURE_2D, gl!.TEXTURE_MIN_FILTER, gl!.LINEAR);
+			gl!.texParameteri(gl!.TEXTURE_2D, gl!.TEXTURE_MAG_FILTER, gl!.LINEAR);
+			return t;
+		}
+		function clean() {
+			dead = true;
+			cancelAnimationFrame(raf);
+			programs.forEach((p) => gl!.deleteProgram(p));
+			textures.forEach((t) => gl!.deleteTexture(t));
+			buffers.forEach((b) => gl!.deleteBuffer(b));
+			fbos.forEach((f) => gl!.deleteFramebuffer(f));
+		}
+		try {
+			// 前景采样的时间跨度保持原有的三分之一；采样次数随设备负载调整。
+			const openingScene = program(
+				fragment(true).replace(
+					"t+4.*float(i)/float(n)/60.",
+					"t+(4./3.)*float(i)/float(n)/60.",
+				),
+			);
+			const steadyScene = program(
+				fragment(false).replace(
+					"t+4.*float(i)/float(n)/60.",
+					"t+(4./3.)*float(i)/float(n)/60.",
+				),
+			);
+			const post = program(imageSource);
+			const locations = <const T extends readonly string[]>(
+				p: WebGLProgram,
+				n: T,
+			) =>
+				Object.fromEntries(
+					n.map((k) => [k, gl.getUniformLocation(p, k)]),
+				) as Record<T[number], WebGLUniformLocation | null>;
+			const tintKeys = ["skyTint", "smokeTint", "trainTint"] as const;
+			const sceneUniforms = [
+				"iResolution",
+				"iTime",
+				"iChannel0",
+				"iChannel1",
+				"uFeedback",
+				"zoom",
+				"offset",
+				"amplitude",
+				"uDetail",
+				"uSamples",
+				"intro",
+				"introFeather",
+				...tintKeys,
+			] as const;
+			const openingLocations = locations(openingScene, sceneUniforms);
+			const steadyLocations = locations(steadyScene, sceneUniforms);
+			const b = locations(post, [
+				"resolution",
+				"scene",
+				"vignette",
+				"exposure",
+				"saturation",
+				"hue",
+				"temperature",
+				"intro",
+				"introFeather",
+			]);
+			const quad = gl.createBuffer()!;
+			buffers.push(quad);
+			gl.bindBuffer(gl.ARRAY_BUFFER, quad);
+			gl.bufferData(
+				gl.ARRAY_BUFFER,
+				new Float32Array([-1, -1, 3, -1, -1, 3]),
+				gl.STATIC_DRAW,
+			);
+			gl.enableVertexAttribArray(0);
+			gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+			// Restore the original deterministic noise; supplied thumbnail is retained as an asset only.
+			const noise = texture(),
+				data = new Uint8Array(1024 * 1024);
+			let seed = 93451;
+			for (let i = 0; i < data.length; i++) {
+				seed ^= seed << 13;
+				seed ^= seed >>> 17;
+				seed ^= seed << 5;
+				data[i] = seed & 255;
+			}
+			gl.texImage2D(
+				gl.TEXTURE_2D,
+				0,
+				gl.R8,
+				1024,
+				1024,
+				0,
+				gl.RED,
+				gl.UNSIGNED_BYTE,
+				data,
+			);
+			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
+			const targets = [texture(), texture()];
+			for (const t of targets) {
+				gl.bindTexture(gl.TEXTURE_2D, t);
+				gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+				gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+				fbos.push(gl.createFramebuffer()!);
+			}
+			const media = matchMedia("(prefers-reduced-motion: reduce)");
+			function request() {
+				if (!dead && !raf && !document.hidden)
+					raf = requestAnimationFrame(draw);
+			}
+			const uniformCache = new Map<WebGLUniformLocation, number | string>();
+			function scalar(location: WebGLUniformLocation | null, value: number) {
+				if (location && uniformCache.get(location) !== value) {
+					gl!.uniform1f(location, value);
+					uniformCache.set(location, value);
+				}
+			}
+			function tint(location: WebGLUniformLocation | null, value: string) {
+				if (location && uniformCache.get(location) !== value) {
+					gl!.uniform3f(location, ...cloudTrainTintRgb(value));
+					uniformCache.set(location, value);
+				}
+			}
+			const bounds = el.getBoundingClientRect();
+			let cssWidth = bounds.width,
+				cssHeight = bounds.height;
+			let pixelWidth = 1,
+				pixelHeight = 1,
+				scale = state.current.resolution;
+			// 帧慢时仅降低画布像素和前景采样；噪声细节保持配置的 6 层。
+			// 保留 resolution 作为质量上限，设备恢复后再缓慢升回。
+			const qualityTiers = [
+				{ scale: 1, samples: 5 },
+				{ scale: 0.8, samples: 3 },
+				{ scale: 0.65, samples: 2 },
+				{ scale: 0.5, samples: 1 },
+				{ scale: 0.45, samples: 1 },
+			] as const;
+			let qualityTier = 0;
+			let slowFrames = 0;
+			let fastDuration = 0;
+			let lastQualityChange = 0;
+			const maxViewport = gl.getParameter(gl.MAX_VIEWPORT_DIMS) as Int32Array;
+			function updatePixelSize() {
+				const d = Math.min(devicePixelRatio || 1, 1.5) * scale;
+				pixelWidth = Math.max(
+					1,
+					Math.min(maxViewport[0]!, Math.round(cssWidth * d)),
+				);
+				pixelHeight = Math.max(
+					1,
+					Math.min(maxViewport[1]!, Math.round(cssHeight * d)),
+				);
+			}
+			updatePixelSize();
+			function setQualityTier(next: number, now: number) {
+				if (next === qualityTier) return;
+				qualityTier = next;
+				scale =
+					state.current.resolution *
+					(qualityTiers[next] ?? qualityTiers[0]).scale;
+				updatePixelSize();
+				slowFrames = 0;
+				fastDuration = 0;
+				lastQualityChange = now;
+			}
+			// Each texture owns a unit: resize uploads and rendering share this cache.
+			let activeUnit = -1;
+			const boundTextures = new Map<number, WebGLTexture>();
+			function bindTexture(unit: number, t: WebGLTexture) {
+				if (boundTextures.get(unit) === t) return;
+				if (activeUnit !== unit) {
+					gl!.activeTexture(gl!.TEXTURE0 + unit);
+					activeUnit = unit;
+				}
+				gl!.bindTexture(gl!.TEXTURE_2D, t);
+				boundTextures.set(unit, t);
+			}
+			function activate(unit: number) {
+				if (activeUnit !== unit) {
+					gl!.activeTexture(gl!.TEXTURE0 + unit);
+					activeUnit = unit;
+				}
+			}
+			bindTexture(0, noise);
+			targets.forEach((t, i) => bindTexture(i + 1, t));
+			for (const [sceneProgram, sceneLocations] of [
+				[openingScene, openingLocations],
+				[steadyScene, steadyLocations],
+			] as const) {
+				gl.useProgram(sceneProgram);
+				gl.uniform1i(sceneLocations.iChannel0, 0);
+				gl.uniform1i(sceneLocations.iChannel1, 1);
+			}
+			gl.useProgram(post);
+			gl.uniform1i(b.scene, 2);
+			function draw(now: number) {
+				raf = 0;
+				const s = state.current;
+				const frameGap = last ? now - last : 0;
+				if (frameGap > 40) {
+					slowFrames++;
+					fastDuration = 0;
+				} else if (frameGap > 0) {
+					slowFrames = 0;
+					fastDuration = frameGap < 20 ? fastDuration + frameGap : 0;
+				}
+				if (
+					slowFrames >= 2 &&
+					now - lastQualityChange > 1200 &&
+					qualityTier < qualityTiers.length - 1
+				) {
+					setQualityTier(qualityTier + 1, now);
+				} else if (
+					fastDuration > 8000 &&
+					now - lastQualityChange > 8000 &&
+					qualityTier > 0
+				) {
+					setQualityTier(qualityTier - 1, now);
+				}
+				// 开场按实际经过时间推进，慢设备不再把三秒动画拖成几十秒。
+				const elapsed = Math.min(frameGap / 1000, 1);
+				if (!s.introEnabled || media.matches) introProgress = 1;
+				else if (!s.paused)
+					introProgress = Math.min(
+						1,
+						introProgress + elapsed / s.introDuration,
+					);
+				if (!s.paused && !media.matches)
+					time += Math.min(elapsed, 0.1) * s.speed;
+				last = now;
+				const nw = pixelWidth,
+					nh = pixelHeight;
+				if (w !== nw || h !== nh) {
+					w = nw;
+					h = nh;
+					el.width = w;
+					el.height = h;
+					history = false;
+					targets.forEach((t, i) => {
+						bindTexture(i + 1, t);
+						activate(i + 1);
+						gl!.texImage2D(
+							gl!.TEXTURE_2D,
+							0,
+							gl!.RGBA,
+							w,
+							h,
+							0,
+							gl!.RGBA,
+							gl!.UNSIGNED_BYTE,
+							null,
+						);
+						gl!.bindFramebuffer(gl!.FRAMEBUFFER, fbos[i] ?? null);
+						gl!.framebufferTexture2D(
+							gl!.FRAMEBUFFER,
+							gl!.COLOR_ATTACHMENT0,
+							gl!.TEXTURE_2D,
+							t,
+							0,
+						);
+						gl!.clearColor(0, 0, 0, 1);
+						gl!.clear(gl!.COLOR_BUFFER_BIT);
+					});
+					for (const [sceneProgram, sceneLocations] of [
+						[openingScene, openingLocations],
+						[steadyScene, steadyLocations],
+					] as const) {
+						gl!.useProgram(sceneProgram);
+						gl!.uniform3f(sceneLocations.iResolution, w, h, 1);
+					}
+					gl!.useProgram(post);
+					gl!.uniform2f(b.resolution, w, h);
+					gl!.viewport(0, 0, w, h);
+				}
+				const write = 1 - read;
+				gl!.bindFramebuffer(gl!.FRAMEBUFFER, fbos[write]!);
+				// 开场结束后使用保留原始提前返回路径的着色器。
+				const opening = introProgress < 1;
+				const a = opening ? openingLocations : steadyLocations;
+				gl!.useProgram(opening ? openingScene : steadyScene);
+				gl!.uniform1i(a.iChannel1, read + 1);
+				for (const key of tintKeys) tint(a[key]!, s[key]);
+				scalar(a.zoom, s.zoom);
+				scalar(a.offset, s.offset);
+				scalar(a.amplitude, s.amplitude);
+				const quality = qualityTiers[qualityTier] ?? qualityTiers[0];
+				scalar(a.uDetail, s.detail);
+				scalar(a.uSamples, quality.samples);
+				scalar(a.intro, introProgress);
+				scalar(a.introFeather, s.introFeather);
+				scalar(a.iTime, time);
+				scalar(a.uFeedback, history && introProgress >= 1 ? s.feedback : 0);
+				gl!.drawArrays(gl!.TRIANGLES, 0, 3);
+				gl!.bindFramebuffer(gl!.FRAMEBUFFER, null);
+				gl!.useProgram(post);
+				gl!.uniform1i(b.scene, write + 1);
+				scalar(b.intro, 1);
+				scalar(b.introFeather, s.introFeather);
+				scalar(b.vignette, s.vignette);
+				scalar(b.exposure, s.exposure);
+				scalar(b.saturation, s.saturation);
+				scalar(b.hue, s.hue);
+				scalar(b.temperature, s.temperature);
+				gl!.drawArrays(gl!.TRIANGLES, 0, 3);
+				read = write;
+				history = true;
+				if (firstFrame) {
+					firstFrame = false;
+					onFirstFrame();
+				}
+				if (!s.paused && !media.matches && (s.speed !== 0 || introProgress < 1))
+					request();
+			}
+			const reset = () => {
+				cancelAnimationFrame(raf);
+				raf = 0;
+				last = 0;
+				history = false;
+				const nextScale =
+					state.current.resolution *
+					(qualityTiers[qualityTier] ?? qualityTiers[0]).scale;
+				if (scale !== nextScale) {
+					scale = nextScale;
+					updatePixelSize();
+				}
+				request();
+			};
+			wake.current = reset;
+			let dprQuery: MediaQueryList;
+			const dprChanged = () => {
+				dprQuery?.removeEventListener("change", dprChanged);
+				dprQuery = matchMedia(
+					"(resolution: " + (devicePixelRatio || 1) + "dppx)",
+				);
+				dprQuery.addEventListener("change", dprChanged);
+				updatePixelSize();
+				reset();
+			};
+			dprChanged();
+			const resize = new ResizeObserver(([entry]) => {
+				if (!entry) return;
+				cssWidth = entry.contentRect.width;
+				cssHeight = entry.contentRect.height;
+				updatePixelSize();
+				reset();
+			});
+			resize.observe(el);
+			document.addEventListener("visibilitychange", reset);
+			media.addEventListener("change", reset);
+			request();
+			return () => {
+				resize.disconnect();
+				dprQuery.removeEventListener("change", dprChanged);
+				document.removeEventListener("visibilitychange", reset);
+				media.removeEventListener("change", reset);
+				wake.current = () => {};
+				clean();
+			};
+		} catch (e) {
+			clean();
+			throw e;
+		}
+	}
+	#lost = (e: Event): void => {
+		e.preventDefault();
+		this.#cleanup?.();
+		this.#cleanup = undefined;
+		this.#onError(
+			"Cloud Train graphics context interrupted. Waiting to restore…",
+		);
+	};
+	#restored = (): void => {
+		try {
+			this.#cleanup = this.#start();
+			this.#onError(undefined);
+		} catch (e) {
+			this.#onError(String(e));
+		}
+	};
+	setSettings(s: CloudTrainSettings): void {
+		this.#settings.current = s;
+		this.#wake.current();
+	}
+	replay(): void {
+		this.#cleanup?.();
+		this.#cleanup = this.#start();
+	}
+	dispose(): void {
+		this.#cleanup?.();
+		this.#cleanup = undefined;
+		this.#canvas.removeEventListener("webglcontextlost", this.#lost);
+		this.#canvas.removeEventListener("webglcontextrestored", this.#restored);
+	}
+}
+
+/** Cloud Train is one scene module; other files in this directory use the same host contract. */
+export default function createCloudTrainScene({
+	canvas,
+	options,
+	onFirstFrame,
+}: WebGLWallpaperSceneContext): CloudTrainRenderer {
+	const renderer = new CloudTrainRenderer(
+		canvas.parentElement!,
+		canvas,
+		settings(options),
+		(message) => {
+			if (message)
+				canvas.closest("#wallpaper-wrapper")?.classList.remove("webgl-ready");
+		},
+		onFirstFrame,
+	);
+	return renderer;
+}
diff --git a/src/utils/webgl-wallpaper/scenes/fragment.ts b/src/utils/webgl-wallpaper/scenes/fragment.ts
new file mode 100644
index 0000000000..b2d0eb33d7
--- /dev/null
+++ b/src/utils/webgl-wallpaper/scenes/fragment.ts
@@ -0,0 +1,180 @@
+import type { WebGLWallpaperScene, WebGLWallpaperSceneContext } from "../types";
+
+const VERTEX_SOURCE = `#version 300 es
+layout(location=0) in vec2 position;
+void main() { gl_Position = vec4(position, 0.0, 1.0); }`;
+
+/** Load a site-owned GLSL file without changing the wallpaper host or bundle. */
+export default async function createFragmentScene({
+	canvas,
+	options,
+	signal,
+	onFirstFrame,
+}: WebGLWallpaperSceneContext): Promise<WebGLWallpaperScene> {
+	const url = options.url;
+	if (typeof url !== "string" || !url) {
+		throw new Error("WebGL fragment wallpaper requires options.url");
+	}
+	const response = await fetch(url, { signal });
+	if (!response.ok)
+		throw new Error(`Could not load shader: ${response.status}`);
+	const fragmentSource = await response.text();
+	if (fragmentSource.length > 100_000)
+		throw new Error("Shader source is too large");
+	if (signal.aborted)
+		throw new DOMException("Wallpaper load cancelled", "AbortError");
+	const speed =
+		typeof options.speed === "number" && Number.isFinite(options.speed)
+			? Math.max(0, Math.min(options.speed, 5))
+			: 1;
+	const renderScale =
+		typeof options.resolution === "number" &&
+		Number.isFinite(options.resolution)
+			? Math.max(0.25, Math.min(options.resolution, 1))
+			: 1;
+	const gl = canvas.getContext("webgl2", { alpha: false, antialias: false });
+	if (!gl) throw new Error("WebGL 2 is unavailable");
+
+	let program: WebGLProgram | null = null;
+	let buffer: WebGLBuffer | null = null;
+	let animationFrame = 0;
+	let lastTime = 0;
+	let elapsed = 0;
+	let disposed = false;
+	let firstFrame = true;
+	const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
+
+	function compile(type: number, source: string): WebGLShader {
+		const shader = gl!.createShader(type);
+		if (!shader) throw new Error("Could not allocate WebGL shader");
+		gl!.shaderSource(shader, source);
+		gl!.compileShader(shader);
+		if (!gl!.getShaderParameter(shader, gl!.COMPILE_STATUS)) {
+			const message =
+				gl!.getShaderInfoLog(shader) ?? "Shader compilation failed";
+			gl!.deleteShader(shader);
+			throw new Error(message);
+		}
+		return shader;
+	}
+
+	function releaseGraphics(): void {
+		cancelAnimationFrame(animationFrame);
+		animationFrame = 0;
+		if (program) gl!.deleteProgram(program);
+		if (buffer) gl!.deleteBuffer(buffer);
+		program = null;
+		buffer = null;
+	}
+
+	function initializeGraphics(): void {
+		const vertex = compile(gl!.VERTEX_SHADER, VERTEX_SOURCE);
+		let fragment: WebGLShader | null = null;
+		try {
+			fragment = compile(gl!.FRAGMENT_SHADER, fragmentSource);
+			program = gl!.createProgram();
+			if (!program) throw new Error("Could not allocate WebGL program");
+			gl!.attachShader(program, vertex);
+			gl!.attachShader(program, fragment);
+			gl!.linkProgram(program);
+			if (!gl!.getProgramParameter(program, gl!.LINK_STATUS)) {
+				throw new Error(gl!.getProgramInfoLog(program) ?? "Shader link failed");
+			}
+			buffer = gl!.createBuffer();
+			if (!buffer) throw new Error("Could not allocate WebGL buffer");
+			gl!.bindBuffer(gl!.ARRAY_BUFFER, buffer);
+			gl!.bufferData(
+				gl!.ARRAY_BUFFER,
+				new Float32Array([-1, -1, 3, -1, -1, 3]),
+				gl!.STATIC_DRAW,
+			);
+			gl!.enableVertexAttribArray(0);
+			gl!.vertexAttribPointer(0, 2, gl!.FLOAT, false, 0, 0);
+		} finally {
+			gl!.deleteShader(vertex);
+			if (fragment) gl!.deleteShader(fragment);
+		}
+	}
+
+	function requestFrame(): void {
+		if (!disposed && !animationFrame && !document.hidden && program) {
+			animationFrame = requestAnimationFrame(draw);
+		}
+	}
+
+	function draw(now: number): void {
+		animationFrame = 0;
+		if (!program || disposed) return;
+		const rect = canvas.getBoundingClientRect();
+		const dpr = Math.min(devicePixelRatio || 1, 1.5) * renderScale;
+		const width = Math.max(1, Math.round(rect.width * dpr));
+		const height = Math.max(1, Math.round(rect.height * dpr));
+		if (canvas.width !== width || canvas.height !== height) {
+			canvas.width = width;
+			canvas.height = height;
+		}
+		const delta = Math.min((now - (lastTime || now)) / 1000, 0.05);
+		lastTime = now;
+		if (!reducedMotion.matches) elapsed += delta * speed;
+		gl!.viewport(0, 0, width, height);
+		gl!.useProgram(program);
+		gl!.uniform3f(
+			gl!.getUniformLocation(program, "iResolution"),
+			width,
+			height,
+			1,
+		);
+		gl!.uniform1f(gl!.getUniformLocation(program, "iTime"), elapsed);
+		gl!.drawArrays(gl!.TRIANGLES, 0, 3);
+		if (firstFrame) {
+			firstFrame = false;
+			onFirstFrame();
+		}
+		if (speed > 0 && !reducedMotion.matches) requestFrame();
+	}
+
+	const resize = new ResizeObserver(requestFrame);
+	const onVisibility = () => {
+		lastTime = 0;
+		requestFrame();
+	};
+	const onContextLost = (event: Event) => {
+		event.preventDefault();
+		releaseGraphics();
+		canvas.closest("#wallpaper-wrapper")?.classList.remove("webgl-ready");
+	};
+	const onContextRestored = () => {
+		try {
+			initializeGraphics();
+			firstFrame = true;
+			requestFrame();
+		} catch (error) {
+			console.warn("WebGL wallpaper context could not be restored", error);
+		}
+	};
+	const dispose = () => {
+		if (disposed) return;
+		disposed = true;
+		resize.disconnect();
+		document.removeEventListener("visibilitychange", onVisibility);
+		reducedMotion.removeEventListener("change", requestFrame);
+		canvas.removeEventListener("webglcontextlost", onContextLost);
+		canvas.removeEventListener("webglcontextrestored", onContextRestored);
+		signal.removeEventListener("abort", dispose);
+		releaseGraphics();
+	};
+	try {
+		initializeGraphics();
+		resize.observe(canvas);
+		document.addEventListener("visibilitychange", onVisibility);
+		reducedMotion.addEventListener("change", requestFrame);
+		canvas.addEventListener("webglcontextlost", onContextLost);
+		canvas.addEventListener("webglcontextrestored", onContextRestored);
+		signal.addEventListener("abort", dispose, { once: true });
+		requestFrame();
+		return { dispose };
+	} catch (error) {
+		dispose();
+		throw error;
+	}
+}
diff --git a/src/utils/webgl-wallpaper/types.ts b/src/utils/webgl-wallpaper/types.ts
new file mode 100644
index 0000000000..aa2172e495
--- /dev/null
+++ b/src/utils/webgl-wallpaper/types.ts
@@ -0,0 +1,18 @@
+/** A scene owns its WebGL context, animation loop, resize handling, and GPU cleanup. */
+export interface WebGLWallpaperScene {
+	dispose(): void;
+}
+
+export interface WebGLWallpaperSceneContext {
+	canvas: HTMLCanvasElement;
+	options: Record<string, unknown>;
+	signal: AbortSignal;
+	// Call only after a successful frame so the fallback image stays visible on failure.
+	onFirstFrame(): void;
+}
+
+export interface WebGLWallpaperSceneModule {
+	default: (
+		context: WebGLWallpaperSceneContext,
+	) => WebGLWallpaperScene | Promise<WebGLWallpaperScene>;
+}