Magnetic Tile Grid
A tile field that leans toward the pointer and brightens with proximity.
- Category
- Backgrounds
- Added
- 2026-09-20
- Deps
- none
- Updated
- 2026-09-20
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Pointer Warp Dot Field
backgroundsA canvas dot grid that bulges and brightens away from the cursor.
Spotlight Card Grid
patternsA card grid with a soft red spotlight that follows the cursor across it.
Masonry Image Hover Grid
assetsA CSS-columns masonry gallery with a scale + caption reveal on hover.