Displacement Hover

Installation

npx kinetic-ui-cli@latest add displacement-hover

How It Works

Instead of using heavy canvas or Three.js dependencies, the DisplacementHover component uses a powerful SVG <feDisplacementMap> coupled with <feTurbulence>. By animating the scale property of the displacement map via React state, it creates a true physics-based liquid distortion effect that seamlessly morphs between two images.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { DisplacementHover } from "@/components/creative/displacement-hover";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { DisplacementHover } from "@/components/creative/displacement-hover";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <DisplacementHover
        image1="example"
        image2="example"
        intensity{10}
      />
    </div>
  );
}