Staggered Image Grid
An asymmetric image grid with staggered entrance animation on scroll.
Adjust the preview
Every choice updates the preview and the wording below.
Layout
Entrance
Stagger Delay
Corners
Hover
Your prompt
Highlighted values follow your choices — click one to write your own.
Create an asymmetric image grid with 3-column grid with mixed span sizes layout. Images animate in with a scale up from smaller staggered entrance on scroll, each delayed by 100ms. Each image has rounded 8px corners and slight scale with brighter border hover effect. Use CSS Grid with varying col-span and row-span for the asymmetric layout.
Paste it into Claude, Cursor, or v0 along with the context for your project.