Gravity Dots

Visual Effects

A canvas dot-grid field the cursor bends — dots within range are pulled in (or repelled) and spring home with damped overshoot, smearing into capsules while they move. Sleeps when settled, offscreen, or tab-hidden; renders a static grid under reduced motion.

Inspired by Ali Imam — Attraction (aliimam.in/docs, historical) — independently built, not affiliated. Attribution policy

attract · move your cursor

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/gravity-dots.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/gravity-dots.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<GravityDots
    mode="attract"
    radius={120}
    className="h-72 w-full max-w-lg rounded-2xl border border-white/10 bg-[#0f0f10]"
  >
    <div className="pointer-events-none flex h-full items-end justify-center pb-4">
      <span className="font-mono text-[10px] uppercase tracking-[0.2em] text-white/35">
        attract &middot; move your cursor
      </span>
    </div>
  </GravityDots>

Props

GravityDotsProps extends React.HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
rows	number	—	Fixed row count. Omit to derive from container height.
cols	number	—	Fixed column count. Omit to derive from container width.
color	string	"#8b5cf6"	Dot colour. Default mirrors the site's `--pb-violet` token.
dotSize	number	2	Dot radius in px.
radius	number	140	Pointer influence radius in px.
strength	number	1	Force multiplier — 1 is the tuned default, 2 pulls twice as hard.
mode	"attract" \| "repel"	"attract"	Whether the pointer pulls dots in or pushes them away.