Particles Background

import { ParticlesBackground } from '@hanzo/ui'

Default

A drifting field of white dots joined by fading lines, reacting to the pointer.

Move your pointer over the field

export function Default() {
  return (
    <YStack position="relative" height={320} bg="black" overflow="hidden">
      <ParticlesBackground />
      <YStack position="relative" items="center" justify="center" height="100%">
        <Text color="white">Move your pointer over the field</Text>
      </YStack>
    </YStack>
  )
}

Custom colours

A blue field at a lower count, tuned for a hero section.

Welcome

export function CustomColors() {
  return (
    <YStack position="relative" height={320} bg="black" overflow="hidden">
      <ParticlesBackground
        particleColor="rgba(59, 130, 246, 0.6)"
        lineColor="rgba(59, 130, 246, 0.2)"
        particleCount={75}
      />
      <YStack position="relative" items="center" justify="center" height="100%">
        <Text color="white" fontSize="$8">
          Welcome
        </Text>
      </YStack>
    </YStack>
  )
}

Dense

A high particle count with a shorter connection distance, for a busier field.

export function Dense() {
  return (
    <YStack position="relative" height={320} bg="black" overflow="hidden">
      <ParticlesBackground particleCount={150} connectionDistance={60} speed={0.3} />
    </YStack>
  )
}

No pointer interaction

A slow, quiet field for behind dashboard content.

export function Static() {
  return (
    <YStack position="relative" height={320} bg="$color2" overflow="hidden">
      <ParticlesBackground
        particleColor="rgba(148, 163, 184, 0.4)"
        lineColor="rgba(148, 163, 184, 0.1)"
        particleCount={30}
        speed={0.3}
        enableMouseInteraction={false}
      />
    </YStack>
  )
}

Types

export type ParticlesBackgroundProps = {
  /** Class notation for the fixed frame. */
  className?: string
  /** Number of particles to render. */
  particleCount?: number
  /** Fill of each particle. */
  particleColor?: string
  /** Stroke of the lines joining nearby particles. */
  lineColor?: string
  /** Maximum radius of a particle, in px. */
  particleSize?: number
  /** Top speed of a particle's drift, in px per frame. */
  speed?: number
  /** Distance below which two particles are joined by a line. */
  connectionDistance?: number
  /** Overall opacity of the effect. */
  opacity?: number
  /** Whether particles are pushed away from the pointer. */
  enableMouseInteraction?: boolean
  /** Radius of the pointer's repulsion, in px. */
  mouseRadius?: number
}

Exports

ParticlesBackgroundtype ParticlesBackgroundProps