@bg-effects/fireworks 1.0.1

package/README.md

@@ -0,0 +1,270 @@
+# @bg-effects/fireworks
+
+🎆 Beautiful, GPU-accelerated fireworks background effect for Vue 3.
+
+![Fireworks Effect](https://img.shields.io/badge/type-effect-blue) ![Vue 3](https://img.shields.io/badge/vue-3.x-brightgreen) ![WebGL](https://img.shields.io/badge/WebGL-2.0-orange)
+
+## ✨ Features
+
+- 🚀 **High Performance** - WebGL-based canvas rendering, GPU accelerated
+- 🎨 **Highly Customizable** - 20+ configuration options across 4 categories
+- 🎭 **Multiple Shapes** - 18 predefined shapes (heart, star, butterfly, spiral, etc.)
+- 🌈 **Color Modes** - Single color or multi-color randomly generated
+- 🎯 **Launch Modes** - 6 launch patterns (random, burst, wave, tide, etc.)
+- 🔧 **Debug Panel** - Built-in configuration panel with live preview
+- 🌍 **i18n Support** - Dual-language (Chinese/English) interface
+- 📦 **3 Built-in Presets** - Ready-to-use configurations
+
+## 📦 Installation
+
+```bash
+# pnpm
+pnpm add @bg-effects/fireworks
+
+# npm
+npm install @bg-effects/fireworks
+
+# yarn
+yarn add @bg-effects/fireworks
+```
+
+## 🚀 Quick Start
+
+### Basic Usage
+
+```vue
+<script setup>
+import { Fireworks } from '@bg-effects/fireworks'
+</script>
+
+<template>
+  <div class="container">
+    <Fireworks />
+  </div>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+}
+</style>
+```
+
+### With Debug Panel
+
+```vue
+<template>
+  <Fireworks debug lang="en" />
+</template>
+```
+
+### Custom Configuration
+
+```vue
+<script setup>
+import { Fireworks } from '@bg-effects/fireworks'
+
+const config = {
+  fireworkCount: 30,
+  speed: 1.5,
+  size: 2.5,
+  shape: 'heart',
+  colorMode: 'multi',
+  launchMode: 'burst',
+  gravity: 0.8
+}
+</script>
+
+<template>
+  <Fireworks v-bind="config" />
+</template>
+```
+
+## 📖 API Reference
+
+### Props
+
+#### General Settings
+
+| Prop | Type | Default | Range | Description |
+|------|------|---------|-------|-------------|
+| `fireworkCount` | `number` | `20` | 1-100 | Number of fireworks particles |
+| `density` | `number` | `1.0` | 0.5-3.0 | Particle density |
+| `clusterSize` | `number` | `5.0` | 1-10 | Cluster size for simultaneous mode |
+| `gravity` | `number` | `1.0` | 0-2.0 | Gravity strength |
+
+#### Shape Settings
+
+| Prop | Type | Default | Options | Description |
+|------|------|---------|---------|-------------|
+| `shape` | `string` | `'normal'` | See below | Firework shape pattern |
+| `rotation` | `number` | `0` | 0-360 | Static rotation angle |
+| `rotationJitter` | `number` | `0.2` | 0-1 | Random rotation variance |
+
+**Available Shapes:**
+`normal`, `circular`, `heart`, `star`, `butterfly`, `spiral`, `ring`, `doubleRing`, `atom`, `trefoil`, `clover`, `cross`, `saturn`, `hexagram`, `astroid`, `gear`, `fermat`, `folium`
+
+#### Launch Settings
+
+| Prop | Type | Default | Options | Description |
+|------|------|---------|---------|-------------|
+| `launchMode` | `string` | `'random'` | See below | Launch pattern |
+| `launchInterval` | `number` | `5.0` | 0.5-10 | Time between launches |
+
+**Launch Modes:**
+- `random` - Random launch timing
+- `burst` - Rapid bursts
+- `wave` - Wave pattern
+- `tide` - Tide-like rhythm
+- `simultaneous` - All at once
+- `pendulum` - Swinging pattern
+
+#### Visual Effects
+
+| Prop | Type | Default | Range | Description |
+|------|------|---------|-------|-------------|
+| `speed` | `number` | `1.0` | 0.5-2.0 | Animation speed multiplier |
+| `size` | `number` | `2.0` | 0.5-5.0 | Particle size |
+| `flashIntensity` | `number` | `1.0` | 0-3.0 | Launch flash intensity |
+| `flashOpacity` | `number` | `0.3` | 0-1.0 | Flash opacity |
+| `colorMode` | `string` | `'multi'` | `single`, `multi` | Color selection mode |
+| `color` | `string` | `'#ffffff'` | hex | Color for single mode |
+
+#### System Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `debug` | `boolean` | `false` | Enable debug panel |
+| `lang` | `string` | `'zh-CN'` | Debug panel language (`'zh-CN'` or `'en'`) |
+| `className` | `string` | - | Custom CSS class |
+
+## 🎨 Presets
+
+Three beautiful built-in presets are included:
+
+### Midnight Bloom (午夜盛放)
+```vue
+<Fireworks 
+  :fireworkCount="30" 
+  :speed="1.2" 
+  :size="1.2" 
+  :launchInterval="3.0" 
+  colorMode="multi" 
+  shape="circular" 
+/>
+```
+
+### Golden Rain (金色雨露)
+```vue
+<Fireworks 
+  :fireworkCount="25" 
+  :speed="0.8" 
+  :size="1.5" 
+  :launchInterval="4.0" 
+  colorMode="single" 
+  color="#ffcc00" 
+  shape="normal" 
+  :gravity="0.5" 
+/>
+```
+
+### Rapid Sequence (连环发射)
+```vue
+<Fireworks 
+  :fireworkCount="15" 
+  :speed="1.5" 
+  :size="1.8" 
+  :launchInterval="1.0" 
+  shape="random" 
+  launchMode="random" 
+  colorMode="multi" 
+  :density="2.0" 
+/>
+```
+
+## 🎯 Usage Tips
+
+### Performance Optimization
+
+```vue
+<!-- Reduce particle count for mobile devices -->
+<Fireworks :fireworkCount="10" :density="0.5" />
+```
+
+### Responsive Design
+
+```vue
+<template>
+  <div class="fireworks-wrapper">
+    <Fireworks v-bind="responsiveConfig" />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Fireworks } from '@bg-effects/fireworks'
+
+const isMobile = computed(() => window.innerWidth < 768)
+
+const responsiveConfig = computed(() => ({
+  fireworkCount: isMobile.value ? 10 : 30,
+  size: isMobile.value ? 1.5 : 2.5
+}))
+</script>
+```
+
+### Event-Triggered Effects
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { Fireworks } from '@bg-effects/fireworks'
+
+const launchMode = ref('random')
+
+function celebrate() {
+  launchMode.value = 'burst'
+  setTimeout(() => {
+    launchMode.value = 'random'
+  }, 3000)
+}
+</script>
+
+<template>
+  <Fireworks :launchMode="launchMode" />
+  <button @click="celebrate">Celebrate! 🎉</button>
+</template>
+```
+
+## 🔧 Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build the package
+pnpm -F @bg-effects/fireworks build
+
+# Watch mode
+pnpm -F @bg-effects/fireworks dev
+```
+
+## 📄 License
+
+MIT License
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 🔗 Links
+
+- [Documentation](../../apps/docs/docs/effects/fireworks.md)
+- [Playground Demo](../../apps/playground)
+- [GitHub Repository](https://github.com/yourusername/bg-effects)
+
+---
+
+Made with ❤️ using Vue 3 + WebGL

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@bg-effects/fireworks",
+  "version": "1.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "ogl": "^1.0.0",
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "ogl": "^1.0.11",
+    "unocss": "^65.4.0",
+    "vite": "^5.0.0",
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vite-plugin-dts": "^4.5.1",
+    "@bg-effects/configs": "1.0.0",
+    "@bg-effects/shared": "1.0.0",
+    "@bg-effects/core": "1.0.0"
+  },
+  "dependencies": {
+    "@bg-effects/debug-ui": "1.0.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch"
+  }
+}