A background shouldn't just sit there. It should react. 🌀
Just built Vector Field Background, a new interactive component for Framer.
The idea is simple: turn a static grid of lines into a living, flowing system.
Each stroke follows an evolving vector field. Move your cursor, and the lines bend into a smooth vortex around it.
What's inside:
↗️ Organic, continuously flowing vector animations
🌀 Interactive cursor vortex with adjustable strength
🎛️ 12 customizable Framer controls
🎨 Full control over colors, spacing, and stroke styles
⚡ Adaptive rendering and offscreen animation pausing
♿ Reduced-motion accessibility support
📱 Responsive across screen sizes
Built with Canvas 2D, designed for creative portfolios, SaaS landing pages, experimental websites, and interactive hero sections.
The goal was to create something visually expressive while keeping it practical for real websites.
Would you use this as a hero background or across an entire page?
Made with 💛 by @Karim Saif
