---
title: "Liquid Image Morph — Free Framer component · Best of Framer"
description: "Free Framer component · by Igor Reif · Effects. Advanced WebGL shader transitions"
canonical: "https://framer.elliotli.dev/component/liquid-image-morph"
---

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

# Liquid Image Morph

Advanced WebGL shader transitions

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

![Liquid Image Morph preview image 1](https://framer.elliotli.dev/og/component/liquid-image-morph/ae4f4a66e5fd39e9/1600x1200.jpg)

## Summary

Advanced WebGL shader transitions

## Description

## Powered by WebGL & Framer Motion. This component bridges the gap between high-end creative coding and Framer's visual canvas. The core rendering engine is based on the popular open-source hover-effect WebGL library (originally popularized by Robin Delaporte for advanced shader transitions).

To make it native to Framer, it is wrapped in custom React logic utilizing Framer Motion (useScroll, useSpring) for butter-smooth scroll tracking. Additionally, it features a custom asynchronous loading mechanism to completely bypass static rendering limitations, ensuring optimal performance and safety on published live sites.

### FEATURES

-   **_Dual Triggers:_** Seamlessly activate the liquid morph effect via mouse hover or precise page scroll (with customizable viewport start points).
    
-   **_Custom Displacement Maps:_** Upload your own displacement images to craft highly unique distortion patterns.
    
-   **_Advanced Animation Controls:_** Fine-tune the transition intensity, entry/exit speeds, angle, and easing directly from the Framer property panel.
    
-   **_SSR & Performance Optimized:_** Built with dynamic module importing to ensure 100% compatibility with Framer's Static Site Generation (no broken published pages).
    

### Displacement Maps & Assets

-   **_Assets Not Included:_** The component does not come with pre-packaged displacement maps.
    
-   **_Supported Inputs:_** You can upload any image to drive the morph effect; grayscale textures, abstract patterns, brand marks, or high-contrast logos all work to create unique distortion visuals.
    
-   **_Low-Res Friendly:_** Displacement maps don't need to be high resolution. Smaller textures (e.g., 200 × 200 px) work perfectly and help keep your site lightweight.
    

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

-   All · #4417

## Details

- **Author**: Igor Reif
- **Published**: 2026-08-02
- **Updated**: 2026-08-02
- **Added**: 2026-08-02
- **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