Hero marquee ribbon

A page-opening hero: the pitch stands still above one full-bleed ribbon of twelve tall portrait pictures that runs edge to edge beneath it.

Every other marquee in the catalogue closes a page or sits in the middle of one. This one opens it. The headline, the paragraph and the buttons are a still block of type across the content width, and directly under them a single tall row of pictures runs out past both edges of the screen. The contrast is the composition: the only thing that moves is the thing you do not have to read, so the eye settles on the headline and the ribbon keeps the page alive underneath it.

gallery-marquee-frames is two short rows of landscape pictures with captions, opposing each other: a gallery to be browsed. This is one row, portrait, no captions and no plates, 440px tall, because a hero's pictures are a mood and a second counter-running row would compete with the headline for attention.

hero-wall-field and its siblings are an isometric plane drifting under the scroll. This ribbon is flat, runs on its own clock, and is steered by the pointer rather than by travel down the page.

1. The pictures. Select the block and use "Fill items from media library" in its toolbar: pick twelve at once and they are dealt into the items in order. Write alt text for your own; the example text describes the examples.
2. The headline, paragraph and buttons. The paragraph says out loud what the pointer does, because a control nobody knows about is a control nobody uses. If you take that sentence out, turn Scrub off in the inspector too.
3. The two small lines under the ribbon: a date and the hold hint. The hint stays true whatever you change; every row can always be stopped.
4. Item height and Item width if your pictures want another shape; the band follows the height. Speed if 0.6 is too slow for yours.
5. The heading level. The headline is an h1 because a hero opens the page. If your theme already prints the page title as an h1, change it to an h2.

Everything you can see. The ground is your base colour, the headline, the paragraph and the small lines are your contrast colour, and the buttons are your theme's buttons: the first filled, the second outlined, neither stating a colour or a radius. The label and the two small lines reach for role-label and fall back to contrast. The ribbon's edges dissolve through a mask that states no colour, so your ground shows through it.

• The headline is display type, off the theme's ladder: its size is the composition, clamp(2.75rem, 6.4vw, 7rem), across a 1600px intro, so it runs the width above the ribbon. Large text is judged at 3:1, the paragraph at 4.5:1.
• One row, 440px high, each picture 330px wide in a 3:4 slot filled with object-fit: cover, so a landscape photograph is honestly cropped to a portrait slot rather than making one item twice as wide as its neighbours.
• Twelve pictures, with a 16px gap. The block copies the run until it is longer than the frame plus one whole cycle, so the ribbon never shows bare ground, and takes those copies away when it stops.
• Speed 0.6, slower than the block's default, so the ribbon reads as a ground rather than a second headline.
• The paragraph sits beside the buttons in a wrapping row, and stacks above them on narrow screens.

The running, the pointer control and the press-to-hold. Everything else is core blocks: with the plugin inactive, or with motion switched off in the block's inspector, the headline, paragraph and buttons are followed by the twelve pictures as a plain stack. A reader who asks their system for reduced motion always gets the still ribbon.

The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image 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.