Horizontal Scroll Gallery — mcpskills.net

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