April 9, 2026IntermediateCursor 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.
Preview











Source
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>
);
}
Dependencies
gsap