vuepress-plugin-moefy-canvas

:tada: Decorate your web pages with lovely canvas animations.用可可爱爱的 canvas 动效装饰你的网页.

Usage

• Install

# npm
npm install @vuepress-denaro/vuepress-plugin-moefy-canvas

# yarn
yarn add @vuepress-denaro/vuepress-plugin-moefy-canvas

• Update plugins in .vuepress/config.js or .vuepress/config.ts

js

const {
  moefyCanvasPlugin,
  MoefyCanvasTheme,
} = require('@vuepress-denaro/vuepress-plugin-moefy-canvas')
module.exports = {
  plugins: [
    moefyCanvasPlugin({
      theme: MoefyCanvasTheme.Sparkler,
      themeConfig: {},
      canvasOptions: {},
    }),
  ],
}

ts

import {
  moefyCanvasPlugin,
  MoefyCanvasTheme,
} from '@vuepress-denaro/vuepress-plugin-moefy-canvas'
import { defineUserConfig } from '@vuepress/cli'

export default defineUserConfig({
  plugins: [
    moefyCanvasPlugin({
      theme: MoefyCanvasTheme.Sparkler,
      themeConfig: {},
      canvasOptions: {},
    }),
  ],
})

Configurations

theme

• type: string
• default: MoefyCanvasTheme.Sparkler

canvas theme configuration.

export enum MoefyCanvasTheme {
  Sparkler = 'sparkler',
  Popper = 'popper',
  Ribbon = 'ribbon',
  Sakura = 'sakura',
  Meteor = 'meteor',
}

themeConfig

• type: object

Sparkler

• default:

{
  mode: SparklerMode.TRAIL,
}

export enum SparklerMode {
  FOLLOW = 'follow',
  TRAIL = 'trail',
}

export interface SparklerConfig extends ThemeConfig {
  mode?: SparklerMode
  numParticles?: number
  sparkleFactor?: number
  particleDurationRange?: [number, number]
  particleDistanceRange?: [number, number]
  particleSizeRange?: [number, number]
}

Popper

• default:

{
  shape: PopperShape.Star,
  size: 1.75,
  numParticles: 10
}

export enum PopperShape {
  Star = 'star',
  Circle = 'circle',
}

export interface PopperConfig extends ThemeConfig {
  shape?: PopperShape
  size?: number
  numParticles?: number
}

Ribbon

• default:

{
  size: 90,
}

export interface RibbonConfig extends ThemeConfig {
  size?: number
}

Sakura

• default:

{
  size: 30,
}

export interface SakuraConfig extends ThemeConfig {
  numPatels?: number
}

Meteor

• default:

{
  numParticles: null,
  particleColor: {
    light: 'rgba(102, 175, 239, .2)',
    dark: 'rgba(245, 236, 66, .2)',
  },
}

export interface ColorTheme {
  light: string
  dark: string
}

export interface MeteorConfig extends ThemeConfig {
  numParticles?: number | null
  particleColor?: string | ColorTheme
}

classOptions

• type: object

• default:

{
  opacity: 1,
  zIndex: 0
}

Thanks

moefy-canvas