Particle Vortex React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import ParticleVortex from "./ParticleVortex";

export default function Example() {
  return (
    <ParticleVortex
      color={"#bea6d8"}
      background={"#15111d"}
      count={240}
      speed={40}
      minHeight={400}
      children={"Drawn to the centre."}
      style={{
        "fontSize": 34,
        "letterSpacing": "-.05em",
        "color": "#ebdff5"
      }}
    />
  );
}

Using Particle Vortex

Use count to choose the particle density and minHeight to reserve the background area. Foreground content belongs in children.

Keep the centre readable and use a slower speed for sustained viewing. Fewer particles can make the spiral clearer in smaller containers.

Props

Name	Type	Required	Default	Description
color	string	No	"#ccb6e3"	Particle colour.
background	string	No	"#15111d"	Background colour.
count	number	No	180	Particle count, clamped between 20 and 500.
speed	number	No	40	Revolution duration in seconds.
minHeight	number \| string	No	400	Minimum viewport height in pixels or a CSS length.
children	ReactNode	No	undefined	Optional content above the spiral.
className	string	No	""	Additional classes merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing, typography, and appearance.