@bg-effects/singularity

English | 简体中文

Singularity Effect - A high-performance singularity background effect built with OGL and Vue.

Live Demo

---

Features

• 🚀 High Performance: Built on OGL (a lightweight WebGL library), ensuring a smooth visual experience.
• 🎨 Highly Customizable: Supports various parameters like hue, speed, brightness, position, distortion, accretion size, black hole mass, and vortex detail.
• 🛠️ Built-in Debug Panel: Intuitive debugging interface for real-time parameter adjustment and configuration randomization.
• 📦 Easy Integration: Simple Vue components with support for on-demand imports.

Installation

pnpm add @bg-effects/singularity ogl

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

API

Props

Property	Type	Default	Description
hue	number	0	Hue adjustment (0-360)
speed	number	1.0	Animation speed
brightness	number	1.0	Brightness level
positionX	number	0.5	Center X coordinate (0-1)
positionY	number	0.5	Center Y coordinate (0-1)
distortion	number	0.0	Spatial distortion level
accretionSize	number	1.2	Accretion disk size
blackHoleMass	number	1.0	Black hole mass / Gravity strength
vortexDetail	number	5	Vortex detail complexity
pulseFrequency	number	1.0	Pulse frequency
rotationSpeed	number	1.0	Rotation speed
colorScheme	'classic' | 'mono' | 'duo' | 'rainbow'	'classic'	Color scheme selection
secondaryColor	string	'#00ffff'	Secondary color (HEX)
quantumParticles	number	0	Number of quantum particles
debug	boolean	false	Enable/disable debug panel
lang	'zh-CN' | 'en'	'zh-CN'	UI language

Usage

<script setup>
import { Singularity } from "@bg-effects/singularity";
</script>

<template>
  <div style="width: 100vw; height: 100vh; background: #000;">
    <Singularity :speed="1.2" :black-hole-mass="1.5" color-scheme="duo" />
  </div>
</template>

Local Development

# Install dependencies
pnpm install

# Start development server (Playground)
pnpm dev

# Build project
pnpm build

License

MIT