Feature chapters view

One photograph, six looks: the frame holds a single scene and the camera moves across it as you read, panning and zooming to the part each chapter points at with a soft spotlight on it, and the last chapter lets the whole picture go. The chapters you are not reading fade back, and on a phone or a tablet the photograph is the whole screen with the chapters passing over it on plates.

Every chapter is a cover block whose focal point is where the camera looks, so you set the six points in the editor with the ordinary focal point picker. Nothing moves until you scroll. The photographic chapters include the same example image; replace it consistently across those covers. Needs the companion plugin, which comes with your access; without it, or without motion, the masthead is followed by the six chapters as a plain stack. States no colour and no font of its own.

ThemePreview sizeMotion
As authoredColour
Twenty Twenty-Five·1280pxPlays best in its own window

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What you change first

  1. The photograph. Each photographic chapter includes the same example image; when replacing it, point all the photographic covers at one file from your media library.
  2. The points. Select each cover and drag the focal point picker in the block sidebar to the part of the photograph that chapter is about.
  3. The words. Two paragraphs a chapter, about the thing at the point, inside the Plate group.
  4. The zoom and the spotlight. Zoom and Spotlight in the block's Motion panel, 190 and 55 here.
  5. The band. Chapter length in the inspector, 720 here; raise it for longer chapters.
  6. The masthead and the hand-off row. Ordinary core blocks before and after the block.
  7. Motion. The inspector has the switch and the dials.
  8. The heading levels. The masthead is an h2 and every chapter title an h3.

The signature moment

One scene, and a camera that carries the frame to the part each chapter is about

This is the ordinaryabundance.com mechanism in core blocks: nothing swaps. There is one photograph, and reading down it is walking around inside it. The first five chapters each point at one part of the view (the open water, the blue surface, the green foreground, the coastal edge and the water beyond the walls) and the frame pans and zooms there over the block's swap time, with the rest of the scene veiled in the page's own ink so the part being talked about is the part that is lit. The sixth chapter has no cover, so the camera pulls back to the whole view and the veil lifts: the section ends on the picture it began with, now read.

Theme handoff

What comes from where

From your theme

  • Typeface.
  • Palette.
  • The measure.
  • The ladder.

Set by this pattern

  • Six chapters, five of them pointed.
  • The zoom, at 190.
  • The band, at 720.
  • The rail on the right
  • The masthead is outside the block

Full pattern notes

Why it works, and how it is built

Open a topic for the complete design reasoning, editing guidance and implementation notes.

Design rationaleComposition, intent and nearest alternatives

Overview

One photograph, six looks. The frame on the right holds a single scene for the whole section and the camera moves across it as you read: each chapter is a cover block whose focal point is where the camera looks, the frame pans and zooms to that point with a soft spotlight on it, and the last chapter lets the whole picture go. The chapters you are not reading fade back. The block is patternpaste/chapters with the camera on, the rail flipped to the right, the morph and the plate off, a zoom of 190, a spotlight of 55, the reading line at the block's default and the fade at 45.

The signature moment: one scene, and a camera that carries the frame to the part each chapter is about

This is the ordinaryabundance.com mechanism in core blocks: nothing swaps. There is one photograph, and reading down it is walking around inside it. The first five chapters each point at one part of the view (the open water, the blue surface, the green foreground, the coastal edge and the water beyond the walls) and the frame pans and zooms there over the block's swap time, with the rest of the scene veiled in the page's own ink so the part being talked about is the part that is lit. The sixth chapter has no cover, so the camera pulls back to the whole view and the veil lifts: the section ends on the picture it began with, now read.

Scroll back up and the camera retraces its route. Nothing moves until you scroll, and nothing moves after you stop.

Why this is not editorial-chapters-case, team-chapters-index or timeline-chapters-years

  • One picture, not six. Every other chapters composite gives each chapter its own photograph and swaps them. Here every chapter is a cover pointed at the SAME photograph and the frame never changes what it holds, only where it is looking. That is a different thing to author (one good photograph and six focal points, set with the ordinary focal point picker) and a different thing to read.
  • The morph is off and the plate is off, and both follow from the camera: a frame that pans wants one shape to pan inside, and a mount around a photograph the reader is moving through reads as a porthole. The window is the stage box, and the photograph fills it at every zoom.
  • The spotlight is the only one of the set that veils the picture. At 55 the parts of the scene the chapter is not about drop back under the page's ink, which on a light theme darkens and on a dark theme fogs; the hole at the point is soft and about a quarter of the frame across. It lifts on the resting chapter, so the whole view is seen clean twice: at the top and at the end.
  • The fade is 45, between the index's 40 and the case study's 50: a chapter here is two paragraphs about one thing in the picture, and it wants to be read while the camera is on that thing.
  • The rest chapter is the ending. The timeline's interludes keep the previous print; a camera rest is the opposite, the camera letting go. It is the one chapter that must have no cover.
Make it yoursVariations and the edits to make first

What you change first

  1. The photograph. Each photographic chapter includes the same example image; when replacing it, point all the photographic covers at one file from your media library. The camera uses the first chapter's picture as the scene and ignores the others' files, but the still spread and the phone show each cover, so they should all be the one picture.
  2. The points. Select each cover and drag the focal point picker in the block sidebar to the part of the photograph that chapter is about. That is the whole of the camera's authoring.
  3. The words. Two paragraphs a chapter, about the thing at the point, inside the Plate group. Add a chapter by duplicating a Chapter group; leave one chapter with no cover where you want the camera to pull back.
  4. The zoom and the spotlight. Zoom and Spotlight in the block's Motion panel, 190 and 55 here. A spotlight of 0 is a plain pan and zoom.
  5. The band. Chapter length in the inspector, 720 here; raise it for longer chapters.
  6. The masthead and the hand-off row. Ordinary core blocks before and after the block.
  7. Motion. The inspector has the switch and the dials. Turning the camera OFF turns this back into a picture-per-chapter section, each cover its own frame.
  8. The heading levels. The masthead is an h2 and every chapter title an h3. If this lands under another h2, or the page has no h1, change the masthead's level in the block toolbar.
Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

  • Typeface. Nothing states a family.
  • Palette. The band is your base with your contrast as its ink; the two labels lead on role-label and fall through to contrast; the button is your theme's outline button style. The spotlight's veil is currentColor mixed down, so it is your ink, not ours.
  • The measure. Each chapter's prose is inside a Plate group at 36rem on your base, invisible on the band at two columns and the thing the words sit on when the photograph is the screen. Never take the plate away.
  • The ladder. The masthead is x-large, every chapter title large, every paragraph medium, each as a chain with a tuned clamp() behind it.

What it decides for itself

  • Six chapters, five of them pointed. Five looks is enough to walk a photograph without running out of things in it; the sixth is the whole.
  • The zoom, at 190. Nearly twice the resting size: enough that a point in a wide scene fills the frame, not so much that the photograph turns to pixels. A very high-resolution photograph can take more.
  • The band, at 720. A chapter is two paragraphs, a little under the band at the theme's measure, so the next chapter's label is on screen faded beneath the one being read.
  • The rail on the right, so the words lead and the picture answers them.
  • The masthead is outside the block and the hand-off row is a sibling after it, both inset by the block's gutter.
Technical notesBlock mechanics, responsive behaviour and constraints

What needs the plugin

This pattern embeds patternpaste/chapters, 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.

  • With the plugin and motion off (the inspector switch, and also what the storefront's still picture and the contact sheet show): the two-column spread, every chapter's cover beside its own words, each showing the photograph at its own focal point, the sixth chapter with no picture.
  • With the plugin deactivated entirely: the masthead is followed by the six chapters as a plain stack of core blocks, each cover above its own words, and then the hand-off row.
  • A reader who has asked for reduced motion gets the still spread.
  • On a phone or a tablet in portrait, with the plugin and motion on, the block goes live on the screen: the photograph is the whole screen behind the chapters, which pass over it on their plates, and the camera moves exactly as it does in the frame. With motion off, or without the plugin, it is the one-column stack.

What is not proved

  • The judge proves the camera moved to a pointed chapter and kept the frame full (chapters-camera-still, chapters-camera-uncovered), and that it did so again on the way back up. It does not prove the camera looked at the RIGHT part of the picture: the point is read off the cover's focal point and clamped to the crop, and a point outside the crop lands at its edge.
  • The spotlight's strength is not measured. The veil is currentColor mixed down at the percentage stated; on a theme whose ink is pale it fogs rather than darkens, which is a look and not a fault, and it has not been rendered on such a theme here.
  • The sheet shows five covers of the same photograph, each at its own focal point, followed by the text-only rest chapter. The preview uses the same coastal photograph as the copied markup. The storefront's picture is photographed live, with the camera on the second chapter's point.

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 for the sources and licenses. Pasting an image URL does not import a Media Library attachment.

The markup

30KB of core-block markup, 7 blocks (button, buttons, cover, group, heading, paragraph, patternpaste/chapters), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme.

Start free trial to copyWhat you copy is yours forever. Cancel whenever.

Back to the library