Horizontal Scroll Gallery

Vertical scroll drives horizontal movement. Content panels slide left as user scrolls down, creating a cinematic horizontal gallery experience.

scrollhorizontalgallerysticky

Installation

bash

# Copy horizontal-scroll.tsx to your project
cp components/ui/horizontal-scroll.tsx your-project/components/ui/horizontal-scroll.tsx

How to use

tsx

import { HorizontalScroll } from "@/components/ui/horizontal-scroll";

tsx

<HorizontalScroll>
  {[
    <div className="w-full max-w-2xl"><h2>Slide 1</h2></div>,
    <div className="w-full max-w-2xl"><h2>Slide 2</h2></div>,
    <div className="w-full max-w-2xl"><h2>Slide 3</h2></div>,
  ]}
</HorizontalScroll>

Dependencies

framer-motion

Exports

HorizontalScroll

File

components/ui/horizontal-scroll.tsx

Preview

Scroll down to navigate horizontally →

01 / 04

Design System

Start with a cohesive design language. Define your colors, typography, spacing, and component patterns that scale with your product.

02 / 04

Component Library

Build production-ready components with TypeScript, Framer Motion, and Tailwind CSS. Every piece is tested and documented.

03 / 04

Ship to Production

Deploy with confidence. Each component is optimized for performance, accessibility, and cross-browser compatibility.

04 / 04

Iterate & Improve

Continuously refine your product with community feedback, version updates, and new component releases.