Liquid Curtain Transition

Installation

npx kinetic-ui-cli@latest add liquid-curtain-transition

How It Works

This component uses Framer Motion to interpolate the d attribute of an SVG <path>. The path morphs from a flat line at the top of the screen into a curved quadratic Bezier shape (Q command), creating a fluid "liquid" curtain that sweeps downward to mask the current content.

Once the screen is fully masked by a solid SVG rectangle, the new content is swapped in beneath it. The curtain then continues its sweep downward, morphing back into a curve before disappearing off the bottom of the screen.

Usage Guide

1. Import the Component

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

import { LiquidCurtainTransition } from "@/components/creative/liquid-curtain-transition";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { LiquidCurtainTransition } from "@/components/creative/liquid-curtain-transition";

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