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

Go fullscreen to customize props

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.

Props

A full-screen, scroll- and touch-driven page transition. An S-curve liquid wave sweeps across the screen in cycles (top-to-bottom, left-to-right, bottom-to-top, right-to-left), seamlessly swapping pages behind a solid curtain. Built with zero dependencies using vanilla requestAnimationFrame and high-performance SVG path manipulation.

<LiquidTransition />

A full-screen container that intercepts scroll/touch inputs to animate page transitions.

Prop	Type	Default	Description
`pages*`	`PageData[]`	`—`	An array of page data objects defining the content and colors for each screen transition.

<PageData />

type

Shape of the slide data objects passed in the pages prop.

Prop	Type	Default	Description
`tag*`	`string`	`—`	Small uppercase category tag/label displayed above the main title.
`title*`	`string`	`—`	Main header text. Supports newlines.
`subtitle*`	`string`	`—`	Description or supporting text paragraph below the title.
`bgColor*`	`string`	`—`	Hex or CSS color string for the page background.
`textColor*`	`string`	`—`	Hex or CSS color string for the page text.
`transitionColor`	`string`	`—`	Hex or CSS color string for the fullscreen SVG wave curtain transition. Falls back to '#0e0e11'.

Examples

Three-Slide PresentationA standard setup transitioning between dark, light, and neon-styled screens.

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

const pages: PageData[] = [
  {
    tag: "PROLOGUE",
    title: "Liquid Wave\nTransition",
    subtitle: "Scroll down or swipe to trigger the fullscreen liquid curtain wave sweep.",
    bgColor: "#0c0c0e",
    textColor: "#a855f7",
    transitionColor: "#4c1d95"
  },
  {
    tag: "AESTHETIC",
    title: "Peeling Wave\nCurtain",
    subtitle: "Built entirely with React and vanilla Canvas/SVG paths for high-performance mobile transitions.",
    bgColor: "#f4f4f5",
    textColor: "#18181b",
    transitionColor: "#115e59"
  },
  {
    tag: "PERFORMANCE",
    title: "Zero Overhead\nPhysics",
    subtitle: "No third-party animation libraries. Uses a native requestAnimationFrame loop.",
    bgColor: "#0f172a",
    textColor: "#38bdf8",
    transitionColor: "#075985"
  }
];

export default function Demo() {
  return <LiquidTransition pages={pages} />;
}

Respects user accessibility settings. If prefers-reduced-motion is active, it skips the liquid wave curtain sweep and swaps screens instantly.

Boundary locked. Scrolling past the first or last slide will not loop, preserving page order.

Utilizes direct DOM manipulation via refs to update the SVG path d attribute, bypassing React re-renders during the wave animation for fluid 60fps sweeps.

Source

export { default as LiquidTransition } from "./LiquidTransition";
export type { LiquidTransitionProps, PageData } from "./LiquidTransition";

View on GitHub →Report an issue