Pond Glide

Three cards sit in a tilted stack inside slowly turning orbit rings, set on theme surfaces with serif quotes and a mono seal. Drag left or tap for the next card, drag right for the previous one, or use the arrow keys. Each image is overlaid with a moving grid of hidden tiles that your cursor wipes away, and each new card inks its quote in word by word. A WebGL swirl tinted from the background and primary, with cursor ripples, fills the scene. Default images are koi photos from Wikimedia Commons (CC BY-SA); pass your own through cards. It re-reads the theme when the mode or palette changes, pauses off screen and stays still when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add pond-glide

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/pond-glide.tsx.
3. Paste the code.

Usage

import { PondGlide } from "@/components/ui/pond-glide";

export default function Example() {
  return (
    <div className="relative h-[600px] w-full overflow-hidden">
      <PondGlide />
    </div>
  );
}

Props