Ink Diffusion Background Effect

The inkpaper theme includes 6 built-in ink diffusion background animations. All effects slowly spread outward and gradually fade to transparent. Ink drop centers only appear in the page margins (outside the content area), ensuring readability is not affected.

Available Effects

Effect 1inkDrop

Ink Drop Seepage

Ink drops slowly seep outward from the center with irregular fibrous edges. Low frequency, calm and serene.

Effect 2fiberBleed

Rice Paper Fiber Bleed

Light ink base with irregular fiber tendrils extending outward from edges, simulating ink absorbed along paper fibers.

Effect 3splash

Ink Splash

Main ink blob and surrounding fine splatter dots appear simultaneously, then slowly spread and fade. Overlapping areas merge without color stacking.

Effect 4waterCloud

Ink-in-Water Diffusion

Light ink clouds slowly expand, like ink dropped into clear water. Low frequency, misty and ethereal.

Effect 5bleedEdge

Ink Bleed

Ink edges smoothly and slowly push outward, with density decreasing evenly. Soft natural edges.

Effect 6layeredInk

Layered Ink

Multiple thin ink layers spread in succession, each fading after expansion, briefly forming depth before dissipating.

Configuration

VitePress

Configure in .vitepress/config.mts:

export default defineConfig({
  themeConfig: {
    inkEffect: 'bleedEdge',       // Effect name; omit or set to '' to disable
    inkEffectOpacity: 0.5         // Optional, overall opacity multiplier, default 1
  }
})

Astro

Configure in astro.config.mjs:

export default defineConfig({
  integrations: [
    inkpaper({
      inkEffect: 'bleedEdge',     // Effect name; omit or set to '' to disable
      inkEffectOpacity: 0.5       // Optional, overall opacity multiplier, default 1
    })
  ]
})

Available values: inkDrop | fiberBleed | splash | waterCloud | bleedEdge | layeredInk

Set to empty string or omit to disable. Disabled by default.