Plume Theme

English

简体中文

Appearance

Star on GitHubCreate IssuesBuy me a Bubble Tea

Hero Background Effects New

About 3241 wordsAbout 11 min

2025-10-24

Overview

For most websites, a visually stunning homepage hero section can more easily attract users to stay. However, achieving visual appeal often requires complex technical effort and a touch of creative inspiration.

The theme comes with a series of visually impressive background effects built into the Hero section of the homepage, which can be easily applied to your site through simple configuration:

---
pageLayout: home
home: true
config:
 -
    type: hero
    full: true
    effect: tint-plate
    effectConfig:
      key: value
---

Only when type: hero is set will the theme apply the effect specified in effect.

The effect property supports the following values:

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.

Note

The built-in effects are based on the excellent open-source project vue-bits, whose code has been adapted and integrated into the theme under the MIT license.

Force Dark Mode

Most background effects perform better in dark mode, so it is recommended to enable dark mode for the best experience.

However, for documentation pages, you may prefer light mode. Therefore, the theme provides a forceDark option in the hero section, which forces the homepage into dark mode without affecting the color mode of other pages.

---
pageLayout: home
home: true
config:
 -
    type: hero
    full: true
    forceDark: true
    effect: lightning
---

Dynamic Background Effects

Important

Some effects may depend on three, gsap, or ogl. You need to manually install the corresponding dependencies based on the effect you choose.

The theme loads these effects on-demand, so there is no need to worry about increasing the final bundle size.

tint-plate

Effect Preview

tint-plate

Usage

---
pageLayout: home
home: true
config:
 -
    type: hero
    full: true
    effect: tint-plate
---

Configuration

effectConfig is used to configure RGB values:

  • When configured as a single value, it sets the same value for red, green, and blue channels (range: 0–255). Example: 210.
  • When configured as three values, it sets different values for red, green, and blue channels (range: 0–255). Example: 210,210,210.
  • When configured as TintPlate, it allows more flexible control over each color value and its corresponding offset.
  • It can also be configured as { light: TintPlate, dark: TintPlate } to use different color values in light mode and dark mode.
interface TintPlate {
  r: { value: number, offset: number }
  g: { value: number, offset: number }
  b: { value: number, offset: number }
}

Example：

Single value
---
pageLayout: home
home: true
config:
 -
    type: hero
    full: true
    effect: tint-plate
    effectConfig: 210
---

Info

To help users easily configure visually appealing and personalized backgrounds, the theme also provides a Homepage Hero Tint Plate Configuration Tool. You can use this tool for visual configuration and generate configuration content that can be directly copied into your own project.

prism

Effect Preview

prism

Install dependencies

pnpm
pnpm add ogl

Usage

---
pageLayout: home
home: true
config:
 -
    type: hero
    full: true
    effect: prism
---

Configuration

heightOptionalnumber

3.5

Apex height of the prism (world units)

baseWidthOptionalnumber

5.5

Total base width across X/Z (world units).

animationTypeOptional'rotate' | 'hover' | '3drotate'

'rotate'

Animation mode: shader wobble, pointer hover tilt, or full 3D rotation.

glowOptionalnumber

1

Glow/bleed intensity multiplier.

offsetOptional{ x?: number, y?: number }

{ x: 0, y: 0 }

Pixel offset within the canvas (x→right, y→down).

noiseOptionalnumber

0

Film-grain noise amount added to final color (0 disables).

transparentOptionalboolean

true

Whether the canvas has an alpha channel (transparent background).

scaleOptionalnumber

3.6

Overall screen-space scale of the prism (bigger = larger).

hueShiftOptionalnumber

0

Hue rotation (radians) applied to final color.

colorFrequencyOptionalnumber

1

Frequency of internal sine bands controlling color variation.

hoverStrengthOptionalnumber

2

Sensitivity of hover tilt (pitch/yaw amplitude).

inertiaOptionalnumber

0.05

Easing factor for hover (0..1, higher = snappier).

bloomOptionalnumber

1

Extra bloom factor layered on top of glow.

suspendWhenOffscreenOptionalboolean

true

Pause rendering when the element is not in the viewport.

timeScaleOptionalnumber

0.5

Global time multiplier for animations (0=frozen, 1=normal).

Example:

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

Effect Preview

pixel-blast

Install dependencies

pnpm
pnpm add three postprocessing

Usage

---
pageLayout: home
home: true
config:
 -
    type: hero
    full: true
    effect: pixel-blast
---

Configuration

variantOptional'square' | 'circle' | 'triangle' | 'diamond'

'square'

Pixel shape variant

pixelSizeOptionalnumber

4

Base pixel size (auto scaled for DPI).

colorOptionalstring

'#5086a1'

Pixel color.

antialiasOptionalboolean

true

Enable antialiasing.

patternScaleOptionalnumber

2

Noise/pattern scale.

patternDensityOptionalnumber

1

Pattern density adjustment.

liquidOptionalboolean

false

Enable liquid distortion effect.

liquidStrengthOptionalnumber

0.1

Liquid distortion strength.

liquidRadiusOptionalnumber

1

Liquid touch brush radius scale.

liquidWobbleSpeedOptionalnumber

4.5

Liquid wobble frequency.

pixelSizeJitterOptionalnumber

0

Random jitter applied to coverage.

enableRipplesOptionalboolean

true

Enable click ripple waves.

rippleIntensityScaleOptionalnumber

1

Ripple intensity multiplier.

rippleThicknessOptionalnumber

0.1

Ripple ring thickness.

rippleSpeedOptionalnumber

0.3

Ripple propagation speed.

autoPauseOffscreenOptionalboolean

true

Enable auto-pausing when offscreen.

speedOptionalnumber

0.5

Animation time scale.

transparentOptionalboolean

true

Transparent background.

edgeFadeOptionalnumber

0.5

Edge fade distance (0-1).

noiseAmountOptionalnumber

0

Post noise amount.

classNameOptionalstring

Container class name

styleOptionalCSSProperties

Container style

backgroundImageOptionalstring

Background image URL

Example：

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

Effect Preview

hyper-speed

Install dependencies

pnpm
pnpm add three postprocessing

Usage

---
pageLayout: home
home: true
config:
 -
    type: hero
    full: true
    effect: hyper-speed
---

Configuration

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 does not provide detailed configuration instructions; please use with caution.

You can use the following preset configuration, directly copy it into your markdown file:

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

Effect Preview

liquid-ether

Install dependencies

pnpm
pnpm add three

Usage

---
pageLayout: home
home: true
config:
 -
    type: hero
    full: true
    effect: liquid-ether
---

Configuration

mouseForceOptionalnumber

20

Strength multiplier applied to mouse / touch movement when injecting velocity.

cursorSizeOptionalnumber

100

Radius (in pixels at base resolution) of the force brush.

isViscousOptionalboolean

false

Toggle iterative viscosity solve (smoother, thicker motion when enabled).

viscousOptionalnumber

30

Viscosity coefficient used when isViscous is true.

iterationsViscousOptionalnumber

32

Number of Gauss-Seidel iterations for viscosity (higher = smoother, slower).

iterationsPoissonOptionalnumber

32

Number of pressure Poisson iterations to enforce incompressibility.

dtOptionalnumber

0.014

Fixed simulation timestep used inside the advection / diffusion passes.

BFECCOptionalboolean

true

Enable BFECC advection (error-compensated) for crisper flow; disable for slight performance gain.

resolutionOptionalnumber

0.5

Simulation texture scale relative to canvas size (lower = better performance, more blur).

isBounceOptionalboolean

false

If true, shows bounce boundaries (velocity clamped at edges).

colorsOptionalstring[]

['#5227FF', '#FF9FFC', '#B19EEF']

Array of hex color stops used to build the velocity-to-color palette.

autoDemoOptionalboolean

true

Enable idle auto-driving of the pointer when no user interaction.

autoSpeedOptionalnumber

0.5

Speed (normalized units/sec) for auto pointer motion.

autoIntensityOptionalnumber

2.2

Multiplier applied to velocity delta while in auto mode.

takeoverDurationOptionalnumber

2.5

Seconds to interpolate from auto pointer to real cursor when user moves mouse.

autoResumeDelayOptionalnumber

1000

Milliseconds of inactivity before auto mode resumes.

autoRampDurationOptionalnumber

0.6

Seconds to ramp auto movement speed from 0 to full after activation.

classNameOptionalstring

Custom class name to apply to the container element

styleOptionalCSSProperties

Custom inline styles to apply to the container element

Example：

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

Effect Preview

dot-grid

Install dependencies

pnpm
pnpm add three gsap

Usage

---
pageLayout: home
home: true
config:
 -
    type: hero
    full: true
    effect: dot-grid
---

Configuration

dotSizeOptionalnumber

5

Size of each dot in pixels.

gapOptionalnumber

15

Gap between each dot in pixels.

baseColorOptionalstring

'#ebebf5'

Base color of the dots.

activeColorOptionalstring

'#8cccd5'

Color of dots when hovered or activated.

proximityOptionalnumber

120

Radius around the mouse pointer within which dots react.

speedTriggerOptionalnumber

100

Mouse speed threshold to trigger inertia effect.

shockRadiusOptionalnumber

250

Radius of the shockwave effect on click.

shockStrengthOptionalnumber

5

Strength of the shockwave effect on click.

maxSpeedOptionalnumber

5000

Maximum speed for inertia calculation.

resistanceOptionalnumber

750

Resistance for the inertia effect.

returnDurationOptionalnumber

1.5

Duration for dots to return to their original position after inertia.

classNameOptionalstring

CSS class names applied to the container.

styleOptionalCSSProperties

Inline styles applied to the container.

Example:

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

Effect Preview

iridescence

Install dependencies

pnpm
pnpm add ogl

Usage

---
pageLayout: home
home: true
config:
 -
    type: hero
    full: true
    effect: iridescence
---

Configuration

colorOptionalreadonly [number, number, number]

[1, 1, 1]

Base color as an array of RGB values (each between 0 and 1).

speedOptionalnumber

1

Speed multiplier for the animation.

amplitudeOptionalnumber

0.1

Amplitude for the mouse-driven effect.

mouseReactOptionalboolean

true

Enable or disable mouse interaction with the shader.

Example:

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

Effect Preview

orb

Install dependencies

pnpm
pnpm add ogl

Usage

---
pageLayout: home
home: true
config:
 -
    type: hero
    full: true
    effect: orb
---

Configuration

hueOptionalnumber

0

The base hue for the orb (in degrees).

hoverIntensityOptionalnumber

0.2

Controls the intensity of the hover distortion effect.

rotateOnHoverOptionalboolean

true

Toggle to enable or disable continuous rotation on hover.

forceHoverStateOptionalboolean

false

Force hover animations even when the orb is not actually hovered.

classNameOptionalstring

Additional CSS classes for the component.

Example:

---
pageLayout: home
home: true
config:
 -
    type: hero
    full: true
    effect: orb
    effectConfig:
      hue: 0
      hoverIntensity: 0.2
      rotateOnHover: true
      forceHoverState: false
---

beams

Effect Preview

beams

Install dependencies

pnpm
pnpm add three

Usage

---
pageLayout: home
home: true
config:
 -
    type: hero
    full: true
    effect: beams
---

Configuration

beamWidthOptionalnumber

2

Width of each beam.

beamHeightOptionalnumber

15

Height of each beam.

beamNumberOptionalnumber

12

Number of beams to display.

lightColorOptionalstring

#fff

Color of the directional light.

speedOptionalnumber

2

Speed of the animation.

noiseIntensityOptionalnumber

1.75

Intensity of the noise effect overlay.

scaleOptionalnumber

0.2

Scale of the noise pattern.

rotationOptionalnumber

0

Rotation of the entire beams system in degrees.

Example:

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

Effect Preview

lightning

Usage

---
pageLayout: home
home: true
config:
 -
    type: hero
    full: true
    effect: lightning
---

Configuration

hueOptionalnumber

255

Hue of the lightning in degrees (0 to 360).

xOffsetOptionalnumber

0

Horizontal offset of the lightning in normalized units.

speedOptionalnumber

1

Animation speed multiplier for the lightning.

intensityOptionalnumber

1

Brightness multiplier for the lightning.

sizeOptionalnumber

1

Scale factor for the bolt size.

Example:

---
pageLayout: home
home: true
config:
 -
    type: hero
    full: true
    effect: lightning
    effectConfig:
      hue: 255
      xOffset: 0
      speed: 1
      intensity: 1
      size: 1
---

Contributors

pengzhanbo

Changelog

10/25/25, 3:55 AM
View All Changelog
  • aa616-feat(theme): add home hero effects (#738)on