Print Pile Gallery

1. Add to your HTML <head>:

In your downloadThe working code for this step, in index.html.

2. Add the gallery to your <body>:

In your downloadThe working code for this step, in index.html.

3. Add before the closing </body> tag:

In your downloadThe working code for this step, in index.html.

The script finds every [data-print-pile], sizes the prints to the table and the number of photographs, and lays them out as a pile. No GSAP plugins are needed.

What the effect needs from your markup:

• A root with data-print-pile, containing .print-pile__table (the surface the prints live on) and inside it .print-pile__list, a list of .print-pile__item elements.
• Each item holds one figure.print with a .print__front wrapping an <img>, and a figcaption.print__back. Give the image its real width and height: the script reads them to shape a portrait or landscape print. The image alt, followed by the caption, is what screen readers hear for the print; the caption is also announced when it is turned over.
• For the close-up, give each <img> a data-full attribute naming a larger copy of the photograph (the demo uses 1400px files). It is only fetched when that print is opened; the small file shows straight away and the large one fades in over it. Without data-full the close-up uses the image you already have.
• .print__date and .print__note inside the caption are optional. Anything you put in the figcaption appears on the back.
• Any button inside the root with data-pile-action="tidy" or data-pile-action="scatter" becomes a control, and its aria-pressed follows the current arrangement. The control row is optional; T and S work without it.

What is only the demo's styling:

• The colours, the vignette on the table, the Archivo control row and the hint line. Change or delete them freely.
• Caveat on the backs, the biro blue, the paper tones and the printed Nº 07 lab number (a CSS counter in .print__back::before).
• The photographs in assets/img/ are demo images baked for this product. Replace them with your own.

CSS the effect depends on (all in the "EFFECT" blocks of style.css):

• .print-pile__table needs a real height. In the demo it fills the space under the control row (flex: 1; min-height: 0); in your page give it a height such as 70vh, or the pile has nowhere to lie.
• .print-pile.is-live rules switch the list to absolute positioning, put each item at the table's top-left corner, set touch-action: none on prints (and pan-y when the tidy grid scrolls) and build the two faces with backface-visibility: hidden. Keep them, or the prints will stack, scroll the page under a finger or show both faces.
• .has-js .print-pile:not(.is-live) .print-pile__list { visibility: hidden; } hides the list for the moment between first paint and the script placing the prints. The script removes .has-js if GSAP fails to load, which brings the plain grid back.
• The script owns transform, z-index, width, height and font-size on every .print-pile__item. Style the print through .print__front and .print__back, not by transforming the item. The writing on the back is sized in em, so it scales with the print.
• .print-pile__lift is a span the script adds to each item for the lifted shadow. Restyle its box-shadow to taste.
• The close-up is built by the script inside the root (.print-pile__viewer), so the root needs position: relative and the viewer covers the whole gallery. Its "EFFECT: the close-up viewer" block sets the shade, the paper border (--view-border, set by the script) and the clipping lens the zoom happens in; restyle the caption and the four buttons freely. The rule marked "DEMO ONLY" just keeps the buttons clear of the demo page's corner badge: delete it.

• Keyboard: every print is a focusable button. Tab moves through the prints in list order, arrow keys nudge the focused print (Shift for bigger steps), Enter or Space turns it over, Z lifts it up for a close look, Escape turns every print back. In the close-up, Left and Right move to the previous and next print, Z or + zooms, minus fits, Tab cycles its four buttons and Escape puts the print back, returning focus to it. T tidies and S scatters while focus is in the gallery, and the Tidy and Scatter buttons do the same. A focused print rises to the top of the pile so its outline is never buried.
• Close-up: a modal dialog with a caption giving the print's number, description and the writing on its back. Focus moves to its Close button and stays inside it until it closes.
• Screen readers: each print is named by its image alt followed by the writing on its back, and reports its turned-over state. A polite live region reads the back of each print as it turns over and announces Tidy and Scatter. The list order in the page never changes, however the pile is shuffled.
• Touch: one finger drags a print, a tap turns it over and a double tap opens the close-up. In the close-up a tap zooms, a drag looks around the zoomed print and a sideways swipe moves to the next one. Several prints can be dragged with several fingers. When the tidy grid is taller than the table, vertical swipes scroll it and sideways drags pick a print up. The page itself never scrolls under a print.
• Reduced motion: no throws, swings or flights. Prints still follow a dragged finger or pointer and stop where they are let go; Tidy, Scatter, turning a print over and the close-up happen at once behind a short fade. Changing the preference while the page is open rebuilds the gallery in the new mode.
• No JavaScript: the list is a wrapped grid of prints with their captions written underneath, scrolling inside the table.

The 44 photographs are art-directed derivatives (cropped, resized and lightly desaturated) of photos published under the Pexels License, baked into assets/img/ at 520px on the long edge. Ten are a second, upright crop of the same photo. assets/img-manifest.json records each source; edit it and run bun scripts/build-template-assets.ts print-pile-gallery to re-bake, or simply replace the files with your own and update the <img> dimensions.

Required:

• GSAP 3.12+ (the demo is pinned to 3.15.0)

Optional:

• None. No GSAP plugins and no smooth-scroll library; the gallery is pointer, touch and keyboard driven and does not use Lenis.

Fonts: Archivo (controls) and Caveat (the handwriting) from Google Fonts. Both are demo choices; the effect works with any face.