GSAP Interactive Canvas Background: Needle Field
Overview
An interactive canvas background for React and Next.js: a grid of small needles turns to face the cursor and glows as it gets close, and every click sends a shockwave through the field.
Wrap a hero or section and your content sits on top. The field reads the cursor from the window, so text and buttons over it never block the effect. With no cursor around, the aim point wanders slowly, so it stays alive on touch screens too, and a tap still fires a shockwave.
Details
- Category
- Backgrounds
- Interaction
- Mouse Move + On Click + On Load
- Trigger
- Mouse Move
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 038 / Backgrounds
GSAP Interactive Topographic Lines Canvas Background
Mouse Move · On Click · On Load
No. 056 / Backgrounds
WebGL Animated Gradient Background with Film Grain
On Load · Mouse Move
No. 102 / Backgrounds
Liquid Gold Metaball Hero Background in JavaScript
On Load · Mouse Move · On Click
(02)FAQ
GSAP Interactive Canvas Background: Needle Field — FAQ
01How do I match it to my brand colours?
Pass color for resting needles and accent for the glow. Any CSS hex or rgba value works, so a low-alpha color keeps the field quiet behind your text.
02Will it slow my page down?
It's built to stay light: a capped needle count, batched drawing, a device pixel ratio capped at 2, and no drawing at all while it's off screen. Raise spacing if you want it lighter still.
03Can buttons inside it still be clicked?
Yes. Children render normally on top of the canvas. Clicking one also sends a shockwave from that spot.