Stacked Cards Spread

Polaroid-style cards rest in one stack and slide out side by side into a single row under the pointer, the card beneath it lifting.

About this tool

A deck of white polaroid-style cards rests stacked in the middle of a dark stage. Move the pointer over it and the cards slide out on a spring into one horizontal row, the inner cards first; the card under the pointer lifts and grows, and moving along the row never collapses it. Leave and the row folds back into the stack, outer cards first, and only the top card keeps its shadow. Travelling cards lean into their motion and rise a little, like photos slid across a table. On touch screens a tap opens and closes the deck, and from the keyboard the deck is a button that Enter or Space toggles. Every load draws a new random row from the HorizonX image stock, alternating generated photos and graphic pieces, each shown whole and never cropped, or a fixed draw keeps the same row. A narrow stage shows the centred part of the row, and reduced motion moves the cards without animation. Background, photos, how many cards, the draw, card size, gap, corner radius, captions, card and caption colours, spring speed, hover lift and lean are all editable. The export is one HTML file with the default pictures embedded.

In collections: Web Image Galleries & Photo Grid Layouts React Carousels & Image Galleries

Guide: React Carousel: Build One With CSS Scroll Snap or a Library Scroll-Driven and Auto-Drifting Galleries: Choose the Right Motion HTML Marquee Is Deprecated: How to Build a Modern Marquee

3D & Perspective · HTML / CSS / JS All tools

Cards

Cards in the row

Draw (0 = new every load)

Card size %

Captions

on off

Card

Caption

Motion

Spring speed %

Hover lift %

Lean in motion %

Stage

Background

#ffffff