near-field v0.1.0

Cursor proximity as a CSS input. Hover is binary; this is the continuum. One pointer listener, spring physics, zero dependencies.

fieldx --- y ---

Every mark above is a plain element carrying three custom properties. The lean, the color, the glow: all CSS.

magnetic · strength 0.35 · gentle

tilt · max 8deg · gentle

tilt

glow · size 140 · gentleglow

Three packaged effects with the feel pre-tuned. Presets, not physics knobs. Try them with different settings in the lab.

Install

npm i near-field

Use

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)
  );
}

Roadmap

pointer field, springs, Magnetic, Tilt, Glowshipped

vanilla adapterplanned

Vue adapterplanned

scroll proximityplanned

gyroscope tilt on mobileplanned