Start free trial

Interactive Chapters Needs plugin

The Chapters block

Chapters of prose beside one picture frame that stays with the reader as they scroll. As each chapter reaches the reading line the frame takes that chapter's picture, changing shape to its crop, or, with the camera on, pans and zooms across one scene to the point that chapter marks. The frame can hold a picture, a cover or anything in a group named Frame, sit beside the chapters or behind them as a backdrop, and the chapters not being read can fade back. Without JavaScript it is a two-column spread with every picture beside its own words.

SubscribeThe 6 designs
Cover chapters backdrop·Twenty Twenty-FivePlays best in its own window

Open in its own window Rendered by WordPress in Twenty Twenty-Five.Open this pattern

6 patterns6 designs19 settingspatternpaste/chaptersRequires 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.

The designs

6 patterns, 6 designs between them. Each is this one block wrapped in core blocks, so everything around it takes its colours, spacing and type from your theme.

All 36 interactive patterns

Cover chapters backdrop rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCoverCoverNeeds plugin

Cover chapters backdrop

A photo essay where the pictures fill the page: six chapters run down the right on white plates over one full-height frame behind them, and as each chapter reaches the reading line the photograph behind the words changes, wiping in along the direction of travel.

7 blocksOpen preview
Editorial chapters case rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveEditorialEditorialNeeds plugin

Editorial chapters case

A long-form case study in seven chapters: the prose runs down the left and one picture frame on the right stays with you as you read, taking each chapter's photograph as that chapter reaches the reading line.

9 blocksOpen preview
Feature chapters view rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveFeaturesFeaturesNeeds plugin

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.

7 blocksOpen preview
Stat chapters numbers rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveStatsStatsNeeds plugin

Stat chapters numbers

Six numbers, each with the story behind it: the chapters run down the right, and on the left one card on your contrast colour holds the figure for the chapter you are reading, in display type, and swaps to the next as you reach it, wiping in along the direction of travel.

6 blocksOpen preview
Team chapters index rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTeamTeamNeeds plugin

Team chapters index

Six people, each a short profile you actually read, with one portrait frame beside them that keeps up: a role, a name, two paragraphs and three things to ask them about.

9 blocksOpen preview
Timeline chapters years rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTimelineTimelineNeeds plugin

Timeline chapters years

A history told in dated quotations on the ink: six years, each a big numeral, a short title, a voice from that year in large italic with its attribution, and a paragraph of what happened, with two interludes that mark the parts of the story.

7 blocksOpen preview

How it moves

A section that reads as two columns: chapters of prose on one side, one picture frame on the other that stays with the reader as they scroll. As each chapter reaches the reading line the frame takes that chapter's picture: the frame changes shape to the new picture's own crop from its top corner, overshooting a little before it settles, and the picture wipes in along the direction of travel and drifts to rest a beat after the shape lands. The chapters not being read can fade back so the one being read is the one that is lit. Scroll back up and it runs the other way. Without JavaScript, or for a reader who has asked for reduced motion, it is a two-column magazine spread with every chapter's picture beside its own words.

What you can set before you copy

Every one of these is an attribute of the block, so it is the same control the editor's inspector offers after you have pasted. The Motion drawer on a pattern's own page writes your values into the markup before you copy it.

SettingAttributeValuesDefault
Animate this blockpatternpasteMotionOn or offOn
Pictures on the rightpatternpasteFlipOn or offOff
Frame heightpatternpasteStage240 to 900px, in steps of 8512px
Chapter lengthpatternpasteBand320 to 1200px, in steps of 20640px
Stick offsetpatternpasteStick0 to 200px, in steps of 440px
GappatternpasteGap0 to 96px, in steps of 256px
Draw the framepatternpastePlateOn or offOn
Frame behind the chapterspatternpasteBackdropOn or offOff
Reading linepatternpasteLine20 to 80%, in steps of 145%
Frame takes each picture's shapepatternpasteMorphOn or offOn
Swap timepatternpasteSwap200 to 1400ms, in steps of 20620ms
OvershootpatternpasteOvershoot0 to 40%, in steps of 112%
Wipe the new picture inpatternpasteWipeOn or offOn
DriftpatternpasteDrift0 to 80px, in steps of 224px
Smear on a fast scrollpatternpasteSmear0 to 14deg, in steps of 16deg
Fade the other chapterspatternpasteDim0 to 70%, in steps of 50%
One scene, a camerapatternpasteCameraOn or offOff
ZoompatternpasteZoom100 to 300%, in steps of 10160%
SpotlightpatternpasteSpotlight0 to 80%, in steps of 50%
Back to the interactive patterns