---
title: "Liquid Hologram — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Sirrah Space · Effects. Elevate your visuals with Liquid Hologram, a mesmerizing WebGL component that simulates flowing, iridescent liquid."
canonical: "https://framer.elliotli.dev/component/liquid-hologram"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Liquid Hologram

# Liquid Hologram

Iridescent fluid WebGL background.

[View on Framer](https://framer.com/marketplace/components/liquid-hologram/?via=elliot-li)

![Liquid Hologram preview image 1](https://framer.elliotli.dev/og/component/liquid-hologram/6173b65eb7acd5c0/1600x1200.jpg)

## Summary

Elevate your visuals with Liquid Hologram, a mesmerizing WebGL component that simulates flowing, iridescent liquid.

## Description

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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #7802

## Details

- **Author**: Sirrah Space
- **Price**: $5.00
- **Published**: 2026-02-13
- **Updated**: 2026-07-26
- **Added**: 2026-02-05
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo