Circle Repulsion
Interactive circle grid that responds to cursor movement, revealing images with smooth pulse, fade, and blend effects for dynamic hero sections or modern interactive backgrounds.
Made with Workshop
Build your own component with AI
Circle Repulsion Effect creates an elegant, interactive grid of circles that dynamically expand and contract in response to cursor proximity. Each circle smoothly reveals a background image through blend modes, with optional pulsing and fading for added depth. Perfect for building immersive hero sections, artful transitions, or modern interactive backgrounds that react to users in real time.
✨ Key Features
Cursor-responsive grid that expands and contracts naturally
Customizable circle size, radius, growth, and easing
Built-in pulse and fade animation effects
Blend mode controls for both circles and the background image
Fully resizable and responsive for any layout
Lightweight and GPU-accelerated canvas rendering
🧩 Where to Use
Interactive landing page backgrounds
Hero sections and cover banners
Creative portfolio or product reveal pages
Experiential visual effects in modern UI layouts
🌟 Best For
Designers wanting motion-based, interactive visuals
Product pages needing subtle interactive depth
Modern, minimalist sites that value clean motion design
