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.
✨ 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
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.
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.
