The lab

Everything here runs on the real package. Sweep the cursor around while you change things.

magneticstrength 0.35, gentle

effect

feel

radius

140px

strength

0.35

<Magnetic strength={0.35} radius={140} feel="gentle">

The primitive, live.

This style block is real. Edit it, then sweep the cursor past the card.

.play-card {
  transform: translate(
    calc(var(--nf-x) * var(--nf) * 14px),
    calc(var(--nf-y) * var(--nf) * 14px)
  );
  box-shadow: 0 0 calc(var(--nf) * 48px)
    rgb(59 130 246 / 0.3);
}

canvas

come closer

nf 0.00 x 0.00 y 0.00

The lab

The components

The primitive, live.