Particles

PreviewCode

Particles

@/demos/ParticlesDemo.tsx

import { createSignal, onCleanup, onMount } from 'solid-js'

import { Particles } from '@/registry/magicui/particles'

export function ParticlesDemo() {
  const [color, setColor] = createSignal('#ffffff')

  onMount(() => {
    const root = document.documentElement
    const update = () => {
      setColor(root.dataset.theme === 'dark' ? '#ffffff' : '#000000')
    }
    update()

    const observer = new MutationObserver(update)
    observer.observe(root, { attributes: true, attributeFilter: ['data-theme'] })

    onCleanup(() => observer.disconnect())
  })

  return (
    <div class="
      relative flex h-125 w-full flex-col items-center justify-center
      overflow-hidden rounded-lg border bg-background
    "
    >
      <span class="
        pointer-events-none z-10 text-center text-8xl leading-none font-semibold
        whitespace-pre-wrap
      "
      >
        Particles
      </span>
      <Particles
        class="absolute inset-0 z-0"
        quantity={100}
        ease={80}
        color={color()}
        refresh
      />
    </div>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/particles

bun

bunx shadcn@latest add @magicui-solid/particles

yarn

yarn dlx shadcn@latest add @magicui-solid/particles

npm

npx shadcn@latest add @magicui-solid/particles

Import

import { Particles } from '@/components/magicui/particles'

Usage

<div class="relative h-[500px] w-full overflow-hidden">
  <Particles />
</div>

Props

Prop	Type	Default	Description
class	string	-	The class name for the component
quantity	number	100	The number of particles
staticity	number	50	The staticity of the particles
ease	number	50	The ease of the particles
size	number	0.4	The size of the particles
refresh	boolean	false	Whether to refresh the particles
color	string	#ffffff	The color of the particles
vx	number	0	The x velocity of the particles
vy	number	0	The y velocity of the particles

Original:

magicui.design/docs/components/particles