Gravity Field Shader by Karim Saif

What if your website had its own gravitational field? 🌀

I just built Gravity Field Shader — an interactive WebGL background for Framer where the entire space reacts to your movement.

🌀 Curved gravitational field lines

✨ Flowing procedural particles

🖱 Cursor-based attraction

🕳 Click-triggered black-hole distortion

🎯 Up to 3 gravitational attractors

🎨 7 color presets + custom gradients

⚡ Adjustable quality & performance controls

Instead of using a static gradient or image as a background, I wanted to create something that actually responds to the visitor.

Move your cursor → bend the field. Click → create a gravitational pulse. Change the settings → completely change the atmosphere.

Built with React + WebGL2 for Framer.

What if your website had its own gravitational field? 🌀

I just built Gravity Field Shader — an interactive WebGL background for Framer where the entire space reacts to your movement.

🌀 Curved gravitational field lines

✨ Flowing procedural particles

🖱 Cursor-based attraction

🕳 Click-triggered black-hole distortion

🎯 Up to 3 gravitational attractors

🎨 7 color presets + custom gradients

⚡ Adjustable quality & performance controls

Instead of using a static gradient or image as a background, I wanted to create something that actually responds to the visitor.

Move your cursor → bend the field. Click → create a gravitational pulse. Change the settings → completely change the atmosphere.

Built with React + WebGL2 for Framer.

What if your website had its own gravitational field? 🌀

I just built Gravity Field Shader — an interactive WebGL background for Framer where the entire space reacts to your movement.

🌀 Curved gravitational field lines

✨ Flowing procedural particles

🖱 Cursor-based attraction

🕳 Click-triggered black-hole distortion

🎯 Up to 3 gravitational attractors

🎨 7 color presets + custom gradients

⚡ Adjustable quality & performance controls

Instead of using a static gradient or image as a background, I wanted to create something that actually responds to the visitor.

Move your cursor → bend the field. Click → create a gravitational pulse. Change the settings → completely change the atmosphere.

Built with React + WebGL2 for Framer.

Suggested for you