# 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. Dark by default, on your contrast ground with base text, and the whole wall inverts with the type because every face in it is currentColor. No photographs anywhere, so the field reads as a page rather than a gallery. Needs the companion plugin, which comes with your access; without it, or without motion, the masthead is followed by the forty-two entries as a plain stack of core blocks. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/hero-wall-index.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, paragraph, patternpaste/iso-wall, separator
Keywords: hero, isometric, wall, index, archive, entries, scroll

Promise: This variation embeds one of our blocks: install the companion plugin, then paste.

---

## The signature moment: there is a lot here, and it keeps coming

The masthead makes a claim with a number in it and the wall under it is the
number, at full depth. Forty-two entries is seven lanes of six, which is the
deepest resting wall `patternpaste/iso-wall` will lay before the lane cap stops counting,
so the plane is long enough along the lanes that the frame is filled by wall
rather than by magnification. Then the frame is pinned for half a viewport and the
lanes run, adjacent ones in opposite directions, wrapping: the
reader scrolls, more entries arrive, and there is no point at which the supply
looks like it is about to end.

The density IS the composition, which is why it survives colourlessness. Take
every colour out and the section is still one tight column of type standing over
a field of forty-two small ones, at a scale ratio of about nine to one, moving.
Nothing about that reading depends on a hue.

It has to work standing still, and it does. With no script the plane keeps its
`rotateX`/`rotateZ` from the block's stylesheet, so the section is the still
isometric field with all forty-two entries in it. With the plugin gone the
masthead is followed by the forty-two entries as a plain stack.

## Why the entries carry no pictures

An entry is a date, a title and one line, and that is the whole tile. A wall of
photographs reads as a rack of posters and the reader looks for the good one; a
wall of type reads as a page from a register and the reader reads whichever one
their eye lands on. The signature wants the second: an archive is impressive
because it is complete, not because any one item in it is.

It also costs the buyer nothing to fill. Forty-two tiles with an image each is
forty-two trips through the media modal; forty-two text tiles is retyping.

## What it inherits from your theme

- **Typeface.** Nothing states a family anywhere in the pattern.
- **Palette.** The band is your `contrast` with your `base` as its text: the one
  pair every block theme is obliged to define and to keep legible, so this
  really does arrive dark everywhere rather than in the themes that happen to
  have a dark slug. The hand-off row below it is the inverse, your `base` with
  `contrast` text. 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 is `currentColor` mixed down, so the
  whole field inverts with the type instead of staying a pale slab on a dark
  band. The frame's ground is the band's.
- **The hairline.** `core/separator`, so it draws in `currentColor`.
- **Spacing.** Band padding, the gap between the columns and the rhythm inside
  each tile use core spacing presets.
- **The button's shape.** Only the padding, the 1px border and the colours are
  stated; no radius, so it takes your theme's.

## 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 entries under it.
  Everything else is on the ladder as a chain: the standfirst and the entry
  titles take `medium`, and the issue line, the entry dates and the entry lines
  are labels with their own floors (13px, 13px and 14px), all of them above
  `check-responsive`'s 12px incidental floor at 390.
- **Contrast.** Every text pair in the band is `base` on `contrast` and every
  pair in the hand-off row is `contrast` on `base`, measured as resolved per
  theme by `check-responsive --contrast` at 4.5:1. Nothing here claims the 3:1
  large-text allowance, the display headline included.
- **The split.** 66/34 above core's 782px breakpoint, both columns aligned to
  their tops so the headline hangs off the rule; below it the narrow column
  stacks under the headline and the wall spans the phone.
- **The depth, and why forty-two.** The block lays `ceil(tiles / 3)` lanes
  capped at seven and deals the tiles round robin, so past twenty-one tiles the
  cap is what is running and the depth is the tile count over seven. Forty-two
  is seven lanes of six with no lane short. At rest the wall is scaled off its
  SHORTEST lane to cover the frame, and a lane six deep is long enough that the
  magnification cap binds and the band gives way instead: the block's own record
  measures 1.60 in a 395px band at 1920 for a forty-two tile wall, against 2.86
  in 240px for twelve. Add or remove entries in sevens and the wall stays level.
- **The motion.** The pin is kept but short, `patternpasteScroll` 0.5 (it shipped at 3
  and Jake found it too much to scroll through, 2026-08-29): the frame is
  already a full screen, so the density is the signature and a pin the reader
  has to wait out is a wall in the way. `patternpasteSpeed` 1.2 runs the lanes just
  fast enough to wrap inside the short pin, which is what `check-motion` holds
  it to (2 was measured as too fast to read),
  and `patternpasteDrift` 12 is a gentle idle, alive
  before anyone scrolls without being a carousel. Tilt, spin, bank, lift and
  raise are the block's, which is where `check-motion` has measured the corners
  of the frame to stay covered.
- **No variation.** The Motion drawer on this pattern's page re-dials speed,
  drift, scroll length and the rest on the payload in the browser, so a second
  payload for a different number would be a copy of this one with one figure
  changed. A different USE of the wall is a different pattern.

## 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 rule, the headline, the issue
line, the standfirst, the button and all forty-two entries as a plain stack of
core headings and paragraphs, in the order they were typed, followed by the
hand-off row; only the frame, its isometric styling and its motion go. Nothing
you typed lives in a block attribute. A visitor who has asked for reduced motion
gets the still wall with every entry in it.

## The hand-off row

The band is full bleed and on this page it fills the stage edge to edge, which
tells a buyer nothing about where the section stops. So the pattern ships what
comes next: a short row on your theme's paper under the frame, a tracked label
beside one paragraph. It sits outside the block, after the wall, so it is not in
the 3D chain and nothing in it is `pointer-events: none`. Delete it first if your
page already has something below.

## What you change first

1. **The forty-two entries.** Each is an ordinary group holding a date, a title
   and a line, named `Tile` in List View. Add one by duplicating a group, remove
   one by deleting it; the lanes follow on the next render. Work in sevens if
   you can, because the resting wall is scaled off its shortest lane and a count
   that does not divide by seven leaves one lane a tile short and magnifies the
   whole plane to cover for it. Keep the title under about sixteen characters
   and the line under about twenty-four: a tile is 216 by 156 and read at an
   angle, and anything longer ladders or is clipped.
2. **The masthead.** Headline, issue line, standfirst, one button. The headline
   is display type, so five to eight words hold the scale best; if you keep a
   number in it, keep it the same number as the entries.
3. **The band's colour.** It ships inverted. Swap the two chains on the band
   group for the other way round and the wall follows the type on its own, or
   use the Inherit knob on the product page to hand the ground back to a host
   theme that colours its own sections.
4. **Motion.** The block's inspector has the switch, "Animate this block", and
   the tilt, spin, speed, drift, scroll length, raise, bank and lift dials under
   it. Off, the section is the still wall with nothing missing.

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