April 9, 2026/Intermediate/Cursor Effects

Floating Gallery

Three-layer parallax image gallery driven by mouse movement. Each plane moves at a different speed (1×, 0.5×, 0.25×) with lerp-based momentum decay. Requires a parent container with defined height.

import FloatingGallery from "./index.jsx";
import { floatingGallery } from "../demo-data.js";
import styles from "./demo.module.css";

export default function FloatingGalleryDemo() {
  return (
    <div className={styles.demo}>
      <FloatingGallery
        planes={floatingGallery.planes}
        easing={floatingGallery.easing}
        speed={floatingGallery.speed}
      />
      <p className={styles.label}>Move your mouse</p>
    </div>
  );
}
  • gsap

Related Components

4W AGO
Split Vignettecursor-effects
1MO AGO
Cursor Repel Textcursor-effects
3MO AGO
Cursor Hover Labelcursor-effects