Elevate your visuals with Liquid Hologram, a mesmerizing WebGL component that simulates flowing, iridescent liquid. Unlike static gradients, this shader generates organic, pearlescent textures that mimic the surface of a bubble or holographic foil.
Powered by Simplex Noise, it renders smooth, non-repeating distortions directly on the GPU, ensuring 60fps performance without heavy video files. It is the perfect atmospheric backdrop for Web3 interfaces, creative portfolios, or beauty brands seeking a modern, ethereal aesthetic. You have full control over the liquid distortion intensity, flow speed, and color palette.
Functions (Key Features):
⚡ WebGL Powered: Renders natively on the GPU for buttery-smooth animation at any screen size.
🌈 Iridescent Effect: Simulates the shifting colors of a hologram using advanced noise algorithms.
💧 Liquid Distortion: Controls allow you to warp the texture from a gentle ripple to a turbulent flow.
✨ Specular Highlights: Automatically adds glossy, "wet" highlights to enhance the 3D feel.
🎨 4-Color Blending: Mixes four distinct colors to create deep, rich pastel gradients.
How to Use:
Insert: Drag the Liquid Hologram component onto your canvas.
Sizing: Set Width and Height to "Fill" (100%) to use it as a full-screen background.
Colors: Choose 4 distinct colors. Pastels (Pink, Cyan, Lavender) work best for a holographic look; Dark colors create an oil-slick effect.
Motion: Adjust Speed and Distortion. High distortion creates a "melting" look; low distortion looks like silk.
Brightness: Tweak the Brightness slider to ensure your text remains readable on top.
Alpheratz
