Hero 背景效果 新
约 4007 字大约 13 分钟
2025-10-24
概述
对于大多数的站点而言,一个 炫酷好看 首页首屏,能够更容易的吸引用户停留下来。 但实现 炫酷好看 往往需要比较复杂的技术成本,以及一些不错的灵感。
主题对 首页 的 Hero 部分,内置了一系列 炫酷好看 的背景效果, 通过简单的配置即可应用到你的站点首页中:
---
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: tint-plate
effectConfig:
key: value
---当且仅当 type: hero 时,主题会应用 effect 配置的效果。
effect 支持以下可选值:
effectConfig 需要根据不同的 effect 值,进行不同的配置。通常你不需要配置,主题会自动应用预设配置。
重要说明
主题内置的效果,得益于优秀开源项目 vue-bits。 遵循 MIT 协议,复制并修改其中的代码到主题中。
强制深色模式
大部分背景效果在 深色模式 下表现更加出色,因此建议开启 深色模式 以获得最佳体验。
但对于文档部分,也许 浅色模式 才是你想要的,因此主题在 hero 中提供了 forceDark 选项, 仅强制将首页强制变更为 深色模式,而不影响其他页面的颜色模式。
---
pageLayout: home
home: true
config:
-
type: hero
full: true
forceDark: true
effect: lightning
---背景动态效果
重要
不同的效果可能会依赖 three 或 gsap 或 ogl,你需要根据所使用的效果,手动安装相应的依赖包。
主题通过 按需加载 的方式动态加载这些效果, 因此不用担心最终打包后的文档体积过大。
tint-plate
效果预览

使用方法
---
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: tint-plate
---配置项
effectConfig 用于配置 RGB 值:
- 配置为单个值时,表示配置 red,green,blue 三个颜色值为相同值,范围: 0 - 255。示例:
210。 - 配置为三个值时,表示配置 red,green,blue 三个颜色值为不同值,范围: 0 - 255。示例:
210,210,210。 - 配置为
TintPlate,则可以更加灵活的控制每个颜色值和对应的偏移量。 - 还可以配置为
{ light: TintPlate, dark: TintPlate },在深色模式和浅色模式下使用不同的颜色值。
interface TintPlate {
r: { value: number, offset: number } // value 表示色值,offset 表示偏移量
g: { value: number, offset: number }
b: { value: number, offset: number }
}示例:
---
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: tint-plate
effectConfig: 210
------
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: tint-plate
effectConfig: 210,210,210
------
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: tint-plate
effectConfig:
r:
value: 210
offset: 0
g:
value: 210
offset: 0
b:
value: 210
offset: 0
---相关信息
为了便于用户配置 美观的个性化的背景,主题还提供了 首页背景色板配置工具 进行可视化操作,生成配置内容,你可以直接复制它们用于自己的项目中。
prism
效果预览

安装依赖
pnpm add oglyarn add oglnpm i ogl使用方法
---
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: prism
---配置项
heightOptionalnumber
3.5
棱柱的顶点高度(world units)
baseWidthOptionalnumber
5.5
X/Z轴总基准宽度(world units)
animationTypeOptional'rotate' | 'hover' | '3drotate'
'rotate'
动画模式:着色器摆动、指针悬停倾斜或完全三维旋转。
glowOptionalnumber
1
发光/溢出强度乘数。
offsetOptional{ x?: number, y?: number }
{ x: 0, y: 0 }
画布内的像素偏移(x → 向右,y → 向下)。
noiseOptionalnumber
0
最终颜色中添加的颗粒噪声量(0表示禁用)。
transparentOptionalboolean
true
画布是否具有Alpha通道(透明背景)。
scaleOptionalnumber
3.6
棱镜的整体屏幕空间比例(数值越大,显示尺寸越大)。
hueShiftOptionalnumber
0
色调旋转(弧度)应用于最终颜色。
colorFrequencyOptionalnumber
1
控制颜色变化的内部正弦带频率。
hoverStrengthOptionalnumber
2
悬停倾斜(俯仰/偏航幅度)灵敏度。
inertiaOptionalnumber
0.05
悬停缓动因子(0 ~ 1,数值越大响应越灵敏)。
bloomOptionalnumber
1
在光泽之上叠加额外的绽放效果层次。
suspendWhenOffscreenOptionalboolean
true
当元素不在视口内时暂停渲染。
timeScaleOptionalnumber
0.5
动画全局时间倍率(0=冻结,1=正常)。
示例:
---
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: prism
effectConfig:
height: 3.5,
baseWidth: 5.5
animationType: rotate
glow: 1
offset:
x: 0
y: 0
noise: 0
transparent: true
scale: 3.6
hueShift: 0
colorFrequency: 1
hoverStrength: 2
inertia: 0.05
bloom: 1
suspendWhenOffscreen: true
timeScale: 0.5
---pixel-blast
效果预览
![]()
安装依赖
pnpm add three postprocessingyarn add three postprocessingnpm i three postprocessing使用方法
---
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: pixel-blast
---配置项
variantOptional'square' | 'circle' | 'triangle' | 'diamond'
'square'
像素形状变体
pixelSizeOptionalnumber
4
基础像素尺寸(根据DPI自动缩放)。
colorOptionalstring
'#5086a1'
像素颜色
antialiasOptionalboolean
true
是否启用抗锯齿
patternScaleOptionalnumber
2
噪声/图案比例
patternDensityOptionalnumber
1
调整图案密度
liquidOptionalboolean
false
是否启用液体扭曲效果。
liquidStrengthOptionalnumber
0.1
液体扭曲强度
liquidRadiusOptionalnumber
1
液体触摸笔刷半径比例。
liquidWobbleSpeedOptionalnumber
4.5
液体晃动频率
pixelSizeJitterOptionalnumber
0
应用于覆盖范围的随机抖动
enableRipplesOptionalboolean
true
启用点击涟漪效果
rippleIntensityScaleOptionalnumber
1
纹波强度乘数
rippleThicknessOptionalnumber
0.1
纹波环厚度
rippleSpeedOptionalnumber
0.3
纹波传播速度
autoPauseOffscreenOptionalboolean
true
当元素不在视口内时自动暂停渲染
speedOptionalnumber
0.5
动画时间缩放比例
transparentOptionalboolean
true
透明背景
edgeFadeOptionalnumber
0.5
边缘淡入距离(0-1)。
noiseAmountOptionalnumber
0
噪声强度
classNameOptionalstring
容器自定义类名
styleOptionalCSSProperties
容器自定义样式
backgroundImageOptionalstring
背景图像 URL
示例:
---
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: pixel-blast
effectConfig:
variant: square
pixelSize: 4
color: #5086a1
antialias: true
patternScale: 2
patternDensity: 1
liquid: false
liquidStrength: 0.1
liquidRadius: 1
pixelSizeJitter: 0
enableRipples: true
rippleIntensityScale: 1
rippleThickness: 0.1
rippleSpeed: 0.3
liquidWobbleSpeed: 4.5
autoPauseOffscreen: true
speed: 0.5
transparent: true
edgeFade: 0.5
noiseAmount: 0
---hyper-speed
效果预览

安装依赖
pnpm add three postprocessingyarn add three postprocessingnpm i three postprocessing使用方法
---
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: hyper-speed
---配置项
interface ThemeHomeHeroHyperSpeedDistortion {
uniforms: Record<string, { value: unknown }>
getDistortion: string
}
interface ThemeHomeHeroHyperSpeedColors {
roadColor: number
islandColor: number
background: number
shoulderLines: number
brokenLines: number
leftCars: number[]
rightCars: number[]
sticks: number
}
interface ThemeHomeHeroHyperSpeed {
distortion?: string | ThemeHomeHeroHyperSpeedDistortion
length: number
roadWidth: number
islandWidth: number
lanesPerRoad: number
fov: number
fovSpeedUp: number
speedUp: number
carLightsFade: number
totalSideLightSticks: number
lightPairsPerRoadWay: number
shoulderLinesWidthPercentage: number
brokenLinesWidthPercentage: number
brokenLinesLengthPercentage: number
lightStickWidth: [number, number]
lightStickHeight: [number, number]
movingAwaySpeed: [number, number]
movingCloserSpeed: [number, number]
carLightsLength: [number, number]
carLightsRadius: [number, number]
carWidthPercentage: [number, number]
carShiftX: [number, number]
carFloorSeparation: [number, number]
colors: ThemeHomeHeroHyperSpeedColors
isHyper?: boolean
}vue-bits 未提供详细配置项说明,请谨慎使用。
可以使用以下预设配置,直接复制到你的 markdown 文件中:
---
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: hyper-speed
effectConfig:
distortion: turbulentDistortion
length: 400
roadWidth: 10
islandWidth: 2
lanesPerRoad: 3
fov: 90
fovSpeedUp: 150
speedUp: 2
carLightsFade: 0.4
totalSideLightSticks: 20
lightPairsPerRoadWay: 40
shoulderLinesWidthPercentage: 0.05
brokenLinesWidthPercentage: 0.1
brokenLinesLengthPercentage: 0.5
lightStickWidth: [0.12, 0.5]
lightStickHeight: [1.3, 1.7]
movingAwaySpeed: [60, 80]
movingCloserSpeed: [-120, -160]
carLightsLength: [12, 80]
carLightsRadius: [0.05, 0.14]
carWidthPercentage: [0.3, 0.5]
carShiftX: [-0.8, 0.8]
carFloorSeparation: [0, 5]
colors:
roadColor: 0x080808
islandColor: 0x0a0a0a
background: 0x000000
shoulderLines: 0x131318
brokenLines: 0x131318
leftCars: [0xd856bf, 0x6750a2, 0xc247ac]
rightCars: [0x03b3c3, 0x0e5ea5, 0x324555]
sticks: 0x03b3c3
------
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: hyper-speed
effectConfig:
distortion: mountainDistortion
length: 400
roadWidth: 9
islandWidth: 2
lanesPerRoad: 3
fov: 90
fovSpeedUp: 150
speedUp: 2
carLightsFade: 0.4
totalSideLightSticks: 50
lightPairsPerRoadWay: 50
shoulderLinesWidthPercentage: 0.05
brokenLinesWidthPercentage: 0.1
brokenLinesLengthPercentage: 0.5
lightStickWidth: [0.12, 0.5]
lightStickHeight: [1.3, 1.7]
movingAwaySpeed: [60, 80]
movingCloserSpeed: [-120, -160]
carLightsLength: [20, 60]
carLightsRadius: [0.05, 0.14]
carWidthPercentage: [0.3, 0.5]
carShiftX: [-0.2, 0.2]
carFloorSeparation: [0.05, 1]
colors:
roadColor: 0x080808
islandColor: 0x0a0a0a
background: 0x000000
shoulderLines: 0x131318
brokenLines: 0x131318
leftCars: [0xff102a, 0xeb383e, 0xff102a]
rightCars: [0xdadafa, 0xbebae3, 0x8f97e4]
sticks: 0xdadafa
------
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: hyper-speed
effectConfig:
distortion: xyDistortion
length: 400
roadWidth: 9
islandWidth: 2
lanesPerRoad: 3
fov: 90
fovSpeedUp: 150
speedUp: 3
carLightsFade: 0.4
totalSideLightSticks: 50
lightPairsPerRoadWay: 30
shoulderLinesWidthPercentage: 0.05
brokenLinesWidthPercentage: 0.1
brokenLinesLengthPercentage: 0.5
lightStickWidth: [0.02, 0.05]
lightStickHeight: [0.3, 0.7]
movingAwaySpeed: [20, 50]
movingCloserSpeed: [-150, -230]
carLightsLength: [20, 80]
carLightsRadius: [0.03, 0.08]
carWidthPercentage: [0.1, 0.5]
carShiftX: [-0.5, 0.5]
carFloorSeparation: [0, 0.1]
colors:
roadColor: 0x080808
islandColor: 0x0a0a0a
background: 0x000000
shoulderLines: 0x131318
brokenLines: 0x131318,
leftCars: [0x7d0d1b, 0xa90519, 0xff102a]
rightCars: [0xf1eece, 0xe6e2b1, 0xdfd98a]
sticks: 0xf1eece
------
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: hyper-speed
effectConfig:
distortion: LongRaceDistortion
length: 400
roadWidth: 10
islandWidth: 5
lanesPerRoad: 2
fov: 90
fovSpeedUp: 150
speedUp: 2
carLightsFade: 0.4
totalSideLightSticks: 50
lightPairsPerRoadWay: 70
shoulderLinesWidthPercentage: 0.05
brokenLinesWidthPercentage: 0.1
brokenLinesLengthPercentage: 0.5
lightStickWidth: [0.12, 0.5]
lightStickHeight: [1.3, 1.7]
movingAwaySpeed: [60, 80]
movingCloserSpeed: [-120, -160]
carLightsLength: [20, 60]
carLightsRadius: [0.05, 0.14]
carWidthPercentage: [0.3, 0.5]
carShiftX: [-0.2, 0.2]
carFloorSeparation: [0.05, 1]
colors:
roadColor: 0x080808
islandColor: 0x0a0a0a
background: 0x000000
shoulderLines: 0x131318
brokenLines: 0x131318
leftCars: [0xff5f73, 0xe74d60, 0xff102a]
rightCars: [0xa4e3e6, 0x80d1d4, 0x53c2c6]
sticks: 0xa4e3e6
------
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: hyper-speed
effectConfig:
distortion: turbulentDistortion
length: 400
roadWidth: 9
islandWidth: 2
lanesPerRoad: 3
fov: 90
fovSpeedUp: 150
speedUp: 2
carLightsFade: 0.4
totalSideLightSticks: 50
lightPairsPerRoadWay: 50
shoulderLinesWidthPercentage: 0.05
brokenLinesWidthPercentage: 0.1
brokenLinesLengthPercentage: 0.5
lightStickWidth: [0.12, 0.5]
lightStickHeight: [1.3, 1.7]
movingAwaySpeed: [60, 80]
movingCloserSpeed: [-120, -160]
carLightsLength: [20, 60]
carLightsRadius: [0.05, 0.14]
carWidthPercentage: [0.3, 0.5]
carShiftX: [-0.2, 0.2]
carFloorSeparation: [0.05, 1]
colors:
roadColor: 0x080808
islandColor: 0x0a0a0a
background: 0x000000
shoulderLines: 0x131318
brokenLines: 0x131318
leftCars: [0xdc5b20, 0xdca320, 0xdc2020]
rightCars: [0x334bf7, 0xe5e6ed, 0xbfc6f3]
sticks: 0xc5e8eb
------
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: hyper-speed
effectConfig:
distortion: deepDistortion
length: 400
roadWidth: 18
islandWidth: 2
lanesPerRoad: 3
fov: 90
fovSpeedUp: 150
speedUp: 2
carLightsFade: 0.4
totalSideLightSticks: 50
lightPairsPerRoadWay: 50
shoulderLinesWidthPercentage: 0.05
brokenLinesWidthPercentage: 0.1
brokenLinesLengthPercentage: 0.5
lightStickWidth: [0.12, 0.5]
lightStickHeight: [1.3, 1.7]
movingAwaySpeed: [60, 80]
movingCloserSpeed: [-120, -160]
carLightsLength: [20, 60]
carLightsRadius: [0.05, 0.14]
carWidthPercentage: [0.3, 0.5]
carShiftX: [-0.2, 0.2]
carFloorSeparation: [0.05, 1]
colors:
roadColor: 0x080808
islandColor: 0x0a0a0a
background: 0x000000
shoulderLines: 0x131318
brokenLines: 0x131318
leftCars: [0xff322f, 0xa33010, 0xa81508]
rightCars: [0xfdfdf0, 0xf3dea0, 0xe2bb88]
sticks: 0xfdfdf0
---liquid-ether
效果预览

安装依赖
pnpm add threeyarn add threenpm i three使用方法
---
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: liquid-ether
---配置项
mouseForceOptionalnumber
20
鼠标/触摸移动注入速度时的强度系数。
cursorSizeOptionalnumber
100
光标半径(以基本分辨率的像素为单位)。
isViscousOptionalboolean
false
启用迭代性质量解决方案(更平滑,更粗糙的运动)。
viscousOptionalnumber
30
当 isViscous 为 true 时使用的粘性系数。
iterationsViscousOptionalnumber
32
粘性的高斯-塞德尔迭代次数(值越大 = 更平滑,更慢)。
iterationsPoissonOptionalnumber
32
用于确保不可压缩性的压力泊松迭代次数。
dtOptionalnumber
0.014
内部的对流/扩散迭代中使用固定的模拟时间步长。
BFECCOptionalboolean
true
启用 BFECC 传输(错误补偿)以获得更清晰的流动,禁用以获得稍微的性能提升。
resolutionOptionalnumber
0.5
相对于画布大小的仿真纹理缩放(值越小,更好的性能、更模糊)。
isBounceOptionalboolean
false
如果为 true,显示弹跳边界(速度在边缘上限)。
colorsOptionalstring[]
['#5227FF', '#FF9FFC', '#B19EEF']
用于构建速度-颜色映射调色板的十六进制颜色停止点数组。
autoDemoOptionalboolean
true
启用无用户交互时的自动驾驶指针。
autoSpeedOptionalnumber
0.5
自动指针运动的速度(标准化单位/秒)。
autoIntensityOptionalnumber
2.2
在自动模式下应用于速度增量的乘数。
takeoverDurationOptionalnumber
2.5
在用户移动鼠标时从自动指针插值到实际光标的秒数。
autoResumeDelayOptionalnumber
1000
在自动模式恢复之前的不活动时间(毫秒)。
autoRampDurationOptionalnumber
0.6
在激活后从 0 开始加速自动移动速度的秒数。
classNameOptionalstring
应用于容器上的 CSS 类名。
styleOptionalCSSProperties
应用于容器上的 CSS 样式。
示例:
---
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: liquid-ether
effectConfig:
mouseForce: 20
cursorSize: 100
isViscous: false
viscous: 30
iterationsViscous: 32
iterationsPoisson: 32
dt: 0.014
BFECC: true
resolution: 0.5
isBounce: false
colors: [#5227FF, #FF9FFC, #B19EEF]
autoDemo: true
autoSpeed: 0.5
autoIntensity: 2.2
takeoverDuration: 0.25
autoResumeDelay: 1000
autoRampDuration: 0.6
---dot-grid
效果预览

安装依赖
pnpm add three gsapyarn add three gsapnpm i three gsap使用方法
---
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: dot-grid
---配置项
dotSizeOptionalnumber
5
每个点的尺寸(像素)。
gapOptionalnumber
15
每个点之间的间隙(像素)。
baseColorOptionalstring
'#ebebf5'
点的基本颜色。
activeColorOptionalstring
'#8cccd5'
鼠标悬停或激活时点的颜色。
proximityOptionalnumber
120
鼠标指针周围的半径,在此范围内点会响应
speedTriggerOptionalnumber
100
触发惯性效果的鼠标速度阈值。
shockRadiusOptionalnumber
250
点击时的震动波半径。
shockStrengthOptionalnumber
5
点击时震动波的强度。
maxSpeedOptionalnumber
5000
惯性计算的最大速度。
resistanceOptionalnumber
750
惯性效果的阻力
returnDurationOptionalnumber
1.5
惯性后点返回原始位置的持续时间。
classNameOptionalstring
应用于容器上的 CSS 类名。
styleOptionalCSSProperties
应用于容器上的 CSS 样式。
示例:
---
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: dot-grid
effectConfig:
dotSize: 5
gap: 15
baseColor: #ebebf5
activeColor: #8cccd5
proximity: 120
speedTrigger: 100
shockRadius: 250
shockStrength: 5
maxSpeed: 5000
resistance: 750
returnDuration: 1.5
---iridescence
效果预览

安装依赖
pnpm add oglyarn add oglnpm i ogl使用方法
---
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: iridescence
---配置项
colorOptionalreadonly [number, number, number]
[1, 1, 1]
基准色以 RGB 值数组形式表示(每个数值范围在 0 到 1 之间)。
speedOptionalnumber
1
动画的速度乘数
amplitudeOptionalnumber
0.1
鼠标驱动效果的振幅。
mouseReactOptionalboolean
true
启用或禁用鼠标与着色器的交互
示例:
---
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: iridescence
effectConfig:
color: [1, 1, 1]
speed: 1.0
amplitude: 0.1
mouseReact: true
---orb
效果预览

安装依赖
pnpm add oglyarn add oglnpm i ogl使用方法
---
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: orb
---配置项
hueOptionalnumber
0
球的基本色调(度)。
hoverIntensityOptionalnumber
0.2
控制悬停扭曲效果的强度。
rotateOnHoverOptionalboolean
true
启用或禁用悬停时的持续旋转。
forceHoverStateOptionalboolean
false
即使没有悬停,也强制启用悬停动画。
classNameOptionalstring
应用于容器上的 CSS 类名。
示例:
---
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: orb
effectConfig:
hue: 0
hoverIntensity: 0.2
rotateOnHover: true
forceHoverState: false
---beams
效果预览

安装依赖
pnpm add threeyarn add threenpm i three使用方法
---
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: beams
---配置项
beamWidthOptionalnumber
2
每个激光束的宽度。
beamHeightOptionalnumber
15
每个激光束的高度。
beamNumberOptionalnumber
12
要显示的激光束数量。
lightColorOptionalstring
#fff
方向光的颜色。
speedOptionalnumber
2
动画的速度。
noiseIntensityOptionalnumber
1.75
噪音效果的强度。
scaleOptionalnumber
0.2
噪音模式的缩放比例。
rotationOptionalnumber
0
整个激光束系统的旋转角度(度)。
示例:
---
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: beams
effectConfig:
beamWidth: 2
beamHeight: 15
beamNumber: 12
lightColor: #fff
speed: 2
noiseIntensity: 1.75
scale: 0.2
rotation: 0
---lightning
效果预览

使用方法
---
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: lightning
---配置项
hueOptionalnumber
255
光束的色调(度)(0到360)。
xOffsetOptionalnumber
0
光束的水平偏移量(标准化单位)。
speedOptionalnumber
1
光束的动画速度乘数。
intensityOptionalnumber
1
光束的亮度乘数。
sizeOptionalnumber
1
光束的缩放因子。
示例:
---
pageLayout: home
home: true
config:
-
type: hero
full: true
effect: lightning
effectConfig:
hue: 255
xOffset: 0
speed: 1
intensity: 1
size: 1
---