Horizontal Scroll Gallery

Create a horizontally scrolling gallery section. As the user scrolls vertically, the content should translate horizontally, revealing a series of tall portrait cards with images and captions. Use CSS sticky positioning and transform based on scroll progress (no heavy animation libraries). Each card should have a slight rotation and overlapping layout for editorial depth. Use Tailwind CSS. The images can be placeholder divs with muted colors.

创建一个水平滚动画廊区域。用户垂直滚动时，内容水平移动，展示一系列带图片和标题的高竖版卡片。使用 CSS sticky 定位和基于滚动进度的 transform（不使用大型动画库）。每张卡片应有轻微旋转和重叠布局，营造编辑深度。使用 Tailwind CSS。图片可用柔和色彩的占位 div。

Overview

A scroll-driven horizontal gallery that breaks the vertical rhythm of a typical landing page. Inspired by editorial lookbooks and award-winning portfolio sites.

Features

• Vertical scroll drives horizontal movement
• Sticky container
• Tall portrait cards
• Overlapping, slightly rotated layout
• Image + caption per card
• CSS scroll-linked transform

Usage

Use for portfolios, case studies, photography sites, or product collections.

Customization

Modify the prompt to:

• Add scale animation as cards enter center
• Use WebGL distortion on images
• Add progress indicator
• Switch to horizontal drag on mobile