A fully interactive displacement grid that reacts to your cursor in real time. Dots are pushed away as you move, spring back with physics-based easing, and pulse with a slow sine-wave when idle. Layer an animated 3-color gradient sweep across the grid and fade dots near the cursor for a dramatic reveal effect. Built for hero backgrounds, tech landing pages, and any section that needs premium depth and motion.
Physics-based cursor repulsion — dots push away and spring back naturally
Idle sine-wave oscillation — subtle ambient motion when the cursor is still
Animated 3-color gradient sweep — linear, radial, or conic color cycling across every dot
Cursor proximity fade mask — dots near the cursor fade to transparent for a spotlight effect
Works through overlapping layers — cursor effect is never blocked by content above
Fully adjustable from the property panel — no code needed
Fully responsive across all screen sizes
Hero backgrounds · Tech landing pages · Portfolio sections · Startup websites · SaaS product pages · Agency headers · Event pages · Section dividers · Animated textures · Promo pages
framer displacement grid · framer interactive background · framer cursor effect · framer particle background · framer dot grid · framer animated background · framer gradient dots · framer physics background · framer hero background · framer background component · framer dot animation · framer grid background · framer cursor repulsion · framer wave animation · framer gradient background · framer code component · framer background effect · framer animated dots · framer interactive dots · framer spring animation
