Drift Gallery

A WebGL card slider (Three.js) for a marketing section: a horizontal row of portrait product cards drifting on autoplay across a lower band, each image shader-fit to fill its card. Drag to throw the row (Draggable + Inertia) or let it drift; hovering a card lifts it while the cursor magnetically parts its neighbours, and the centred card syncs a live detail panel (index, title, category, code). A filmic grade rides the whole frame - chromatic aberration on motion, grain and vignette - and it stays responsive 320-1920 with a touch-friendly focal-card layout on mobile. VANTA OL-26 editorial-sports demo brand.

A Good Fella original.

HTML
React
Vue

advanced

Loading preview...

On mobile

Can't copy on a phone? Get the free Starter Pack instead.

Three production-grade components in React, Vue and HTML/CSS/JS, in your inbox, ready when you're back at your desk.

Framework guides

A Good Fella original.

Where this component came from.

We built it for the library deliberately, not against a client brief, and kept it once it earned its place here.

Required

What you'll need.

Install

GSAP
three
Draggable
InertiaPlugin

Concepts

Attributes, tips, use cases and full code are part of access.

The preview and provenance stay public. Tune-it docs, the data-anm-* attribute table, real-world use cases and the copy-ready code unlock the moment you sign in.

Get accessFrom EUR 199 / yrAlready have access? Sign in

drinkbodyarmor.com

Circle Fill Button

button

Studio Original

Icon Button

button

Studio Original

Mesh Gradient

shader

Where this component came from.

What you'll need.

Related components.

Circle Fill Button

Icon Button

Mesh Gradient