# Hero reel

> A full-bleed video cover, 44rem tall, with every word of it packed into the bottom-left corner: a tracked eyebrow, a display headline held to a measure that stays 26rem up to a 1300px window and opens to 38rem on a wide one, one line of orientation and two buttons. The other four fifths of the bleed are left empty on purpose, so the clip has somewhere to be a clip and the type reads as one dense mark against it. The video cover remains empty for your own clip; the still-image variation includes an example photograph, and the veil is heavy enough that whatever you point it at, the words pass contrast. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it, so the hero reads as a section and not the whole page.

Canonical: https://patternpaste.com/pattern/hero-reel.html
Section: Hero
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 7.0 to 7.1. 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.
Blocks: button, buttons, cover, group, heading, paragraph
Keywords: hero, cover, video, reel, headline, buttons

## Variations (3)

### Reel (the default)

Identical markup in every theme.

A silent looping clip under an 80% veil of your contrast colour, with base type in the bottom-left corner. Choose the clip in the cover's media picker; the veil keeps it a texture rather than a film.

### Paper reel

Identical markup in every theme.

The colour axis inverted: the veil is your base at 80% and the type your contrast, so the footage becomes a pale ghost behind ink. For a page that stays light.

### Still

Identical markup in every theme.

The identical composition over a photograph instead of a clip. Nothing else changes: same veil, same corner, same type ramp. Take this one when the page has to load on a train.


---

## The signature moment: density contrast

One dense block of type in the bottom-left corner of an otherwise entirely
empty 44rem bleed. The eyebrow, the headline, the lede and the buttons all sit
inside one measure, so the 48-104px headline wraps to three short lines and
the four items stack into a single hard-edged mark; everything above and to the
right of it is clip. The emptiness is the design. Fill it, centre
it, or run a row across the foot and the pattern is gone.

## Why the type is legible on the footage

A photograph's luminance is unknowable and a moving one changes it 25 times a
second, so the rule is that type never sits on either. A veil is the exception
that can be measured: its colour is a chain and its opacity is a number, so the
worst ground the type can land on is the veil over a white frame and the veil
over a black one. Both are composited and the worse pair is the one judged. At
`dimRatio` 80 with a `contrast` veil and `base` type that pair passes; the same
markup at 40 measured 2.48:1 when `cover-veil` was authored. **The veil may not
go below 80 here**, because there is no plate under this type: the corner block
sits straight on the veil, which is what makes the emptiness read as emptiness.

## What it inherits, what it decides

Inherits: every colour (veil `contrast`, type `base`, the solid button `base`
on `contrast`), the typeface, the spacing scale. Decides: the veil's opacity,
the 44rem minimum height (in `rem`, never `vh`), the corner, the measure,
the type ramp and the button padding. The cover states its own `style.color.text`
as a chain so core's `:where()` rule painting cover text `#fff` never applies,
and every heading and paragraph inside restates its own chain rather than
inheriting one, because a theme's heading element style beats an inherited
group colour. The outline button is `currentColor` at 1px over `transparent`,
so it follows whichever way the colour is pointing. Neither button carries a
`typography` attribute: that does not stay valid across editor versions, so
they are sized with padding.

## What a buyer changes first

The clip: the cover ships EMPTY, with no `<video>` element and no `url` in the
markup at all, which is valid in the editor. Point it at a short, silent,
looping file in the media library and core writes `autoplay muted loop
playsinline`. Then the headline. Keep it under about six words; three lines is the
shape this was drawn for and four is the ceiling.

## Variations

- **Still**: `backgroundType` back to the default image. The identical
  composition over a photograph, and nothing else differs at all.
- **Paper reel**: the colour axis by inversion. The veil is `base` at 80% and
  all the type, including the solid button's ground, is `contrast`. Inversion
  between `base` and `contrast` is the only colour move that arrives in every
  theme; the hand-off row below is unchanged, because it was already paper.

## The measure grows with the window

The headline's `clamp(3rem, 7vw, 6.5rem)` reaches its 104px ceiling at a 1486px
window, but the corner block's measure used to be a flat 26rem, so past that
point the type got bigger inside a box that did not: at 1920 the headline wrapped
to four lines in a 416px column standing in a 1744px bleed, about 30% of it. The
group's `contentSize` is now `clamp(26rem, 32vw, 38rem)`. 32vw is below 26rem at
every width up to 1300, so the composition at 1280, 820 and 390 is exactly the
one that was authored and measured; above that the measure opens with the
window and stops at 38rem, which is 608px, about 71 characters of the lede and
three lines of headline.

The corner stays pinned to the bleed's own edge and is deliberately NOT aligned
to the hand-off row's 1240px content column, which auto-centres and so drifts
right as the window widens. The type is a mark in the corner of the bleed, not a
column heading; aligning it to a row the buyer deletes first would trade the
signature for a tidier measurement.

## The hand-off row

A full-bleed cover on its own fills the preview on this page edge to edge, and on
a buyer's page it is never alone. So the pattern ships what comes next: a short
row on your theme's paper under the cover, a tracked label beside one paragraph
at a 36rem measure. It is ordinary page copy, it shows where the hero ENDS, and
it is the first thing a buyer rewrites or deletes. It carries the same chains as
everything else.

## Included images

The still-image variation includes WordPress Photo Directory example photographs.
The video version remains empty for your own clip. 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.