@bg-effects/aurora

English | 简体中文

Aurora V2 background effect with interactive glow and shader-driven animation.

Live Demo

Features

• 🌌 Smooth Flow: Aurora flow with starfield background.
• ⚡ High Performance: WebGL-based rendering with resize handling.
• 🎨 Configurable: Adjustable speed, brightness, and colors.
• 🖱️ Interactive: Optional mouse interaction.
• 🛠️ Debug Mode: Built-in visual debug panel for real-time adjustments.

Installation

pnpm add @bg-effects/aurora ogl

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

Usage

<script setup lang="ts">
import { Aurora } from '@bg-effects/aurora'
// Styles are automatically injected by vite-plugin-css-injected-by-js
</script>

<template>
  <div style="width: 100vw; height: 100vh; background: #000;">
    <Aurora
      :speed="1.2"
      :brightness="2.0"
      :interactive="true"
    />
  </div>
</template>

Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | speed | number | 1.0 | Animation speed | | brightness | number | 1.8 | Brightness intensity | | interactive | boolean | true | Enable mouse interaction | | color1 | string | '#7aa2f7' | Primary aurora color | | color2 | string | '#bb9af7' | Secondary aurora color | | debug | boolean | false | Enable debug panel | | lang | 'zh-CN' \| 'en' | 'zh-CN' | UI language |

Local Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build library
pnpm build

License

MIT