Interactive Bg

Interactive Bg

About Interactive Bg

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.