Horizontal Scroll Showcase
Gallery where vertical scrolling drives horizontal travel through the work.
Install
npx shadcn@latest add "https://webberui.com/r/horizontal-scroll-showcase.json?t=<install token>"The whole page lands in app/templates/horizontal-scroll-showcase/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.
Sections it ships with
Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.
- 1
Navbar and Opening Hero
A minimal navbar over an oversized 2026 backdrop numeral and a parallax headline, opening the horizontally narrated selected-works reel.
hero - 2
Studio Stats Band
Four columns of oversized figures for shipped projects, international awards, years of partnership and core team size.
stats - 3
Horizontal Scroll Primer
Lead-in copy before the horizontal stage, explaining how vertical scrolling maps onto sideways travel along the row of work.
content - 4
Horizontal Work Reel
The pinned centrepiece: vertical scrolling drives six large project cards sideways while a progress indicator keeps pace.
gallery - 5
Let's Talk Closing
A glow-lit closing block with two buttons — book a project conversation, or download the full portfolio PDF.
cta - 6
Studio Footer
Brand blurb, contact icons and three link columns for services, studio and resources.
footer
What you get is source code
Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.
Browse the other 103 templates →