Horizontal Scroll Gallery

Live preview — fully interactive

The prompt

Build a pinned horizontal-scroll gallery driven by normal vertical scrolling.

## Structure
- Intro panel (100vh, centered column): small uppercase eyebrow label, large two-line heading, subtext, and an animated scroll-hint mouse icon (CSS keyframes, a dot sliding down inside an

Full prompt (2248 chars) unlocks after purchase

The code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #08080d; color: #f2f2f7; font-family: 'Inter', system-ui, sans-serif; overflow-x: hidden; }
  .panel { min-height: 100vh; display: flex; flex-direction: column; align-items: cent

Complete self-contained HTML unlocks after purchase

About this effect

A portfolio-style pinned section: the page scrolls vertically through a 300vh-tall container while a sticky track of five cards translates horizontally, scrubbed 1:1 to scroll position with GSAP ScrollTrigger. A thin progress bar tracks how far you are through the gallery. Perfect for project showcases, product lineups, or any storytelling section that needs a break from vertical rhythm.