Hero wall rail, Pattern Paste Canonical: https://patternpaste.com/pattern/hero-wall-rail.html Interactive (https://patternpaste.com/interactive/) Isometric wall (https://patternpaste.com/interactive/iso-wall/) Catalogue access Needs plugin (https://patternpaste.com/docs/install-pattern-paste/) # 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. Start here ## What you change first - The twelve posters. Each is an ordinary group holding one word and an example photograph. - 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. - The word. One word per poster, above the picture. - The masthead. Label, headline, lede, one button. - Motion. The block's inspector has the switch, "Animate this block", and the lean, spin, speed, drift, raise and lift dials under it. - 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. 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. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - The posters' surfaces. - The hairline. - Spacing. ### Set by this pattern - The headline is display, not a ladder rung. - The poster word is a ladder rung - The lede takes medium - The two labels are display type - Contrast - The split. - The hand-off row. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview 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 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. Make it yoursVariations and the edits to make first ### What you change first - 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. - 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. - 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. - The masthead. Label, headline, lede, one button. The headline is set as display, so four or five words hold the scale best. - 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. - 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. Theme behaviourInheritance, fixed decisions and contrast ### 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. Technical notesBlock mechanics, responsive behaviour and constraints ### 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 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. ### 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 (https://patternpaste.com/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment. 18KB of core-block markup, 10 blocks (button, buttons, column, columns, group, heading, image, paragraph, patternpaste/iso-wall, separator), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Start free trial to copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Use it for - Poster, cover and sleeve showcases - Book, album and film catalogues - Fashion and editorial lookbooks - Case-study racks for studios - Print and merchandise shop openers #### Pair with Features Feature alternating Four feature rows, each a 4:3 frame set against its copy, with the seam flipping side to side down the page. The hairline that closes each row runs only under the text half, so the rule changes sides with the picture and the section never squares up on one edge. Example images are included and can be replaced in the editor. States no colour and no font of its own. (https://patternpaste.com/pattern/feature-alternating.html)Stats Stat callout A high-impact framed spotlight plaque: a central marquee figure and bold executive statement sit above a ruled three-part corroboration shelf enclosed within the same 1px currentColor architectural frame. States no colour and no font of its own. (https://patternpaste.com/pattern/stat-callout.html)Compare Compact comparison rows A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-compact-rows.html) #### Before you paste 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. How to install it (https://patternpaste.com/docs/install-pattern-paste/). 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. How we test patterns (https://patternpaste.com/how-we-test/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). #### What's inside Blocks button, buttons, column, columns, group, heading, image, paragraph, patternpaste/iso-wall, separator Core only NO Chains 38, deepest 3 rungs currentColor no color base, black, contrast, role-label, white spacing 20, 30, 40, 50, 60 font-size large, medium Continue exploring ## Next in Interactive Explore all 36 interactive patterns (https://patternpaste.com/interactive/)Also in Hero (https://patternpaste.com/patterns/hero/) Shot in Twenty Twenty-Five Hero Hero Needs plugin ### Hero wall mosaic A hero that is nothing but photographs: a short masthead, one line and one action, then twenty-eight square pictures laid edge to edge on a steeply tilted plane that holds the screen for half a scroll while the lanes run past. 7 blocks Open preview (https://patternpaste.com/pattern/hero-wall-mosaic.html) Shot in Twenty Twenty-Five Hero Hero Needs plugin ### Hero wall split A two-column hero: on one side a label, a display headline, a paragraph and two buttons as ordinary core blocks; on the other a contained isometric panel of forty-two picture tiles, 620px tall and exactly the column's width, that drifts on its own clock and follows the reader's scroll lightly. 9 blocks Open preview (https://patternpaste.com/pattern/hero-wall-split.html) Shot in Twenty Twenty-Five Header Header Needs plugin ### Announcement marquee ticker A one-line announcement bar for the very top of a page: ten labelled notices, each a bold word and a short line, run slowly across a thin band on your contrast colour with a drawn dot between them, above a hand-off row that stands in for your header and opening section. 4 blocks Open preview (https://patternpaste.com/pattern/announcement-marquee-ticker.html)