near-field

Overview

near-field exposes how close the pointer is to an element as three CSS custom properties: --nf for eased proximity from 0 to 1, and --nf-x and --nf-y for the direction the pointer is coming from. Your CSS decides what proximity means. On top of that primitive it ships three pre-tuned effects: Magnetic, Tilt and Glow.

It started as the magnetic logo at the top of this site. Once the proximity math worked there, I pulled it out into a package anyone can install.

The problem

Hover is binary. CSS has no state between not hovering and hovering, so every effect either snaps on at the element's edge or stays off. The usual workaround is a mousemove listener per element that sets React state, which means a re-render on every pointer event and a page that gets slower with every card you add.

Approach

I built it around one shared field. A single passive pointermove listener and a single requestAnimationFrame loop serve every element on the page, however many subscribe. Element rects are cached and refreshed through ResizeObserver and on scroll end, never measured per frame. Proximity is taken from the nearest edge rather than the center, eased over the radius, then written straight to the element’s style, so React never re-renders.

The motion comes from a thirty-line spring stepping at a fixed 120Hz, so the feel is identical on a 60Hz laptop and a 144Hz monitor, with no animation library. The core has no framework in it at all: the React hook and the vanilla entry added in 0.2 are both thin adapters over the same field.

Key features

• --nf, --nf-x and --nf-y on any element, with zero re-renders.
• Magnetic, Tilt and Glow components, tuned with gentle, snappy and instant presets instead of physics knobs.
• A callback mode that hands over the raw frame for canvas, WebGL or SVG effects CSS can't express.
• A framework-free near-field/vanilla entry that also loads straight from a CDN, no build step.
• Respects reduced motion, falls back to a tuned press state on touch screens, and is safe to import on the server.
• About 1.5KB min+gzip for the core and 3.5KB for everything, with no dependencies.

Tech stack

Written in TypeScript with no runtime dependencies, bundled with tsup to ESM and CommonJS, and tested with Vitest: the field math, the element registry, the spring and the vanilla entry each have their own suite. React 18 or 19 is an optional peer dependency. The demo site and its lab run on Next.js.

Getting started

Install it, attach the hook, and the element carries the custom properties. Or skip React and use the vanilla entry on any page.

$ npm install near-field

Outcome

near-field is my first published micro-library. Version 0.1 shipped the React hook and the three effects, and 0.2 added the framework-free entry so it works anywhere. The lab lets you tune the field by hand. I wrote up the technique and the move past React on the blog, and the code is on GitHub.