PRO

Catalog Swap Gallery

A documentary catalog with a scrolling thumbnail rail. Picking a thumbnail throws the current project out (title, line-split synopsis and credits lift and clip away while the featured still scales down and drops) then builds the next one in from below over a blurred backdrop that cross-fades to the new frame. GSAP with SplitText.

Component

Welcome to BLANK

We are a full-service creative agency delivering innovative design solutions for businesses around the globe.

Beyond The Summit

Join a team of elite mountaineers as they attempt to conquer K2 in winter, a feat never before accomplished. This breathtaking documentary captures the raw beauty of the Karakoram and the indomitable human spirit.

Credits

Director: Alex Honnold

Cinematographer: Jimmy Chin

Beyond The Summit
Beyond The Summit
Olympian's Journey
Velocity
Court of Dreams
The Last Whistle
Waves of Change
Chess Prodigy
Marathon of Mind
Urban Evolution
The Referee's Call
eSports Revolution
The Ironman Story
Dance of Matador
Way of the Warrior
Breaking the Ice
Install
npx shadcn@latest add https://ui.aryank.space/r/catalog-swap-gallery.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
itemsCatalogItem[]Fifteen BLANK documentary entriesTitle, synopsis, director, and cinematographer per entry.
imagesstring[]Fifteen BLANK-hosted stillsStill for each entry; index-aligned to items.
brand / navLinks / introstring / string[] / stringBLANK / Home, Work, Contact / standing blurbStudio wordmark, navigation links, and the left-column copy.
Customize
itemstext

Title, synopsis, director, and cinematographer per entry.

imagesasset-url

Still for each catalog entry (thumbnail and feature).

brand / navLinks / introtext

Studio wordmark, navigation, and the standing blurb.

Dependencies
gsap