Liquid Gradient Background
Bring your Framer sites to life with this high-performance WebGL-powered interactive liquid gradient background. Featuring fluid, organic blob animations that gently flow and blend across the screen, it creates a mesmerizing, immersive effect perfect for hero sections, landing pages, full-page backgrounds, or modern portfolios.Key Features
Touch & Mouse Interaction: Hover or drag with your mouse/touch to create dynamic distortions—ripples, waves, and fluid displacements that react naturally to user input for an engaging, tactile experience.
Multi-Color Blending: Customize up to 6 unique colors (with alternating weights for even more variety) that form flowing radial gradients and animated blobs.
Up to 12 Gradient Points: Toggle between 6 or 12 animated centers for simpler or more complex, layered liquid motion.
Full Animation Controls: Adjust speed, overall intensity, individual gradient size, and touch interaction strength to match your project's vibe.
Film Grain Effect: Add subtle, customizable noise for a vintage, textured look that enhances depth without overwhelming the design.
Dark Background Integration: Seamless blending with a customizable dark navy base color, plus automatic brightness clamping for vibrant yet balanced visuals.
Performance Optimized: Built with Three.js shaders for smooth 60fps rendering on desktop and mobile, with automatic pixel ratio capping and efficient resize handling.
This component is fully responsive, fills its container perfectly, and works as a standalone background layer—simply place it behind your content (set to absolute/fill) and layer text, images, or sections on top.Ideal for creating premium, modern web experiences that stand out. Easy to customize via Framer's property controls—no code required beyond the initial setup.Drop it into your project and watch your backgrounds come alive!
Troy Miller
