Hero wall field

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.

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.

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.

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.

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 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.

• 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.

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.

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.