---
title: "Jello Lights BG — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Karim Saif · Backgrounds. Fluid, interactive shader"
canonical: "https://framer.elliotli.dev/component/jello-lights-bg"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Jello Lights BG

# Jello Lights BG

Fluid, interactive shader

[View on Framer](https://framer.com/marketplace/components/jello-lights-bg/?via=elliot-li)

![Jello Lights BG preview image 1](https://framer.elliotli.dev/og/component/jello-lights-bg/3bbe8e1da63aa580/1600x1057.jpg)

## Summary

Fluid, interactive shader

## Description

**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](mailto:karimsaif010@gmail.com)

**X:** [@karimsaif](https://x.com/karimsaif0)

Made with 💛 by Karim Saif.

## Rank history [How rankings work →](/terms#rankings)

-   All · #5581

## Details

- **Author**: Karim Saif
- **Price**: $5.00
- **Published**: 2026-08-23
- **Updated**: 2026-09-16
- **Added**: 2026-08-23
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background