xFactor 0.02
xFactor 0.05
xFactor 0.09
xFactor 0.14

v2 · zero dependencies · spring physics

react-parallax-mousemove

A stack of layers, one cursor. Every plane below is a real ParallaxMousemove.Layer with a bigger xFactor — move the mouse and the 3D stack shears apart.

✦ move your cursor
1

Layered depth

Four ParallaxMousemove.Layers with increasing xFactor/yFactor (0.02 → 0.14). Bigger factors move farther, creating parallax depth.

0.02
0.05
0.09
0.14 ✦
2

Positive vs negative factors

Positive factors move the layer away from the cursor; negative factors move it with the cursor. Move left/right and watch the two cards separate.

+0.12 (away)
−0.12 (with)
3

Live springSettings

The config.springSettings on the card below is driven by these sliders. Low stiffness / low damping = floaty & bouncy; high stiffness = snappy.

{ stiffness: 170, damping: 26 }
spring me
4

disabled prop

Toggling disabled freezes the layer in place — the mousemove listener is torn down while disabled.

moving
5

fullHeight container

With fullHeight, the container is sized to the window height and updates on resize. Toggle it and note the height readout.

fixed 260px
6

Named export: ParallaxLayer

The layer is also exported as ParallaxLayer. This card uses import { ParallaxLayer } directly instead of ParallaxMousemove.Layer.

ParallaxLayer
7

prefers-reduced-motion

Layers automatically freeze when the OS “reduce motion” setting is on — no extra code needed. Current detected state shown below.

Detected: checking…
macOS: System Settings → Accessibility → Display → “Reduce motion”. Toggle it and the layers above stop responding to the cursor.