@bg-effects/star-trails

English | 简体中文

A Vue-based star trails background effect component with both path and persistence rendering modes, plus a built-in debug panel.

Live Demo

Features

• Core capability: Includes the StarTrails component and StarTrailsEngine renderer for dense star-trail animations.
• Rendering modes: Supports both path and persistence modes, with optional long-exposure effects.
• Interactivity: Supports fixed center or mouse-follow center, plus randomization and real-time debug tuning.
• Color system: Supports single-color mode and multi-palette mode (classic / rainbow / ocean / fire).

Installation

pnpm add @bg-effects/star-trails

Main API

• Component export: StarTrails (also the default export).
• Debug panel: ConfigPanel.
• Metadata: meta (contains default config, presets, and randomization logic).
• Type exports: StarTrailsConfig and related union types.

Usage Example

<script setup lang="ts">
import { StarTrails } from '@bg-effects/star-trails'
</script>

<template>
  <div style="width: 100vw; height: 100vh; background: #000;">
    <StarTrails
      :density="1.2"
      render-mode="path"
      trail-type="radial"
      color-mode="multi"
      color-palette="rainbow"
      :debug="true"
      lang="zh-CN"
    />
  </div>
</template>

Local Development

pnpm install
pnpm dev

License

MIT