@laxxx-lab/particle-bg

Interactive particle background with Tokyo Night cyberpunk theme. Zero dependencies. Framework-agnostic.

What It Does

Three layered visual effects create an immersive dark cyberpunk background:

1. CSS Gradient — A deep dark gradient (Tokyo Night palette) that covers the entire viewport.
2. Neon Glow Orbs — Three softly blurred, floating radial-gradient orbs in pink, cyan, and purple that drift behind the particles.
3. Interactive Particle Canvas — Canvas-based particles with mouse attraction, connection lines, and friction physics.

Quick Start

npm install @laxxx-lab/particle-bg

import { createParticleBg } from '@laxxx-lab/particle-bg';

const bg = createParticleBg(); // auto-attaches to document.body

// Later…
bg.destroy();

Configuration

import { createParticleBg } from '@laxxx-lab/particle-bg';

const bg = createParticleBg({
  gradientColors: ['#0f172a', '#1e1b4b', '#0f0c29'],
  gradientAngle: 135,
  particleCount: 120,
  particleMinRadius: 0.5,
  particleMaxRadius: 3,
  particleColors: ['#c084fc', '#e879f9', '#22d3ee'],
  particleSpeed: 0.3,
  connectionDistance: 140,
  connectionColor: 'rgba(187,154,247,ALPHA)',
  connectionWidth: 0.5,
  mouseRadius: 250,
  mouseForce: 0.00008,
  friction: 0.998,
});

Options

Option	Type	Default	Description
gradientColors	string[]	Tokyo Night gradient	Array of CSS colors for the background gradient.
gradientAngle	number	135	Angle of the CSS linear gradient in degrees.
orbs	Orb[]	3 default orbs (pink, cyan, purple)	Neon glow orbs config.
particleCount	number	100	Number of particles on the canvas.
particleMinRadius	number	0.5	Minimum particle radius.
particleMaxRadius	number	3	Maximum particle radius.
particleColors	string[]	Tokyo Night palette	Array of particle colors.
particleSpeed	number	0.3	Base speed factor for particle movement.
connectionDistance	number	140	Max pixel distance to draw a connection line between two particles.
connectionColor	string	rgba(187,154,247,ALPHA)	Line color string; ALPHA is replaced with a distance-based opacity.
connectionWidth	number	0.5	Width of connection lines in pixels.
mouseRadius	number	250	Radius within which particles are attracted to the cursor.
mouseForce	number	0.00008	Strength of the mouse attraction force.
friction	number	0.998	Velocity decay per frame (0–1).

Orb Options

interface OrbOptions {
  color: string;    // CSS color
  opacity: number;  // 0–1
  blur: number;     // blur radius in px
  size: string;     // CSS size, e.g. "24rem"
  position: {
    top?: string;
    left?: string;
    right?: string;
    bottom?: string;
  };
}

Framework Examples

Vanilla JS

<script type="module">
  import { createParticleBg } from 'https://unpkg.com/@laxxx-lab/particle-bg';
  createParticleBg();
</script>

React

import { useEffect, useRef } from 'react';
import { ParticleBg } from '@laxxx-lab/particle-bg';

function App() {
  const containerRef = useRef(null);

  useEffect(() => {
    const bg = new ParticleBg(containerRef.current!);
    return () => bg.destroy();
  }, []);

  return <div ref={containerRef} style={{ position: 'relative', minHeight: '100vh' }} />;
}

Or use the bundled hook:

import { useParticleBg } from '@laxxx-lab/particle-bg/react';

function App() {
  const bgRef = useParticleBg({ particleCount: 150 });
  return <div ref={bgRef} style={{ position: 'relative', minHeight: '100vh' }} />;
}

Vue

<template>
  <div ref="bgContainer" style="position: relative; min-height: 100vh;"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { ParticleBg } from '@laxxx-lab/particle-bg';

const bgContainer = ref(null);
let bg = null;

onMounted(() => {
  bg = new ParticleBg(bgContainer.value);
});

onUnmounted(() => {
  bg?.destroy();
});
</script>

Astro

---
// pages/index.astro
---
<layout>
  <div id="bg" style="position: relative; min-height: 100vh;"></div>
</layout>

<script type="module">
  import { ParticleBg } from '@laxxx-lab/particle-bg';
  new ParticleBg(document.getElementById('bg'));
</script>

Tokyo Night Default Palette

Token	Color	Hex
Purple	#c084fc	#c084fc
Pink	#e879f9	#e879f9
Cyan	#22d3ee	#22d3ee
Lavender	#a78bfa	#a78bfa
Hot Pink	#f472b6	#f472b6
Light Cyan	#67e8f9	#67e8f9

License

MIT © LaxXx-Lab