The SVGLiquidDistortion component is an incredibly lightweight way to achieve WebGL-level shader effects (like water ripples, melting text, and heat haze) using only native DOM and <svg> filter primitives.

It renders an invisible <svg> block containing <feTurbulence> and <feDisplacementMap>, and uses framer-motion to animate the distortion scale and noise frequency when you hover over it. The effect is applied via the standard CSS filter property, meaning it works universally on text, buttons, and images!

Live Preview

Installation

[!TIP] Padding & Clipping: Because SVG filters operate on the exact bounding box of the element, extreme distortion can sometimes cause the pixels to clip at the edges. The component automatically wraps your children in a <span> with p-2 (padding) to give the distortion room to bleed outward safely!

Props

Usage Guide

1. Import the Component

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

import { SVGLiquidDistortion } from "@/components/creative/svg-liquid-distortion";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { SVGLiquidDistortion } from "@/components/creative/svg-liquid-distortion";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <SVGLiquidDistortion
        intensity{10}
        frequency{10}
        speed{10}
      >
        <div>Content goes here</div>
      </SVGLiquidDistortion>
    </div>
  );
}