@bg-effects/iridescence

English | 简体中文

A mesmerizing iridescent background effect that creates flowing, color-shifting patterns with WebGL.

Features

• 🌈 Dynamic Iridescence: Real-time color-shifting patterns with adjustable intensity
• ⚡ Performance Optimized: Efficient WebGL shaders for smooth 60fps animation
• 🎛️ Interactive Controls: Real-time parameter adjustment via debug panel
• 🌍 Multi-language Support: Built-in Chinese and English localization
• 📦 Easy Integration: Simple Vue component with minimal configuration

Installation

pnpm add @bg-effects/iridescence ogl

Note: ogl is a peer dependency and needs to be installed manually.

Quick Start

<script setup>
import { Iridescence } from '@bg-effects/iridescence'
</script>

<template>
  <div style="width: 100vw; height: 100vh;">
    <Iridescence 
      color="#ffffff"
      :speed="1.0"
      :scale="1.0"
      :iridescence="1.0"
      :grain="0.05"
    />
  </div>
</template>

API Reference

Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | color | string | '#ffffff' | Base color for the effect (hex string) | | speed | number | 1.0 | Animation speed (0.1 - 5.0) | | scale | number | 1.0 | Pattern scale (0.5 - 3.0) | | iridescence | number | 1.0 | Iridescence intensity (0.0 - 2.0) | | grain | number | 0.05 | Noise grain amount (0.0 - 0.2) | | debug | boolean | false | Enable debug panel | | lang | 'zh-CN' \| 'en' | 'zh-CN' | UI language |

Presets

The component includes several built-in presets:

• Default: Balanced settings for general use
• Energetic: High-speed, vibrant patterns
• Calm: Slow, peaceful animations

Local Development

# Install dependencies
pnpm install

# Build the package
pnpm build

# Type checking
pnpm typecheck

License

MIT