Plume 主题

简体中文

English

外观

在 GitHub 上 Star遇到问题？喝杯奶茶

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

效果预览

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
---

相关信息

为了便于用户配置 美观的个性化的背景，主题还提供了 首页背景色板配置工具 进行可视化操作，生成配置内容，你可以直接复制它们用于自己的项目中。

prism

效果预览

prism

安装依赖

pnpm
pnpm add 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

效果预览

pixel-blast

安装依赖

pnpm
pnpm add 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

效果预览

hyper-speed

安装依赖

pnpm
pnpm add 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 文件中:

Cyberpunk
---
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
---

liquid-ether

效果预览

liquid-ether

安装依赖

pnpm
pnpm add 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

效果预览

dot-grid

安装依赖

pnpm
pnpm add 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

效果预览

iridescence

安装依赖

pnpm
pnpm add 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

效果预览

orb

安装依赖

pnpm
pnpm add 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

效果预览

beams

安装依赖

pnpm
pnpm add 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

效果预览

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
---

贡献者

pengzhanbo

更新日志

2025/10/25 03:55
查看所有更新日志
  • aa616-feat(theme): add home hero effects (#738)于