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 + +![dark-veil](/images/hero-effects/dark-veil.png) + +#### 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 + +#### 效果预览 + +![dark-veil](/images/hero-effects/dark-veil.png) + +#### 使用方法 + +```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 +}