Jello Lights BG

Fluid, interactive shader

Jello Lights Background Bring your Framer projects to life with a fluid, colorful WebGL light shader that creates an abstract, glowing “jello” effect. Designed to add depth, motion, and a premium visual feel to hero sections, backgrounds, landing pages, and creative portfolios. Great For ✨ Hero section backgrounds 🌈 Creative portfolio websites 🚀 SaaS and startup landing pages 🎨 Digital art and experimental websites 💡 Interactive visual backgrounds 🪩 Premium marketing pages 🎬 Motion-focused websites 🌐 Full-screen WebGL experiences Features Real-time WebGL shader — Smooth GPU-powered rendering for fluid visuals. Fully interactive — Move your pointer across the component to influence the light pattern. Animation controls — Enable or disable continuous animation and control its speed. Pattern control — Adjust the structure and complexity of the light effect. Color Shift — Create different RGB color combinations and visual moods. Intensity & Glow — Fine-tune brightness, contrast, and light emission. Zoom control — Change the scale and density of the visual pattern. Quality settings — Choose Low, Medium, or High rendering quality depending on your performance needs. Viewport-aware rendering — Animation automatically pauses when the component is outside the viewport to avoid unnecessary rendering. Static rendering support — Works with Framer's static renderer without relying on a continuous animation loop. Responsive canvas — Automatically adapts to the component's size and device pixel ratio. WebGL context recovery — Handles WebGL context loss and restoration gracefully. Accessibility support — Includes an optional ARIA label for meaningful visual content. Easy to customize — Everything important is available directly through Framer Property Controls. Support Need help using Jello Lights or have a question about customization? Reach out anytime: Email: karimsaif010@gmail.com X: @karimsaif Made with 💛 by Karim Saif.

Fluid, interactive shader