@moefy-canvas/theme-sparkler

🎇 就是现在鼠标周围的粒子效果啦～

Install

pnpm add @moefy-canvas/theme-sparkler

Usage

<canvas id="moefy-canvas"></canvas>

import {
   Sparkler,
   SparklerMode,
   type SparklerConfig,
   type CanvasOptions,
   MAX_Z_INDEX,
} from '@moefy-canvas/theme-sparkler'

const themeConfig: SparklerConfig = {
   mode: SparklerMode.TRAIL,
}

const canvasOptions: CanvasOptions = {
   opacity: 1,
   zIndex: MAX_Z_INDEX,
}

const el = document.getElementById('moefy-canvas')
const sparkler = new Sparkler(themeConfig, canvasOptions)
sparkler.mount(el as HTMLCanvasElement)

ThemeConfig

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