Liquid Image Morph

Advanced WebGL shader transitions

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.