Vibary.ai
← All particles

Cursor Attract

A lattice of points that leans toward the pointer and relaxes when it leaves.

interactiveresponsivecalmfuturistic150 particles · light · canvas-2d · interaction · looping
Interactive · try it
Variant

The canvas in this preview is the file shown here. The surrounding demo shell only provides context and is not part of the copied code.

302 lines · react only
import { useEffect, useRef } from "react";

/**
 * Vibary · Cursor Attract
 *
 * A field of points that leans toward the pointer and relaxes when it
 * leaves. The technique is that nothing ever leaves home: each point
 * owns a fixed anchor on a jittered lattice, and the pointer only sets

About this effect

An interactive field for a panel that should feel touchable — a hero, an empty canvas, a chooser. Nothing ever leaves home: each point owns a fixed anchor on a jittered lattice, and the pointer only sets a target offset from it, a lean capped in length that falls off with the square of distance. A critically damped spring carries the point out and back. That single decision solves both failure modes of the usual version — nothing accumulates at the cursor, so the field cannot be swept empty, and the return has no wobble, where an underdamped spring leaves the whole lattice jiggling after the pointer has gone. It listens on the window rather than on the canvas, so content on top stays clickable, and the loop parks itself once the field has settled.

Hero panelEmpty canvasOption chooserLanding background

Related effects