@bg-effects/mobius

A high-performance 3D Möbius strip background effect built with OGL and Vue.

English | 简体中文

Live Demo

Functional Modules

• Core rendering engine with a single-sided Möbius strip mesh and animated warp deformation.
• Particle flow module with forward/reverse/bidirectional motion and trail control.
• Lighting and wireframe module with ambient intensity and glow tuning.
• Preset and randomization module with five scene presets plus tab-scoped random generation.
• Debug module powered by @bg-effects/debug-ui for real-time interactive parameter editing.

Installation

pnpm add @bg-effects/mobius ogl

ogl is a peer dependency and should be installed in the host app.

Main API

• Mobius: Vue component export for rendering the effect.
• meta: Effect metadata including defaultConfig, presets, and randomize.
• MobiusProps: Type definition for all supported component props.

Prop	Type	Default
debug	boolean	false
lang	'zh-CN' | 'en'	'zh-CN'
rotationSpeed	number	0.3
particleSpeed	number	1.0
radius	number	4
width	number	0.8
particleCount	number	800
flowPattern	'forward' | 'reverse' | 'bidirectional'	'forward'
wireframe	boolean	true
quality	number	1.0

Usage Example

<script setup>
import { Mobius } from '@bg-effects/mobius'
</script>

<template>
  <Mobius
    debug
    lang="en"
    :rotation-speed="0.3"
    :particle-speed="1.0"
    :particle-count="1200"
    flow-pattern="bidirectional"
    :wireframe-glow="1.4"
    color1="#00ffff"
    color2="#ff00ff"
    particle-color="#ffffff"
  />
</template>

Local Development

pnpm install
pnpm dev

License

MIT