Signature / Moleculestable

Particle Field

Ambient floating particle system with CSS-only staggered animations.

@glinui/uiComponent: particle-field

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add particle-field

Usage$

Place ParticleField inside a relative container with overflow-hidden. Particles float upward with deterministic positioning — no layout shift between renders.

Basic$

Particles

TSX

1import { ParticleField } from "@glinui/ui"
2
3export function ParticleFieldDemo() {
4return (
5  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-neutral-950 dark:border-neutral-800">
6    <ParticleField color="rgba(255,255,255,0.6)" />
7    <span className="relative z-10 text-3xl font-bold text-white">Particles</span>
8  </div>
9)
10}

Examples$

Dense Field$

Dense

TSX

1import { ParticleField } from "@glinui/ui"
2
3export function ParticleFieldDenseDemo() {
4return (
5  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-neutral-950 dark:border-neutral-800">
6    <ParticleField count={60} maxSize={4} color="rgba(99,102,241,0.5)" />
7    <span className="relative z-10 text-2xl font-bold text-white">Dense</span>
8  </div>
9)
10}

Square Particles$

Squares

TSX

1import { ParticleField } from "@glinui/ui"
2
3export function ParticleFieldSquareDemo() {
4return (
5  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-neutral-950 dark:border-neutral-800">
6    <ParticleField shape="square" count={20} minSize={3} maxSize={8} color="rgba(244,63,94,0.5)" />
7    <span className="relative z-10 text-2xl font-bold text-white">Squares</span>
8  </div>
9)
10}

Accessibility$

The component renders with aria-hidden — invisible to assistive technologies.
Purely decorative; carries no semantic meaning.

Reduced Motion$

All particle animations are paused via motion-reduce:[animation:none]. The static particles remain visible.

API Reference$

Prop	Type	Required	Default	Description
`color`	`string`	No	`-`	Particle color
`count`	`number`	No	`30`	Number of particles
`distance`	`number`	No	`200`	Float distance in px
`duration`	`number`	No	`5`	Float duration in seconds
`maxSize`	`number`	No	`5`	Max particle size in px
`minSize`	`number`	No	`2`	Min particle size in px
`shape`	`"circle" \| "square"`	No	`"circle"`	Particle shape

Source$

TSX

1import { ParticleField } from "@glinui/ui"

packages/ui/src/components/particle-field.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/particle-field.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

ParticleFieldProps

`ParticleFieldProps`

Prop	Type	Required	Default	Description
`color`	`string`	No	`-`	Particle color
`count`	`number`	No	`30`	Number of particles
`distance`	`number`	No	`200`	Float distance in px
`duration`	`number`	No	`5`	Float duration in seconds
`maxSize`	`number`	No	`5`	Max particle size in px
`minSize`	`number`	No	`2`	Min particle size in px
`shape`	`"circle" \| "square"`	No	`"circle"`	Particle shape