CrazyGLLiquify Photo
Drag across the photograph and the pixels smear like thick liquid — pushed along your cursor, swirling into eddies, fringing green and magenta where the distortion runs hardest, then slowly flowing back to where they started. Faster movement means deeper distortion.
Usage
import LiquifyPhoto from '@crazygl/hero-liquify-photo';
export default function Page() {
return (
<LiquifyPhoto
backgroundImage="https://crazygl.com/samples/leopard-portrait.avif"
heading="Liquify Photo"
pushStrength={1}
returnSpeed={0.55}
/>
);
}Customise
- Image —
backgroundImage(any photo; cover-fitted so any aspect works),imageZoom(keep a little above 1 so the fluid never drags the frame edge into view),overlayDarkness,vignette,grainAmount. - Liquify —
brushRadiusandpushStrengthset how wide and how hard the cursor pushes (the brush itself also widens with pointer speed);swirlAmountturns a straight smear into genuine self-sustaining vortices;advectiondecides how much the distortion keeps flowing after you stop;returnSpeedhow fast pixels ease home;maxDistortioncaps how far a pixel can travel;aberrationcontrols the green/magenta fringing on the hardest smears. - Idle —
idleMotionkeeps a slow phantom current running before anyone touches it.
The distortion always scales with pointer speed, so a slow pass caresses the surface and a fast swipe gouges it. High-detail photographs read best — the effect needs texture to smear.
The heading is bold, large, left-aligned, and stands alone (no subheading, no hover effects) — it defaults to "Liquify Photo" but reads well as any short label.
Best for
- Photography portfolios, galleries, and print studios.
- Fashion, beauty, and editorial covers that want a tactile, physical hero.
- Product and art pages where the image itself is the story and should invite touch.
One command, zero config.
npm install @crazygl/hero-liquify-photoImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import LiquifyPhoto from '@crazygl/hero-liquify-photo';
export default function Landing() {
return (
<LiquifyPhoto />
);
}SSR-safe by default.
The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import LiquifyPhoto from '@crazygl/hero-liquify-photo';
export default function Page() {
return (
<section>
<LiquifyPhoto
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
