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.
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).
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.
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.
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).
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.
Igor Reif
