Liquid Hologram

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.

From Sirrah Space

Animated Glow Shape
Light Curtain
Grainy Mesh Gradient
Wave Ribbon Orb

Related Components

Scroll Blur by Aki
Logo Stage Pro
Progressive Blur
Scroll Zoom Reveal