WebberUI
繁體中文

Horizontal Scroll Showcase

Gallery where vertical scrolling drives horizontal travel through the work.

ProImmersiveimmersive6 sections
See it liveSee the plans

Install

npx webberui@latest add "https://webberui.com/r/horizontal-scroll-showcase.en.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. 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. 2

    Studio Stats Band

    Four columns of oversized figures for shipped projects, international awards, years of partnership and core team size.

    stats
  3. 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. 4

    Horizontal Work Reel

    The pinned centrepiece: vertical scrolling drives six large project cards sideways while a progress indicator keeps pace.

    gallery
  5. 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. 6

    Studio Footer

    Brand blurb, contact icons and three link columns for services, studio and resources.

    footer

Horizontal Scroll Showcase is a React horizontal scroll portfolio template: scrolling down moves a row of work sideways. It is built with Next.js App Router, Tailwind CSS and Motion, using `useScroll` to track progress and `useTransform` to turn it into horizontal movement.

When to use it

  • Selected-work page for a design or motion studio
  • A yearly portfolio for an individual creator
  • Single-page brand case studies or project retrospectives
  • Work pages where sideways browsing replaces a standard grid

What to change after installing

  1. Replace the `WORKS` array at the top of page.tsx with your own projects: title, client, year, discipline and award. Each card's gradient comes from its `from`, `via` and `to` fields.
  2. Cards currently draw geometric shapes with `WorkGlyph` and use no images; to show screenshots, swap in your own images inside `WorkCard`.
  3. If you add or remove works, adjust the end value of the `useTransform` offset in `HorizontalGallery` (currently `-84vw`) so the last card stops inside the viewport.
  4. Page colors live in the `INK`, `INK_SOFT`, `HAZE` and `CREAM` constants at the top of the file.
  5. Rewrite the `Hero` headline and the `Outro` contact copy, and replace the `#` links in the nav and footer with your own contact and social URLs.

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 →