@moefy-canvas/theme-ribbon

:reminder_ribbon: 背景的彩带效果～

Install

pnpm add @moefy-canvas/theme-ribbon

Usage

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

import {
   Ribbon,
   type RibbonConfig,
   type CanvasOptions,
   MAX_Z_INDEX,
} from '@moefy-canvas/theme-ribbon'

const themeConfig: RibbonConfig = {
   size: 90,
}

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

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

ThemeConfig

export interface RibbonConfig extends ThemeConfig {
   size?: number
}