# Hero wall rail > A masthead over a rack of twelve large posters standing in upright columns: a short headline in the wide column, a lede and one action in the narrow one, a full-width hairline between them, and below it a band the page scrolls straight past while the columns slide by each other. Includes replaceable example images, and hands off to a signed-and-shipped line under the band. Needs the companion plugin, which comes with your access; without it the masthead is followed by the twelve posters as a plain stack. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/hero-wall-rail.html Section: Hero Access: Included in Pattern Paste access. Needs: Requires a block theme on WordPress 6.7 to 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. Also needs: Install the Pattern Paste plugin first, then paste. This section embeds one of its blocks: the plugin comes with your access, downloads from your account, and takes a minute. Paste without it and the section arrives as a plain stack of your headings, text and images, with none of the motion. Blocks: button, buttons, column, columns, group, heading, image, paragraph, patternpaste/iso-wall, separator Keywords: hero, rail, rack, posters, columns, gallery, scroll Promise: This variation embeds one of our blocks: install the companion plugin, then paste. --- ## The signature moment: posters sliding past each other in upright columns 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. ## Why the numbers are what they are - **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. ## What it inherits from your theme - **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. ## What it decides for itself - **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. ## What is not proved - **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. ## What needs the plugin 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. ## What you change first 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. 6. **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. ## Included images 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](/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment.