PRO

Filter Scrub Gallery

A horizontal wall of image cards panned by pointer position with a lerped offset, plus a column of category filters that expand matching cards from a sliver to full width with a custom hop ease and collapse the rest, re-measuring the scrub range each time. GSAP with CustomEase, no other dependencies.

Component
Project 1
Project 2
Project 3
Project 4
Project 5
Project 6
Project 7
Project 8
Project 9
Project 10
Project 11
Project 12
Project 13
Project 14
Project 15
Project 16
Project 17
Project 18
Project 19
Project 20
Project 21
Project 22
Project 23
Project 24
Project 25
Project 26
Project 27
Project 28
Project 29
Project 30
Project 31
Project 32
Project 33
Project 34
Project 35
Project 36
Project 37
Project 38
Project 39
Project 40
Project 41
Project 42
Project 43
Project 44
Project 45
Project 46
Project 47
Project 48
Project 49
Project 50
Install
npx shadcn@latest add @compronents/filter-scrub-gallery

Installs from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.

Files
Checking access…
API
PropTypeDefaultDescription
filtersGalleryFilter[]Six BLANK categoriesEach filter's label and the 1-based item indices it shows.
imagesstring[]Fifty BLANK-hosted imagesCard image pool; item index maps to filter membership.
brand / navLinksstring / string[]BLANK / Services, Work, ContactWordmark and center navigation links.
Customize
filterstext

Category labels and the item indices each one shows.

imagesasset-url

The pool of card images (index-aligned to the filters).

brand / navLinkstext

Wordmark and the center navigation links.

Dependencies
gsap