Cursor / pointer · 2.1
Sticky cursor with lag
A dog on a slightly slack lead, which snaps to heel at every lamppost.
A dot tracking the pointer exactly, and a ring trailing behind it that sticks to whatever you hover.
4 knobs
How it actually works
Every other cursor effect is built on top of this one, which is why it goes first. A lerp is not an easing curve: there are no keyframes and no duration. It is a rule applied every frame, which is why it handles you changing direction mid-flight without a single line of interruption logic.
Vanilla rAF plus a lerp: (1 - n) * a + n * b, with n = 0.2, so the ring closes 20% of the gap every frame. The stick state is the interesting half: mouseenter reads the target's bounding rect once, sets isStuck, and the lerp target becomes the rect centre instead of the pointer. mouseleave releases it. GSAP is explicitly optional in the source. This is genuinely three lines of maths.
The knobs, named
The lerp factor n is the whole feel. Ring size, stick radius and release easing are trim. n = 1 is glued to the pointer. n = 0.02 is a lazy ghost 300ms behind you.
| Knob | Source | What it teaches |
|---|---|---|
| Lerp factor n | sourced | The fraction of the remaining gap closed each frame. The single number that spans glued to ghost. 0.2 is the source's value. |
| Ring size | ours | Diameter at rest. Bigger rings make the lag more legible. |
| Stick strength | ours | How completely the ring commits to a hovered target's centre. At 0 it ignores the target entirely. |
| Stick growth | ours | How much the ring swells when it locks on. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
VERIFIED (author)
Codrops "Custom Cursor Effects" (2019, 5 demos). The n = 0.2 value is verbatim.
- Seen on
- Codrops "Custom Cursor Effects".
- Dependencies
- vanilla
- Difficulty
- trivial-to-moderate
- Performance
- Cheap if you write transform: translate3d() and never read layout inside the rAF loop.
- Accessibility and the floor
- Verified absence: the source article has zero touch or mobile handling; it is pure mousemove. Ours hides the custom cursor entirely on coarse pointers and under reduced motion, leaving the native cursor intact.
Notes
Composability. The base layer under 2.3 and 2.4. Feed the same lerped position into the blend-mode circle and you get a lagging invert.