Chapters, Pattern Paste Canonical: https://patternpaste.com/interactive/chapters/ Interactive (https://patternpaste.com/interactive/) Chapters Needs plugin (https://patternpaste.com/docs/install-pattern-paste/) # 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. Subscribe (https://patternpaste.com/account/#plan)The 6 designs Cover chapters backdrop · Twenty Twenty-Five Plays best in its own window (https://patternpaste.com/previews/cover-chapters-backdrop/twentytwentyfive.html) Open in its own window (https://patternpaste.com/previews/cover-chapters-backdrop/twentytwentyfive.html) Rendered by WordPress in Twenty Twenty-Five. Open this pattern (https://patternpaste.com/pattern/cover-chapters-backdrop.html) 6 patterns 6 designs 19 settings patternpaste/chapters 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. ## 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 (https://patternpaste.com/interactive/#chapters) Shot in Twenty Twenty-Five Cover Cover Needs 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 blocks Open preview (https://patternpaste.com/pattern/cover-chapters-backdrop.html) Shot in Twenty Twenty-Five Editorial Editorial Needs 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 blocks Open preview (https://patternpaste.com/pattern/editorial-chapters-case.html) Shot in Twenty Twenty-Five Features Features Needs 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 blocks Open preview (https://patternpaste.com/pattern/feature-chapters-view.html) Shot in Twenty Twenty-Five Stats Stats Needs 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 blocks Open preview (https://patternpaste.com/pattern/stat-chapters-numbers.html) Shot in Twenty Twenty-Five Team Team Needs 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 blocks Open preview (https://patternpaste.com/pattern/team-chapters-index.html) Shot in Twenty Twenty-Five Timeline Timeline Needs 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 blocks Open preview (https://patternpaste.com/pattern/timeline-chapters-years.html) ## 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. Setting | Attribute | Values | Default | Animate this block | patternpasteMotion | On or off | On | Pictures on the right | patternpasteFlip | On or off | Off | Frame height | patternpasteStage | 240 to 900px, in steps of 8 | 512px | Chapter length | patternpasteBand | 320 to 1200px, in steps of 20 | 640px | Stick offset | patternpasteStick | 0 to 200px, in steps of 4 | 40px | Gap | patternpasteGap | 0 to 96px, in steps of 2 | 56px | Draw the frame | patternpastePlate | On or off | On | Frame behind the chapters | patternpasteBackdrop | On or off | Off | Reading line | patternpasteLine | 20 to 80%, in steps of 1 | 45% | Frame takes each picture's shape | patternpasteMorph | On or off | On | Swap time | patternpasteSwap | 200 to 1400ms, in steps of 20 | 620ms | Overshoot | patternpasteOvershoot | 0 to 40%, in steps of 1 | 12% | Wipe the new picture in | patternpasteWipe | On or off | On | Drift | patternpasteDrift | 0 to 80px, in steps of 2 | 24px | Smear on a fast scroll | patternpasteSmear | 0 to 14deg, in steps of 1 | 6deg | Fade the other chapters | patternpasteDim | 0 to 70%, in steps of 5 | 0% | One scene, a camera | patternpasteCamera | On or off | Off | Zoom | patternpasteZoom | 100 to 300%, in steps of 10 | 160% | Spotlight | patternpasteSpotlight | 0 to 80%, in steps of 5 | 0% | Back to the interactive patterns (https://patternpaste.com/interactive/) ## Needs the plugin 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. The plugin is yours to use forever: after you cancel, it and every section using it keep working. Only updates and support stop. How to install it (https://patternpaste.com/docs/install-pattern-paste/) The plugin registers this block and nothing else: it ships no patterns of its own. The designs live here, as copy-paste markup. ### Before you paste 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.