Interactive Bg: Premium Backgrounds Component by Ramcharantej Paka

A studio-grade WebGL engine that transforms static textures into a reactive, fluid environment. LiquidBackdrop uses custom fragment shaders to distort reality around the cursor, creating a heavy, high-end optical depth that feels physically present

About this Component

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.