Particle Background

Animated canvas background with floating text, emojis, or images connected by lines. Supports arrows and mouse interaction.

Import

import { ParticleBackground } from "@igorao79/uivix";

Playground

Move your mouse over the canvas

Preset

Connection Distance180px

Mouse Distance200px

Speed1x

Usage

{/* Text labels */}
<ParticleBackground
  items={["React", "Next.js", "Tailwind", "TypeScript"]}
  connectionDistance={180}
  arrows
/>

{/* Emojis */}
<ParticleBackground
  items={["⭐", "🚀", "🔥", "⚡"]}
  color={[180, 130, 80]}
/>

{/* Mixed with images */}
<ParticleBackground
  items={[
    "PNG",
    { content: "🖼️", type: "emoji" },
    { content: "/logo.png", type: "image" },
  ]}
  arrows
/>

Props

Prop	Type	Default	Description
items	(string \| ParticleNode)[]	-	Array of text, emoji, or image items (required)
count	number	auto	Max number of particles (auto-scales with screen)
connectionDistance	number	180	Max distance for connection lines (px)
arrows	boolean	false	Show arrowheads on connection lines
mouseDistance	number	200	Mouse interaction distance (px)
color	[r, g, b]	[110, 120, 220]	Base color for text and lines
speed	number	1	Movement speed multiplier
fontSize	[min, max]	[13, 18]	Font size range in px
imageSize	number	28	Size of image particles in px
lineWidth	number	0.6	Connection line width
maxOpacity	number	0.25	Maximum particle opacity
className	string	fixed inset-0 ...	CSS class for the canvas

ParticleNode

Prop	Type	Default	Description
content	string	-	Text, emoji, or image URL
type	"text" \| "emoji" \| "image"	"text"	Content type (auto-detected for strings)