Liquid Aluminum BG

Uplift Your Website with Liquid Aluminum Shader

Add a premium, industrial aesthetic to your Framer website. Liquid Aluminum uses 3D surface normals to simulate studio light vectors bouncing off moving metal, bringing a heavy yet soft machined hardware feel directly to your website.

Whether you want a calm backdrop or a powerful, high-impact focal point, this component offers a highly immersive, visually tactile experience.

What it does

Aspect-Ratio Locked: Completely immune to stretching. Automatically normalizes coordinates so your aluminum waves keep perfect proportions, whether inside a small card or stretched wide across a 4K desktop banner.

Intelligent Throttling: Built specifically for full screen hero backgrounds. It dynamically throttles render bounds on ultra-dense mobile and retina screens to protect your page's scrolling performance.

Micro Refraction Fringing: Shifts subtle light channels along the edge of every metallic wave, adding a layer of optical depth and physical weight that standard flat color loops can’t replicate.

Zero Layout Friction: Built with alpha channel transparency and click-through disabled (pointer-events: none), allowing it to sit quietly beneath typography, buttons, and layout grids with zero interference.

Controls

Adjust the structural physics directly from the Framer sidebar:

Flow Speed: Controls the kinetic energy of the metal, shifting from an ultra-slow industrial crawl to a steady fluid ripple.

Wave Density: Adjusts the frequency of the shapes, alternating between wide, sweeping panels and tight, detailed metallic crests.

Contrast Power: Fine tunes the lighting contrast. Dial it up to sharpen the shadows, or pull it back to push the shader into a stunning light mode territory.

Perfect For:

High end tech, hardware, and AI landing pages.

Sleek dark mode portfolio websites.

Immersive product presentation sections and immersive hero headers.

Modern fashion, automotive, and luxury showcases.