Hero wall rail

The same block as hero-wall, used as a poster rack instead of an isometric plane. A two-column masthead stands on a full-width hairline; under it a band of twelve large portrait posters runs in upright columns that slide past each other as the reader scrolls by, and a hand-off row closes the section off.

The spin is set to zero and the lean is shallow, so the lanes stop being diagonals and become columns: four of them authored, cloned sideways to fill the frame, each a stack of portrait posters running vertically. Adjacent columns travel in opposite directions, so the moment the section is on screen one column is climbing while the one beside it falls, and the reader is looking at a rack that turns rather than at a plane that recedes. Nothing is pinned: the band keeps its own height and the page scrolls straight past it, so the slide is something the section does while you pass rather than something it stops you to show.

The composition is a density collision, and it survives colourlessness because neither half depends on a hue: tight, left-aligned type in two mismatched columns above the rule; twelve large, evenly-pitched rectangles below it, at a scale that makes each one a poster rather than a thumbnail.

1. The twelve posters. Each is an ordinary group holding one word and an example photograph. Add one by duplicating a group, remove one by deleting it; the lanes follow at ceil(tiles / 3). Work in threes, so no column is left a poster short, and know that dropping to nine takes the rack to three lanes and magnifies the still fallback at 1920.
2. The twelve photographs. Every poster includes an image block with an example photograph with a 4:5 crop set; click each and choose from your media library, or use the block's own "Fill tiles from media library" and pick twelve at once.
3. The word. One word per poster, above the picture. It is the composition. Two will fit; a sentence will not, because a tile clips what does not fit inside it.
4. The masthead. Label, headline, lede, one button. The headline is set as display, so four or five words hold the scale best.
5. Motion. The block's inspector has the switch, "Animate this block", and the lean, spin, speed, drift, raise and lift dials under it. Off, the section is the still rack with nothing missing.

1. The heading levels. The masthead is an h1 and every tile's title is an h3, because a wall of tiles is not a wall of sections. Where this lands on your page is yours to check: if the page already has an h1, or the section sits under an h2, change the masthead's level in the block toolbar so the outline reads in order.

• Typeface. Nothing states a family: the headline, the poster words, the lede and the button take whatever your theme sets.
• Palette. The band is your base with your contrast as its text, the one pair every block theme has to keep legible. The two labels lead on role-label, which only our theme tool defines, and fall through to contrast everywhere else. No accent slug appears in any rung.
• The posters' surfaces. The block states no colour of its own: every tile face, hairline, shadow and the sheen are currentColor mixed down, so the rack follows your text colour, and the frame's ground is the band's.
• The hairline. core/separator, so it draws in currentColor and follows the type.
• Spacing. Band padding, the gap between the columns and the space above each poster word are core spacing presets.

• The headline is display, not a ladder rung. clamp(2.5rem, 5.6vw, 4.75rem): its size is the composition, tuned against the posters under it, so it does not take xx-large. It is still an h1, because it is the section's hierarchy however large it is drawn.
• The poster word is a ladder rung, large as a chain with a tuned clamp() behind it, which is what a card title takes.
• The lede takes medium as a chain, at 1.55 leading.
• The two labels are display type: uppercase, tracked at 0.24em, floored at 13px because they are incidental marks and not reading copy. Both are paragraphs, never headings, because the hierarchy comes from size and the mark, not from case.
• Contrast is the contrast-on-base pair everywhere, so every text run is judged at 4.5:1; the headline is the only run large enough for 3:1 and it does not need the allowance.
• The split. 62/38 above core's 782px breakpoint, both columns aligned to their bottoms so they share a baseline and nothing else; below it the lede stacks under the headline and the band spans the phone.
• The hand-off row. A label and one line, in the block's own gutter rather than the band's measure, so the row lines up with the masthead above it. It sits AFTER the block, which is the only place a row below an unpinned frame can go: the block's introduction slot renders above the frame.

• Twelve tiles is four lanes of three, and that is arithmetic. The block lays ceil(tiles / 3) lanes clamped into three to seven, so twelve is four lanes with no lane short. Four is also what makes the STILL rack fit its band: at rest the plane is magnified to cover the frame's width, which with the spin at zero is frame width / (lanes * (card + gap)), so the resting rack shows exactly as many columns as there are lanes however wide the page is. Nine tiles is three lanes and 1.9x at 1920, which draws a 440px card about 800px tall in a 640px band and crops the row; twelve is four lanes and 1.43x, which draws it 610px tall and fits a whole poster inside the band. Add or remove posters in threes and the rack stays level.
• patternpasteSpin 0, patternpasteTilt 14. Zero spin is what makes the lanes vertical. The shallow lean keeps the depth cue (a poster you point at still comes forward) without laying the rack down: at 48 degrees the posters are a floor.
• patternpastePin false, patternpasteHeight 640. A rack is furniture in the page, not a station the page stops at. With no pin there is no ScrollTrigger, nothing is ever position: fixed, and the band the reader saw before the script landed is the band they keep, because patternpasteHeight is written into both halves of the block's frame solve.
• patternpasteCardWidth 320, patternpasteCardHeight 440. A poster is portrait and large. The image inside each tile is set to 4:5, which at the card's 288px of inner width comes to 360px and leaves the word above it uncut.
• The word sits ABOVE the picture, which is a measurement rather than a taste. The frame clips a tile at its own edge, so whichever end of the tile falls outside the band is the end that goes. With the word under the picture the contact sheet showed a row of posters captioned in half-glyphs at 1920, at the three-lane magnification this pattern no longer runs at; above it, the label is the first thing inside the tile and it survives any crop the band makes.
• patternpasteDrift 30. A shade over the block's own 26: the rack has to be turning before anyone scrolls, or the first thing a visitor sees is a still grid.
• The raise and the pull are left on, at the block's own numbers. They are the reader pointing at a poster, and they are what a rack is for.

• The resting magnification is a function of the tile count, and only four lanes clear 1920. Four lanes is 1.43x at 1920 and a whole poster inside the band; three lanes is 1.9x and a cropped row. A buyer who deletes down to nine posters gets the cropped row back, in the still fallback only: with the script running the plane sits at 1.0 and the block clones lanes sideways, so a reader at 1920 sees six columns of 320px posters at their authored size whatever the tile count.
• The live rack is measured, not looked at. check-motion judges it as a field (no trigger, no spacer, nothing fixed, a frame that did not change height, lanes running on time, wrapping, counter-travelling, reverting clean), and every one of those passed. The contact sheet is the resting state by design, so nobody has yet LOOKED at the columns sliding.

This pattern embeds patternpaste/iso-wall, a dynamic block registered by the companion plugin, which comes with your access. Install it before pasting, or the block shows the missing-block placeholder in the editor. On a live page with the plugin deactivated the front end still shows the label, the headline, the lede, the button, the rule, all twelve posters and the hand-off row as a plain stack of core blocks; only the frame, its perspective and its motion go. Nothing you typed lives in the block itself. A visitor who has asked for reduced motion gets the still rack with every poster in it.

The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image or cover and choose Replace to use your own Media Library files. See image credits for the sources and licenses. Pasting an image URL does not import a Media Library attachment.