Dot Matrix

5×5 grid loader with 20 animation variants — sweep, spiral, ripple, vortex, and more.

neon-drift

cascade

pulse-ladder

prism-sweep

ripple

core-spiral

twin-orbit

snake

matrix-rain

vortex

bloom

stagger-rows

grid-pulse

wave

heartbeat

cross-hatch

clockwise

zipper

sunrise

twin-sweep

Code

import { DotMatrix } from "@/components/ui/dot-matrix-loaders"

export default function Example() {
  return <DotMatrix />
}

Installation

$npx particleui-cli add dot-matrix

Usage

TSX

import { DotMatrix } from "@/components/ui/dot-matrix-loaders"

export default function Example() {
  return <DotMatrix />
}

Examples

Types

20 animation patterns controlled by the type prop.

TSX

import { DotMatrix } from "@/components/ui/dot-matrix-loaders"

export default function Example() {
  return (
    <div className="flex flex-wrap gap-8">
      <DotMatrix type="neon-drift" />
      <DotMatrix type="cascade" />
      <DotMatrix type="pulse-ladder" />
      <DotMatrix type="wave" />
      <DotMatrix type="matrix-rain" />
      <DotMatrix type="vortex" />
    </div>
  )
}

Sizes

TSX

import { DotMatrix } from "@/components/ui/dot-matrix-loaders"

export default function Example() {
  return (
    <div className="flex items-end gap-8">
      <DotMatrix type="neon-drift" size="sm" />
      <DotMatrix type="neon-drift" size="md" />
      <DotMatrix type="neon-drift" size="lg" />
    </div>
  )
}

Props

Prop	Type	Default	Required
type	DotMatrixType	—	no
size	"sm" \| "md" \| "lg"	—	no
className	string	—	no

Details

Source filecomponents/ui/dot-matrix-loaders.tsx

Typeui

Categoriesloaders, core

npm dependencies

Registry deps

Claude skill—