Cursor Ring Field

Cursor Ring Field An interactive WebGL particle field that reacts to your cursor with a dynamic expanding ring.

Cursor Ring Field

An interactive WebGL particle field that reacts to your cursor with a dynamic expanding ring. Hundreds of soft capsule-shaped particles form a subtle grid across the entire background, while the cursor creates a wave of movement, scale, and color around it.

Live Preview: https://hoverinteractive.framer.website/

Features

• Interactive cursor-following ring

• Smooth particle displacement and physics

• Poisson-scattered particle field

• Subtle background dot grid

• Customizable colors

• Adjustable particle density and size

• Ring radius, width, push, and turbulence controls

• Adjustable animation speed

• Responsive to any frame size

• GPU-accelerated WebGL rendering

• Works as a Framer Code Component

• Lightweight with no Three.js dependency