Liquid Transition

v1.0.0
FreeInteractionScrollReduced MotionTailwind

A full-screen scroll- and swipe-driven page transition: a liquid S-curve wave curtain sweeps across the screen, swaps the content behind the cover, then peels away to reveal the next screen. Directional per step, boundary-locked (no looping), wheel and touch driven. Dependency-free.

Liquid Transition

Installation

npx vectorvesper add liquid-transition

Run npx vectorvesper init once first to set up your project.

Usage

Import

import { LiquidTransition } from "@/components/vv/liquid-transition";

Usage

<LiquidTransition />

Client-only component — disable SSR

This component requires browser APIs and must be rendered client-side only.

import dynamic from "next/dynamic";

const LiquidTransition = dynamic(
  () => import("@/components/vv/liquid-transition").then((m) => m.LiquidTransition),
  { ssr: false }
);
This component respects prefers-reduced-motion and provides a graceful fallback.
Tailwind CSS must be configured in your project for styles to apply correctly.

Source

export { default as LiquidTransition } from "./LiquidTransition";
export type { LiquidTransitionProps, PageData } from "./LiquidTransition";
View on GitHub →Report an issue