Drift Gallery in React.
A row of product cards drifting sideways on their own that you can grab and throw, and they keep going before they settle. Grab a card and its neighbours part to make room, with a filmic grain and colour wash over the whole thing that reacts to how hard you fling it.
Install Drift Gallery in your React project
Drift Gallery ships as a copy-paste React component. The only dependencies are GSAP and the official @gsap/react adapter for the useGSAP hook. Both work in Next.js (App Router and Pages), Vite, Remix, and Create React App.
Where it goes in your React app
Drift Gallery is a leaf-level interactive component, so it needs to render on the client. In a Next.js App Router project, add the 'use client' directive at the top of the file (it's already there in the component you copy).
The component is self-contained: it manages its own refs, useGSAP scope, and cleanup. Mount it inside any Server Component, Client Component, or page. It does not require a provider or wrapper.
If your project uses TypeScript, the component is typed - the props it accepts match the data-anm-* attributes documented on the main detail page.
'use client' + a single mount effect
three is a dynamic import
Props are read once at mount
Common questions
- Does Drift Gallery work in Next.js App Router?
- Yes. The component includes the
'use client'directive and usesuseGSAPfor proper cleanup across Server Component re-renders. Drop it into any page or component insideapp/. - Does Drift Gallery work with Server Components?
- The component itself runs on the client (it needs the DOM for GSAP), but the parent page can be a Server Component. Import the component normally; React's "use client" boundary handles the rest. No additional configuration needed.
- Does Drift Gallery work in React 18 and React 19?
- Yes. The component uses
useGSAPwhich is React-version-agnostic. It also handles Strict Mode double-invocation correctly viagsap.contextscoping. - Will the animation flash before hydration?
- Brief flash is possible on first paint because GSAP needs the client to initialize. The component sets the parked ("starting") state via
gsap.seton mount before the first frame, so any visible jump is sub-frame and rarely perceived. For above-the-fold use, pair with a CSS opacity:0 default that the component clears on mount.
Copy the React code
The full React implementation lives on the component page, with the live demo, every format side by side, and the ability to edit and re-run it in the browser.
Open Drift Gallery