Hero made by @ybouane.

@crazygl/hero-liquify-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.

Demo

Liquify Photo

Install

npm install @crazygl/hero-liquify-photo

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 — brushRadius and pushStrength set how wide and how hard the cursor pushes (the brush itself also widens with pointer speed); swirlAmount turns a straight smear into genuine self-sustaining vortices; advection decides how much the distortion keeps flowing after you stop; returnSpeed how fast pixels ease home; maxDistortion caps how far a pixel can travel; aberration controls the green/magenta fringing on the hardest smears.
• Idle — idleMotion keeps 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.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.