Hero wall field, Pattern Paste Canonical: https://patternpaste.com/pattern/hero-wall-field.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 field A masthead over a band of drifting posters: a display headline, one line of lede and one action, then an edge-to-edge isometric field of twenty-eight picture tiles that is 520px of band and nothing more, its top and bottom faded out so the lanes read as running on past the section rather than stopping at a cut. The page never locks: the wall keeps its own time under the reader and they scroll straight past it, with a hand-off row on the far side to show where the section ends. Includes replaceable example images. Needs the companion plugin, which comes with your access; without it, or without motion, the masthead is followed by the twenty-eight posters as a plain stack. States no colour and no font of its own. Start here ## What you change first - The photographs. Every tile includes an image block with an example photograph with a 16:9 crop set; click each and choose from your media library. - The words. One word a tile, because a tile is read at an angle and a phrase ladders. - The band's height. patternpasteHeight in the block's inspector, 520 here. - The masthead. Headline, one line, one button. - Motion. The block's inspector has the switch, "Animate this block", the pin toggle that would turn this back into hero-wall's promise, and the tilt, spin, speed, drift, raise and lift dials. - 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 ## The page keeps scrolling; the wall keeps drifting under it A hero that takes the screen and holds it is a toll gate. This one takes a band. The frame is a stated 520px, it sits in the flow like a photograph, and the reader's scroll never once stops moving the page: what the scroll does instead is slide the plane a third as far as the reader travelled, on top of an idle drift that was already running before they arrived. So the section reads as something continuing rather than something staged, and the thing that makes it a hero is that the ground is alive while the type on it holds still. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - The wall's surfaces. - Spacing. ### Set by this pattern - The headline is display, not a ladder rung. - The lede is one line and under ninety-five characters on purpose. - The hand-off row is outside the block. - The depth, and why it is twenty-eight. - The motion. 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 A masthead standing on a band that never stops. Above: a display headline, one line of lede and one button. Below: an edge-to-edge isometric field of twenty-eight picture tiles, 520px of band and no more, that drifts on its own clock and follows the reader's travel lightly as they go past. The third composite in the catalogue, and the first to use patternpaste/iso-wall with no pin under it at all. ### The signature moment: the page keeps scrolling; the wall keeps drifting under it A hero that takes the screen and holds it is a toll gate. This one takes a band. The frame is a stated 520px, it sits in the flow like a photograph, and the reader's scroll never once stops moving the page: what the scroll does instead is slide the plane a third as far as the reader travelled, on top of an idle drift that was already running before they arrived. So the section reads as something continuing rather than something staged, and the thing that makes it a hero is that the ground is alive while the type on it holds still. The band's top and bottom are faded rather than cut (patternpasteFade), and that is the same argument in the frame itself: a hard edge says the wall ends here, and this wall does not end, it goes past. The fade is a MASK, so the edges go clear and it is the theme's own ground that comes through them; the block still states no colour, and the band reads the same way on a dark theme as a light one. It has to work standing still, and it does. With no script the plane still carries its rotateX/rotateZ from the stylesheet, so the band is a still isometric field of the same twenty-eight posters at the same 520px. With the plugin gone entirely the masthead is followed by the twenty-eight posters as a plain stack of images and headings, then the hand-off row, in the order they were typed. ### Why this is not hero-wall hero-wall pins. It takes a whole screen, holds it, and runs the lanes off the reader's scroll until the wall has turned over; the section is an event the reader is put through. This one is the opposite promise on the same block: patternpastePin is false, so no ScrollTrigger is built, nothing is ever position: fixed, no pin-spacer is made, and the band the reader saw before the script landed is the band they keep. Three consequences follow from that and are the composition, not settings: - The band is stated, not taken. patternpasteHeight is 520, so the frame is 520px at every width and at every scroll position. A pinned wall's live frame is one screen because a screen is what the pin holds; a field that took a screen would be a hero that behaves like a pin without admitting it. - The masthead is the whole intro slot and the wall is directly under it. There is no rule between them and no second column. hero-wall needs a hairline because it sets two densities of type against each other above the wall; here the only density above the wall is one headline, so a rule would be dividing a thing from nothing. - The bank is gone. A velocity bank is a reaction to being dragged through a section, and nobody is dragged through this one. The block turns it off in a field whatever patternpasteBank says, so the flick, the spread, the stretch and the sheen are all absent by design; the raise and the pull are untouched, because those are the reader pointing at a tile. Make it yoursVariations and the edits to make first ### What you change first - The photographs. Every tile includes an image block with an example photograph with a 16:9 crop set; click each and choose from your media library. The block's own toolbar has "Fill tiles from media library", which deals a multiple selection into the tiles in order and saves twenty-eight trips through the modal. - The words. One word a tile, because a tile is read at an angle and a phrase ladders. Add posters by duplicating a tile group and remove them by deleting one; the lanes follow. Work in sevens: past twenty-one tiles the lane cap is what is running, so the depth is the tile count over seven and a count that does not divide by seven leaves one lane a tile short. - The band's height. patternpasteHeight in the block's inspector, 520 here. It is the frame at every width, so it is the single dial that decides how much of the page this section is. - The masthead. Headline, one line, one button. The headline is set as display, so three or four words hold the scale best; keep the lede under about ninety characters so it stays the one line it was drawn as. - Motion. The block's inspector has the switch, "Animate this block", the pin toggle that would turn this back into hero-wall's promise, and the tilt, spin, speed, drift, raise and lift dials. Off, the section is the still field 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 lede, the poster words 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 is obliged to keep legible. The hand-off row's label leads on role-label, which only our theme tool defines, and falls through to contrast everywhere else. No accent slug appears in any rung. - The wall's surfaces. The block states no colour of its own: every tile face, hairline, shadow and the sheen are currentColor mixed down, so the field follows your text colour, including in a dark style. The frame's ground is the band's. - Spacing. Band padding, the gap between the masthead and the wall, the rhythm inside each tile and the hand-off row all use core spacing presets. ### What it decides for itself - The headline is display, not a ladder rung. clamp(2.75rem, 7.4vw, 6.5rem): its size is the composition, tuned to hold one line above a 520px band, so it does not take xx-large. Everything else is on the ladder: the lede and the hand-off paragraph take medium as a chain, the poster words take medium, and the hand-off label is a label with its own floor at 13px and its own tracking. - The lede is one line and under ninety-five characters on purpose. The block's introduction spans the full width of the band, minus its own gutter, and there is nowhere in the intro slot to hold a measure: a core/group put there would be read as a twenty-ninth tile. A short line needs no measure. - The hand-off row is outside the block. It is a sibling of the wall inside the band, not part of the introduction, because the introduction renders ABOVE the frame and the whole point of the row is to be on the far side of it: a full-bleed band with nothing under it reads as the site's chrome rather than as a section. Its label and its 34rem paragraph line up with the masthead, both being inset by the same clamp(1.25rem, 4vw, 4rem) the block uses for its own gutter. - The depth, and why it is twenty-eight. The block lays ceil(tiles / 3) lanes capped at seven and deals the tiles round-robin, so twenty-eight posters is seven lanes of four with no lane short. Live, that is only the seed: view.js clones whole lanes and whole tiles until the wall covers the frame, so the reader sees a rack many lanes wide at the card's own size. AT REST it is exactly the twenty-eight, and the block magnifies the plane to cover the frame off its SHORTEST lane, which is why the count is not a taste. Because patternpasteHeight is stated, the cap that would normally shorten a too-magnified band cannot: the band is fixed, so the zoom is what gives way to the coverage promise. It is the lane LENGTH that binds at rest, not the lane count, so four deep is what makes the still render a rack of small posters rather than a crop of three big ones. Change the count in sevens and the wall stays level; drop below four deep and the still render zooms. - The motion. Idle drift at 44, well above the block's own 26, because a field has no scrub to fall back on: if it is not moving while the reader is still, it is a photograph. Everything else is the block's own, including the angles, which is on purpose: check-motion has found a corner of the frame showing through to nothing on walls leaned far from them. Technical notesBlock mechanics, responsive behaviour and constraints ### 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 headline, the lede, the button, all twenty-eight posters and the hand-off row as a plain stack of core blocks; only the frame, its isometric styling and its drift go. Nothing you typed lives in the block itself. A visitor who has asked for reduced motion gets the still field, with every poster in it, in the same 520px band. ### 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. 33KB of core-block markup, 7 blocks (button, buttons, group, heading, image, paragraph, patternpaste/iso-wall), 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 - Studio and agency work reels - Photography and print portfolio openers - Product ranges shown as a field - Festival, venue and event line-ups - Brand campaign landing pages #### 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, group, heading, image, paragraph, patternpaste/iso-wall Core only NO Chains 68, deepest 3 rungs currentColor no color base, black, contrast, role-label, white spacing 20, 30, 40, 50, 60 font-size 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 Logos Needs plugin ### Hero wall clients A proof-led hero featuring twenty-eight partner brand icon marks on a gently inclined, continuous drifting plane. 10 blocks Open preview (https://patternpaste.com/pattern/hero-wall-clients.html) Shot in Twenty Twenty-Five Hero Hero Needs plugin ### Hero wall index A hero that is an archive: an editorial masthead hanging from a full-width hairline, then forty-two dated text entries laid flat as an isometric wall that stays pinned for half a screen while the lanes run under the reader. 9 blocks Open preview (https://patternpaste.com/pattern/hero-wall-index.html) 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)