Magnetic Tile Grid
A tile field that leans toward the pointer and brightens with proximity.
DOM + CSS0 deps1 file · 3 KB TSX
Props
"use client";
import { useEffect, useRef } from "react";
export function MagneticTileGrid({
cols = 8,
rows = 5,
pull = 14,
radius = 130,
}: {
cols?: number;
rows?: number;
pull?: number;
radius?: number;
}) {
const hostRef = useRef<HTMLDivElement>(null);
const tiles = useRef<HTMLSpanElement[]>([]);
const boxes = useRef<{ x: number; y: number }[]>([]);
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this background
This effect is trivial to describe and easy to build badly. The obvious implementation makes each tile a component with its own mouse listener and its own state, which means dozens of listeners firing and dozens of components re-rendering on every pointer move; the second-most-obvious one keeps a single handler but calls `getBoundingClientRect` per tile inside it, which forces a synchronous layout flush every frame. Both stutter on a mid-range laptop at forty tiles, and both are what you find in most versions of this. The build here does neither: geometry is measured once into a cached array and refreshed only by a ResizeObserver, and one delegated handler walks the tile refs writing transforms straight to the DOM, so React is not involved in the animation at all. The falloff is squared rather than linear, which removes the visible circular seam at the influence boundary that gives the cheaper version away. Tiles are decorative and hidden from assistive technology; the whole effect is pointer-only, so nothing meaningful should live in it.
Curator’s note
Built for viberdy 2.1. Cached geometry plus one delegated handler — the same grid built the obvious way stutters on a mid-range laptop.
