# 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. Canonical: https://patternpaste.com/pattern/hero-wall-field.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, group, heading, image, paragraph, patternpaste/iso-wall Keywords: hero, isometric, wall, field, posters, gallery, tiles, drift Promise: This variation embeds one of our blocks: install the companion plugin, then paste. --- ## 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. ## 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. ## 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. ## What you change first 1. **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. 2. **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. 3. **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. 4. **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. 5. **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. 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.