Particles

import { Particles } from '@hanzo/ui'

export function Default() {
  return (
    <YStack
      position="relative"
      width="100%"
      height={320}
      rounded="$4"
      overflow="hidden"
      bg="black"
      items="center"
      justify="center"
    >
      <Particles />
      <Text color="white" fontSize="$5">
        Particles
      </Text>
    </YStack>
  )
}

export function DenseWarm() {
  return (
    <YStack position="relative" width="100%" height={320} rounded="$4" overflow="hidden" bg="black">
      <Particles
        particleCount={120}
        particleSize={3}
        particleColor="rgba(255, 191, 90, 0.8)"
        lineColor="rgba(255, 191, 90, 0.25)"
        connectionDistance={140}
      />
    </YStack>
  )
}

export function Still() {
  return (
    <YStack position="relative" width="100%" height={240} rounded="$4" overflow="hidden" bg="$color2">
      <Particles
        particleCount={40}
        speed={0}
        enableMouseInteraction={false}
        particleColor="rgba(0, 0, 0, 0.35)"
        lineColor="rgba(0, 0, 0, 0.12)"
      />
    </YStack>
  )
}

export function BehindContent() {
  return (
    <YStack position="relative" width="100%" height={320} rounded="$4" overflow="hidden" bg="black">
      <Particles particleColor="rgba(120, 170, 255, 0.7)" lineColor="rgba(120, 170, 255, 0.2)" />
      <YStack
        position="absolute"
        inset={0}
        items="center"
        justify="center"
      >
        <YStack bg="$color1" rounded="$3" px="$4" py="$3">
          <Text fontSize="$4">Content stays clickable on top</Text>
        </YStack>
      </YStack>
    </YStack>
  )
}

Types

export type ParticlesProps = {
  /** CSS class names for the canvas frame. Since the frame is a raw `<canvas>`,
   *  not a gui component, this is forwarded as-is rather than through `sx`. */
  className?: string
  /** How many dots drift across the field. */
  particleCount?: number
  /** Fill of each dot, any CSS colour. */
  particleColor?: string
  /** Stroke of the lines drawn between near dots, any CSS colour. */
  lineColor?: string
  /** Upper bound of a dot's random radius, in px. */
  particleSize?: number
  /** Top speed of a dot's drift, in px per frame. */
  speed?: number
  /** Distance, in px, within which two dots are joined by a line. */
  connectionDistance?: number
  /** Overall alpha applied to dots and lines alike. */
  opacity?: number
  /** Whether nearby dots are pushed away from the pointer. */
  enableMouseInteraction?: boolean
  /** Radius, in px, within which the pointer pushes dots away. */
  mouseRadius?: number
}

Exports