diff --git a/docs/.vuepress/public/images/hero-effects/dark-veil.png b/docs/.vuepress/public/images/hero-effects/dark-veil.png
new file mode 100644
index 00000000..5a9cffd6
Binary files /dev/null and b/docs/.vuepress/public/images/hero-effects/dark-veil.png differ
diff --git a/docs/en/guide/custom/home-hero-effect.md b/docs/en/guide/custom/home-hero-effect.md
index fab07ccb..d24eb2f3 100644
--- a/docs/en/guide/custom/home-hero-effect.md
+++ b/docs/en/guide/custom/home-hero-effect.md
@@ -43,6 +43,7 @@ The `effect` property supports the following values:
- [orb](#orb)
- [beams](#beams)
- [lightning](#lightning)
+- [dark-veil](#dark-veil)
The `effectConfig` should be configured according to the selected `effect`.
In most cases, you don’t need to configure it—the theme will automatically apply preset configurations.
@@ -1304,3 +1305,71 @@ config:
size: 1
---
```
+
+### dark-veil
+
+#### Effect Preview
+
+
+
+#### Usage
+
+```md {8}
+---
+pageLayout: home
+home: true
+config:
+ -
+ type: hero
+ full: true
+ effect: dark-veil
+---
+```
+
+#### Configuration
+
+::::field-group
+:::field name="hueShift" type="number" optional default="0"
+Shifts the hue of the entire animation.
+:::
+:::field name="noiseIntensity" type="number" optional default="0"
+Intensity of the noise/grain effect.
+:::
+:::field name="scanlineIntensity" type="number" optional default="0"
+Intensity of the scanline effect.
+:::
+:::field name="speed" type="number" optional default="0.5"
+Speed of the animation.
+:::
+:::field name="scanlineFrequency" type="number" optional default="0"
+Frequency of the scanlines.
+:::
+:::field name="warpAmount" type="number" optional default="0"
+Amount of warp distortion applied to the effect.
+:::
+:::field name="resolutionScale" type="number" optional default="1"
+Scale factor for the resolution.
+:::
+::::
+
+**Example**:
+
+```md
+---
+pageLayout: home
+home: true
+config:
+ -
+ type: hero
+ full: true
+ effect: dark-veil
+ effectConfig:
+ hueShift: 0
+ noiseIntensity: 0
+ scanlineIntensity: 0
+ speed: 0.5
+ scanlineFrequency: 0
+ warpAmount: 0
+ resolutionScale: 1
+---
+```
diff --git a/docs/guide/custom/home-hero-effect.md b/docs/guide/custom/home-hero-effect.md
index 8e57d911..a64cbd0f 100644
--- a/docs/guide/custom/home-hero-effect.md
+++ b/docs/guide/custom/home-hero-effect.md
@@ -43,6 +43,7 @@ config:
- [orb](#orb)
- [beams](#beams)
- [lightning](#lightning)
+- [dark-veil](#dark-veil)
`effectConfig` 需要根据不同的 `effect` 值,进行不同的配置。通常你不需要配置,主题会自动应用预设配置。
@@ -1301,3 +1302,71 @@ config:
size: 1
---
```
+
+### dark-veil
+
+#### 效果预览
+
+
+
+#### 使用方法
+
+```md {8}
+---
+pageLayout: home
+home: true
+config:
+ -
+ type: hero
+ full: true
+ effect: dark-veil
+---
+```
+
+#### 配置项
+
+::::field-group
+:::field name="hueShift" type="number" optional default="0"
+调整整个动画的色调。
+:::
+:::field name="noiseIntensity" type="number" optional default="0"
+噪声/颗粒效果的强度。
+:::
+:::field name="scanlineIntensity" type="number" optional default="0"
+扫描线效果的强度。
+:::
+:::field name="speed" type="number" optional default="0.5"
+动画速度。
+:::
+:::field name="scanlineFrequency" type="number" optional default="0"
+扫描线的频率。
+:::
+:::field name="warpAmount" type="number" optional default="0"
+应用于效果的扭曲变形量。
+:::
+:::field name="resolutionScale" type="number" optional default="1"
+分辨率缩放比例。
+:::
+::::
+
+**示例**:
+
+```md
+---
+pageLayout: home
+home: true
+config:
+ -
+ type: hero
+ full: true
+ effect: dark-veil
+ effectConfig:
+ hueShift: 0
+ noiseIntensity: 0
+ scanlineIntensity: 0
+ speed: 0.5
+ scanlineFrequency: 0
+ warpAmount: 0
+ resolutionScale: 1
+---
+```
diff --git a/theme/src/client/components/background/DarkVeil.vue b/theme/src/client/components/background/DarkVeil.vue
new file mode 100644
index 00000000..7b01e832
--- /dev/null
+++ b/theme/src/client/components/background/DarkVeil.vue
@@ -0,0 +1,219 @@
+
+
+
+
+
+
+
+
diff --git a/theme/src/node/prepare/prepareHomeHeroEffects.ts b/theme/src/node/prepare/prepareHomeHeroEffects.ts
index 8e5fc2b0..18953389 100644
--- a/theme/src/node/prepare/prepareHomeHeroEffects.ts
+++ b/theme/src/node/prepare/prepareHomeHeroEffects.ts
@@ -15,6 +15,7 @@ const effectDeps: Record = {
'iridescence': ['ogl'],
'orb': ['ogl'],
'beams': ['three'],
+ 'dark-veil': ['ogl'],
}
const effectMapping: Record = {
@@ -28,6 +29,7 @@ const effectMapping: Record = {
'orb': 'Orb',
'beams': 'Beams',
'lightning': 'Lightning',
+ 'dark-veil': 'DarkVeil',
}
const allEffects = Object.keys(effectMapping)
diff --git a/theme/src/shared/frontmatter/homeHeroEffects.ts b/theme/src/shared/frontmatter/homeHeroEffects.ts
index 3a595d77..b40ba26f 100644
--- a/theme/src/shared/frontmatter/homeHeroEffects.ts
+++ b/theme/src/shared/frontmatter/homeHeroEffects.ts
@@ -3,7 +3,7 @@ import type { CSSProperties } from 'vue'
import type { ThemeLightDark } from '../common/index.js'
import type { LiteralUnion } from '../utils.js'
-export type ThemeHomeHeroEffect = LiteralUnion<'tint-plate' | 'prism' | 'pixel-blast' | 'hyper-speed' | 'liquid-ether' | 'dot-grid' | 'iridescence' | 'orb' | 'beams' | 'lightning'>
+export type ThemeHomeHeroEffect = LiteralUnion<'tint-plate' | 'prism' | 'pixel-blast' | 'hyper-speed' | 'liquid-ether' | 'dot-grid' | 'iridescence' | 'orb' | 'beams' | 'lightning' | 'dark-veil'>
export type ThemeHomeHeroEffectConfig
= | ThemeHomeHeroTintPlate
@@ -16,6 +16,7 @@ export type ThemeHomeHeroEffectConfig
| ThemeHomeHeroOrb
| ThemeHomeHeroBeams
| ThemeHomeHeroLightning
+ | ThemeHomeHeroDarkVeil
export type ThemeHomeHeroTintPlate = ThemeLightDark<{ rgb: string | number } | {
r: { value: number, offset: number }
@@ -557,3 +558,41 @@ export interface ThemeHomeHeroLightning {
*/
size?: number
}
+
+export interface ThemeHomeHeroDarkVeil {
+ /**
+ * Shifts the hue of the entire animation.
+ * 调整整个动画的色调。
+ */
+ hueShift?: number
+ /**
+ * Intensity of the noise/grain effect.
+ * 噪声/颗粒效果的强度。
+ */
+ noiseIntensity?: number
+ /**
+ * Intensity of the scanline effect.
+ * 扫描线效果的强度。
+ */
+ scanlineIntensity?: number
+ /**
+ * Speed of the animation.
+ * 动画速度。
+ */
+ speed?: number
+ /**
+ * Frequency of the scanlines.
+ * 扫描线的频率。
+ */
+ scanlineFrequency?: number
+ /**
+ * Amount of warp distortion applied to the effect.
+ * 应用于效果的扭曲变形量。
+ */
+ warpAmount?: number
+ /**
+ * Scale factor for the resolution.
+ * 分辨率缩放比例。
+ */
+ resolutionScale?: number
+}