@bg-effects/prism

English | 简体中文

A high-performance prism background effect built with OGL and Vue.

Live Demo

Features

• 🚀 High Performance: Built with OGL (a lightweight WebGL library) for smooth rendering.
• 🎨 Highly Customizable: Supports geometric parameters, animation modes, glow/noise/bloom, and motion controls.
• 🛠️ Debug Mode: Built-in visual debug panel for real-time adjustments.
• 📦 Ready to Use: Easy-to-use Vue component with simple configuration.

Installation

pnpm add @bg-effects/prism ogl

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

Usage

<script setup>
import { Prism } from '@bg-effects/prism'
</script>

<template>
  <div style="width: 100vw; height: 100vh; background: #000;">
    <Prism
      :height="3.5"
      :base-width="5.5"
      animation-type="rotate"
      :glow="1"
      :scale="3.6"
      :time-scale="0.5"
    />
  </div>
</template>

Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | height | number | 3.5 | Prism height | | base-width | number | 5.5 | Prism base width | | animation-type | 'rotate' \| 'hover' \| '3drotate' | 'rotate' | Animation mode | | glow | number | 1 | Glow intensity | | noise | number | 0.05 | Noise amount | | scale | number | 3.6 | Overall scale | | hue-shift | number | 0 | Hue shift in degrees | | color-frequency | number | 1 | Color oscillation frequency | | hover-strength | number | 2 | Hover response strength | | inertia | number | 0.05 | Hover interpolation inertia | | bloom | number | 1 | Bloom strength | | time-scale | number | 0.5 | Animation time scale | | offset-x | number | 0 | Horizontal offset in pixels | | offset-y | number | 0 | Vertical offset in pixels | | transparent | boolean | true | Render with transparent canvas | | suspend-when-offscreen | boolean | false | Pause rendering when offscreen | | 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

License

MIT