@shabon/fx

Beautiful background effects for React. Three lines of code. Free and open source.

Setup

npm install @shabon/fx three @react-three/fiber

Usage

import { ParticleField } from '@shabon/fx'

export default function App() {
  return <ParticleField color="#6C63FF" density={800} speed={0.6} mouseFollow={true} />
}

Each effect renders as a full-screen background. Drop it into any component.

Effects (23 total)

ParticleField, NoiseGradient, AuroraWaves, LiquidMetalBlob, GlitchDistortion, PlasmaWave, FireFlame, NeonGrid, WaterCaustics, FluidSimulation, VoronoiPattern, MatrixRain, CircuitBoard, GalaxySpiral, CrystalOrb, MorphingShapes, EventHorizon, ShootingStars, Fireworks, CloudVolume, TerrainFlyover, NeuralNetwork, DNAHelix, LivingShabon

Common Props

All effects accept:

| Prop | Type | Description | |:---|:---|:---| | className | string | CSS class for the container | | style | CSSProperties | Inline styles for the container | | backgroundColor | string | Background color (default: "#000000") |

Performance Notes

GPU-accelerated GLSL shaders via WebGL. Desktop and iOS run great. Mid-range Android and above recommended.

Requirements

• React >= 18
• Three.js >= 0.170
• @react-three/fiber >= 8

License

MIT — https://github.com/wrennly/shabon-fx

@wrennly_dev — Updates