Liquid Hologram

Liquid Hologram

About Liquid Hologram

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:

  1. Insert: Drag the Liquid Hologram component onto your canvas.

  2. Sizing: Set Width and Height to "Fill" (100%) to use it as a full-screen background.

  3. Colors: Choose 4 distinct colors. Pastels (Pink, Cyan, Lavender) work best for a holographic look; Dark colors create an oil-slick effect.

  4. Motion: Adjust Speed and Distortion. High distortion creates a "melting" look; low distortion looks like silk.

  5. Brightness: Tweak the Brightness slider to ensure your text remains readable on top.