HeroGallery

Multi-image hero arrangement — grid or asymmetric collage with entrance reveal.

stable display #hero#grid#image#layout

Loading preview…

Usage

- Use as the visual anchor for landing/about pages. - 3-5 images optimal — fewer feels sparse, more is busy. - Pair with editorial typography (Space Grotesk display) for the headline that sits beside the gallery.

Do / Don't

- **Do** use varied image content — texture, person, product, environment. - **Do** keep aspect ratios within the same family (don't mix 1:1 with 16:9 dramatically). - **Don't** use as a generic image grid (use `ImageGrid` for that). - **Don't** put text inside the gallery — let images carry visual weight, headline lives outside.

Tokens

motion.ease-out-quart — cubic-bezier(0.165, 0.84, 0.44, 1)
motion.duration-base — 300ms
space.4 — 1rem
radius.md — 8px

ProjectCard

A11y

Each image requires alt text. Decorative entrance animation respects prefers-reduced-motion. Grid is responsive — collapses to single column on mobile.

Source

src/components/HeroGallery.tsx

Live playground