Scroll Reveal Cards

Live preview — fully interactive

The prompt

Build a scroll-reveal card grid where cards animate in as they enter the viewport.

## Structure
- Hero panel (100vh, centered): uppercase eyebrow, large two-line heading, subtext, animated scroll-hint icon
- Below the hero: a responsive grid — 3 columns on desktop, 2 under 900px

Full prompt (1877 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; }
  .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content:

Complete self-contained HTML unlocks after purchase

About this effect

The workhorse of landing pages: a responsive card grid whose items reveal themselves as they enter the viewport — rising 40px, fading in, and settling from scale 0.96 to 1 with a 0.08s stagger per row. Built with GSAP ScrollTrigger.batch so rows entering together animate as a group, and each card animates only once. Drop it into feature sections, pricing grids, or blog listings.