Liquid Sweep Transition

Installation

Architecture

Rather than relying on heavy WebGL fluid simulations, this component achieves a hyper-smooth 60fps liquid wave effect using a very simple architectural trick:

1. It renders an absolute overlay that is taller than the screen (calc(100vh + 300px)).
2. The top and bottom edges of this overlay are capped with SVG <path> elements drawn as curved waves.
3. Framer Motion simply translates the entire overlay container upwards on the Y-axis (y: "100%" -> y: "-100%").

Because translating a DOM node on the Y-axis is hardware accelerated, this technique is perfectly smooth even on low-end mobile devices, giving the illusion of a complex path-morphing liquid fluid.

Usage Guide

1. Import the Component

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

import { LiquidSweepTransition } from "@/components/creative/liquid-sweep-transition";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { LiquidSweepTransition } from "@/components/creative/liquid-sweep-transition";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <LiquidSweepTransition
        isActive{true}
        color="example"
        onAnimationComplete{/* value */}
      >
        <div>Content goes here</div>
      </LiquidSweepTransition>
    </div>
  );
}