@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