Particles

A particles effect that creates a particle system.

Made by imskyleen

side

sideOffset

align

alignOffset

count

radius

spread

duration

holdDelay

delay

Installation

Usage

<Particles>
  <div>Particles</div>
  <ParticlesEffect />
</Particles>

API Reference

Particles

Prop	Type	Default
`children`	`React.ReactNode`	-
`animate?`	`boolean`	`true`
`asChild?`	`boolean`	`false`
`inView?`	`boolean`	`false`
`inViewOnce?`	`boolean`	`true`
`inViewMargin?`	`string`	`0px`
`...props?`	`HTMLMotionProps<"div">`	-

ParticlesEffect

Prop	Type	Default
`side?`	`'top' \| 'bottom' \| 'left' \| 'right'`	`top`
`sideOffset?`	`number`	`0`
`align?`	`'start' \| 'center' \| 'end'`	`center`
`alignOffset?`	`number`	`0`
`count?`	`number`	`6`
`radius?`	`number`	`30`
`spread?`	`number`	`360`
`duration?`	`number`	`0.8`
`holdDelay?`	`number`	`0.05`
`delay?`	`number`	`0`
`...props?`	`HTMLMotionProps<"div">`	-

Credits

Credits to SHSF UI for the animation inspiration

Built by Skyleen. The source code is available on GitHub.

On this page

ParticlesEffect