---
title: "Interactive Bg — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Ramcharantej Paka · Backgrounds. Interactive liquid optics for high-stake"
canonical: "https://framer.elliotli.dev/component/liquidbackdrop"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Interactive Bg

# Interactive Bg

Interactive liquid optics for high-stake

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

![Interactive Bg preview image 1](https://framer.elliotli.dev/og/component/liquidbackdrop/1f47960717ea7dff/1600x1200.jpg)

## Summary

Interactive liquid optics for high-stake

## Description

### Features

-   **Reactive Physics:** A WebGL-driven lens that tracks movement with zero lag.
    
-   **Depth Control:** Toggle between **Convex** (magnify) and **Concave** (dent) distortion.
    
-   **Infinite Fade:** Mathematical smooth step edges that dissolve perfectly into the background.
    
-   **Brand Tint Engine:** Built-in colour grading with six blend modes to match any brand identity instantly.
    
-   **Aspect Lock:** Intelligent anti-stretch logic that keeps your textures proportional on any screen size.
    

Instructions

-   **Placement:** Drop the component into your section and set it to **Layer 0** (Background).
    
-   **Texture:** Upload a high-res image to the **Base Texture** slot.
    
-   **Lens Tuning:** \* Use a **Negative** value for a "magnifying glass" swell.
    
    -   Use a **Positive** value for a "puddle" hollow effect.
        
-   **Colour:** Enable **Brand Tint** to recolour the background. Use **Overlay** or **Colour** blend modes for the best results.
    
-   **Mobile:** No setup required. Touch tracking is natively active and scroll optimized.
    

**Pro Tip:** Keep your typography on a separate high-index layer. The contrast between sharp text and the liquid void underneath is what creates the premium feel.

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

-   All · #5643

## Details

- **Author**: Ramcharantej Paka
- **Price**: $10.00
- **Published**: 2026-05-14
- **Updated**: 2026-05-14
- **Added**: 2026-04-17
- **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