Magnetic Grid

Interactive grid with magnetic effect when mouse enter.

Open in 21st dev
Loading...

Installation

Usage

<FloatingElements className="bg-secondary w-xs max-w-xs aspect-square mx-auto grid grid-cols-[repeat(20,minmax(0,1fr))] p-1 gap-1">
  {Array.from({ length: 300 }).map((_, i) => {
    return (
      <FloatingElementItem
        key={i}
        className="aspect-square bg-secondary-foreground"
      />
    );
  })}
</FloatingElements>

Props

FloatingElementItem

PropTypeDefault
damping?
number
15
stiffness?
number
150
intensity?
number
50

InfiniteFloatingItem

PropTypeDefault
damping?
number
20
stiffness?
number
80
phase?
number
0
speed?
number
1
amplitude?
number
12
depth?
number
0.03

Image Player

Create your own image player GIF/video.

Shader

Shader component with two variants for gradient and hurricane both can be configured.