Physics-based displacement grid with cursor repulsion, idle wave animation, animated gradient sweep, and cursor fade mask. Adds depth, interactivity and energy to hero sections, landing pages and portfolio backgrounds. Fully responsive. No code needed. Drag and drop in Framer.

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.

Features

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

Use Cases

Hero backgrounds · Tech landing pages · Portfolio sections · Startup websites · SaaS product pages · Agency headers · Event pages · Section dividers · Animated textures · Promo pages

SEO Keywords

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

Luis Enrique Martínez

Related Creators