Backgrounds

Particles

A drifting field of dots that scatters away from the pointer.

Particles draws a cloud of dots on a canvas and nudges them away from the pointer as it moves through the field. Each dot is pushed from its home position, then eased back once the pointer leaves, so the field heals itself instead of staying disturbed.

Dots can also drift on their own with vx and vy, wrapping around the edges to keep the field evenly filled. Drawing pauses while the component is scrolled out of view, and the field holds still when the visitor has asked for reduced motion.

Usage

Particles

Move your pointer across the field and the dots scatter

<template>
  <div class="relative h-64 w-full overflow-hidden rounded-xl border border-default bg-default">
    <MParticles
      class="absolute inset-0"
      :quantity="120"
      :size="0.8"
      :staticity="40"
      :ease="60"
    />
    <div class="relative z-10 flex h-full flex-col items-center justify-center gap-2 text-center">
      <h3 class="text-2xl font-bold text-highlighted">
        Particles
      </h3>
      <p class="max-w-xs text-sm text-muted">
        Move your pointer across the field and the dots scatter
      </p>
    </div>
  </div>
</template>

Examples

Customize

Color

Ease50

Quantity120

Refresh

Size0.4

Staticity50

Vx0

Vy0

Props

Prop	Type	Default	Description
`quantity`	`number`	`100`	How many dots to draw. The field is reseeded whenever this changes.
`color`	`string`	`'var(--ui-primary)'`	Colour of every dot. Any CSS colour works.
`size`	`number`	`0.4`	Base radius of a dot, in pixels. Each dot is drawn somewhere between this and 2.4 times it, so the field reads as uneven.
`staticity`	`number`	`50`	How far the pointer reaches, inverted: a higher value means a shorter reach and a calmer field. `0` ignores the pointer entirely.
`ease`	`number`	`50`	How fast a pushed dot settles home, and how hard it is pushed. `0` never settles, `100` snaps back immediately.
`vx`	`number`	`0`	Horizontal drift of every dot, in pixels per frame.
`vy`	`number`	`0`	Vertical drift of every dot, in pixels per frame.
`refresh`	`boolean`	`false`	Flip this to reseed the field with fresh random positions.
`class`	`string`	`''`	CSS classes to apply to the container. The container fills its parent, so give the parent a height.

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.particles in app.config.ts.

Prop	Type	Default	Description
`ui`	`object`	-	Per-slot classes merged over the theme defaults.

Slot	Props	Description
`root`	-	`relative h-full w-full overflow-hidden`
`canvas`	-	`pointer-events-none absolute inset-0 h-full w-full`

Edit this pageorReport an issue

Meteors

Animated meteor shower effect with customizable density and timing.

Retro Grid

A tilted grid plane that scrolls towards the horizon.