near-field

Cursor proximity, as a CSS input.

Hover is on or off. near-field hands your CSS the distance in between, as three custom properties.

Open the lab
npm i near-field
fieldx --- y ---

Three variables, nothing else.

Every subscribed element carries them. Your CSS decides what proximity means.

--nf
Eased proximity, from 0 far away to 1 touching the element.
--nf-x
Horizontal part of a unit vector from the element's center toward the pointer.
--nf-y
The vertical part of that same vector.

Three effects, tuned for feel.

Pick a preset, gentle, snappy, or instant, instead of turning physics knobs.

Magnetic

strength 0.35

Pulls its content toward the cursor inside the field, then springs back when the pointer leaves.

tilt

Tilt

max 8deg

Leans toward the cursor, easing in before the pointer arrives.

glow

Glow

size 140

A soft light that tracks the cursor and brightens with proximity.

One hook, or none at all.

React components, a callback for canvas work, or plain JavaScript with no framework.

import { useNearField } from "near-field";

function Card() {
  const ref = useNearField({ radius: 140 });
  return <div ref={ref} className="card" />;
}

/* --nf eased 0..1, --nf-x / --nf-y unit vector */
.card {
  transform: translate(
    calc(var(--nf-x) * var(--nf) * 8px),
    calc(var(--nf-y) * var(--nf) * 8px)
  );
}
Read the docs

Where it goes next.

  • Pointer field and springsShipped
  • Magnetic, Tilt, and GlowShipped
  • Vanilla adapterShipped
  • Vue adapterPlanned
  • Scroll proximityPlanned
  • Gyroscope tilt on mobilePlanned