Team chapters index

Six people as profiles you read rather than a list you skim, with one portrait frame beside them that keeps up. Each person is a chapter: a role as an eyebrow, a name as an h3, two paragraphs of real copy, a small "Ask them about" label and three things they will happily talk about, plus an example portrait image block. patternpaste/chapters lifts the six portraits into a single sticky frame on the left; every name that reaches the reading line takes the frame with it, and the five people you are not reading about fade back while it happens.

A chapter is a person's whole entry, about two hundred and forty words of it, so the portrait beside it stays long enough to be looked at. Reach a name and the frame changes shape to that person's crop, overshooting a few per cent and settling; one portrait cross-fades into the next rather than wiping, because a list of colleagues has no direction to state. At the same moment patternpasteDim takes the other five chapters back forty per cent, so the column has exactly one lit paragraph in it and the reader can see where they are without a rule, a number or a highlight colour.

That fade is the difference between a spread and a read. It costs nothing in markup: it is a class the block puts on the current chapter cell and a transition in the block's own stylesheet, keyed on your text colour, so it works in a dark style and a light one and states no colour of its own.

It reads standing still, because the resting composition is the whole section: a two-column spread with every person's portrait beside their own words, in order, nothing hidden, nothing faded and nothing waiting to be undone.

• Six, and it is a different six from the case study's. The case study is six chapters of long-form argument with an interlude in the middle, and it runs them past a fixed window; the timeline is six dated quotations on the ink with two part markers between them. This is six people, and six is what a studio page is: enough that the frame swaps five times on the way down, few enough that everybody gets a proper entry rather than a line under a head shot. It was eight one-line entries and the portraits flew past; the count came down and the copy went up.
• A chapter here is two paragraphs and a list, not a caption. The role, the name, sixty to ninety words on what they do here, sixty to ninety more on one specific habit or story, then three things to ask them about. That is what holds a portrait on screen for a few seconds instead of a blink, and it is what the band is sized against rather than the other way round.
• The dim is on, and this is the only one of the three that needs it. Forty per cent, between the case study's 50 and the timeline's 60. Six profiles are six equals with nothing to order them, so the fade is the only thing saying which person the portrait belongs to. Forty is the number where the other chapters are plainly quiet and still legible if a reader looks straight at one; past about fifty, on a light ground, they read as disabled, which is why the timeline can go deeper on the ink and this cannot.
• It is the only one of the three that does not wipe. patternpasteWipe is off, so a portrait cross-fades into the next over the same 400ms while the one it replaces is pushed out under it. A wipe is directional and states which way the reader is going, which is what a case study's evidence and a timeline's years both want; colleagues are not in an order, and a wipe would keep insisting that they are. Off is not "no transition": nothing in this block ever cuts.
• The smear is down at three, not up at nine. Three degrees, under the block's own six. It was nine when this was eight quick flicks and the reader was expected to fling the page; six chapters of prose are read, not flicked, and a lean that suits a fast run down a list looks like a rendering fault under a paragraph somebody is halfway through. Three is enough that a deliberate jump down the page has weight and small enough that normal reading never sees it. The case study and the timeline have none at all.
• All six pictures are portrait, and the crops still differ. The timeline morphs between six archival crops from square to widescreen so the change of shape is the effect. Here 3:4 and 4:5 alternate, which is as far apart as head shots honestly go: the frame nudges rather than reshapes, which is what a page of people wants, and the overshoot stays low at six per cent for the same reason. The case study, having six landscapes and nothing to nudge between, turns the morph off altogether.

1. The photographs. Every person includes an image block with an example photograph with a portrait crop already set, 3:4 and 4:5 alternating. Use the block toolbar's Fill chapters from media library to pick six at once and have them dealt into the chapters in order, or click a single portrait to replace just that one. Re-cropping a picture in the editor re-shapes the frame for that person; there is nothing to keep in step.
2. The people. Role, name, two paragraphs, and three things to ask them about. Add somebody by duplicating a chapter group and remove them by deleting one; the frame counts them itself. Keep the paragraphs to sixty to ninety words each: that is the length the 760px chapter is built for, and it is also the length that keeps a portrait on screen long enough to be looked at.
3. The chapter length, if your entries run longer or shorter. Chapter length in the block's inspector, 760 here. Raise it if you add a paragraph, and keep Frame height under it.
4. The frame. Frame height is 720 and Stick offset is how far below the top of the screen it parks. Keep the frame at or under the chapter length: above it, the resting portrait is capped at the chapter's height and grows when the script lands. If your site has a fixed header, push the stick offset past its height.
5. The fade. Dim other chapters in the Motion drawer, 40 here. Take it to 0 and every chapter stays at full strength, which is the block's own default and reads as a spread rather than a read; take it up and the page starts to look like the other people are switched off. Anything from 30 to 50 does the job. It is a live control, so drag it on the product page and watch the column.
6. Which side the portraits are on. Pictures on the right in the inspector. Nothing else in the section moves.
7. The masthead and the hand-off row. Both are ordinary core blocks outside the block, inset to the same left edge as the chapters.
8. Motion. The inspector has the switch, Animate this block, and the reading line, morph, swap time, overshoot, wipe, drift, smear and dim dials. The wipe is off here, so the portraits cross-fade; the smear is three degrees, and a coarse pointer never gets it whatever the number says.
9. The heading levels. The masthead is an h2 and every name is an h3, because a page of people is not a page of sections. Where this lands on your page is yours to check: if the section sits under another h2, or the page has no h1 above it, change the masthead's level in the block toolbar so the outline reads in order.

• Typeface. Nothing states a family. The eyebrow, the heading, the lede, every role, name, paragraph, label and list item, and the button all take whatever your theme sets.
• Palette. The band is your base with your contrast as its text, the pair every block theme is obliged to keep legible. The eyebrow, every role and every "Ask them about" label lead on role-label, which only our theme tool defines, and fall through to contrast everywhere else. The lists state no colour at all and take the band's ink. The button is your theme's button.
• The frame's surfaces. The block states no colour: the plate's ground is your own text colour mixed down to seven per cent and its hairline the same at sixteen, so the frame follows your ink, including in a dark style. The fade on the chapters you are not reading is an opacity, so it is your colours at forty per cent of the way to the ground behind them, whatever those colours are.
• Spacing. Band padding, the rhythm inside the masthead and the gap between a person's paragraphs use core spacing presets. The section's gutter is the block's own max(clamp(1.25rem, 4vw, 4rem), calc((100% - 1600px) / 2)), and the masthead and the hand-off row are inset by the same expression so all three share one left edge at every width.

• The chapter is 760px and the frame is 720px. One is how much scroll a person is worth, the other is the sticky frame's height, and the second is stated under the first on purpose. A resting portrait is capped at the chapter's own height, so a frame taller than the band would grow the picture the moment the script lands; at 720 inside 760 the portrait is the same size resting and live and the section holds its scale. The 760 is a floor the copy nearly reaches rather than a number holding six short entries apart: measured at 1400 wide a person's own words run 625 to 685px, at 1280 they run 622 to 679, so every row is the band exactly and the swaps are evenly spaced with 35 to 95px of air under the longest entry. Give somebody a third paragraph and raise the band to match, or that row alone grows.
• The frame parks 40px down, the block's own default, and the block caps it against the viewport as well, so on a short laptop screen the frame is the screen rather than something whose bottom you never see.
• The swap is 400ms. Shorter than the block's 620 because a cross-fade shows both pictures at once for the whole of its run, and a long cross-fade is two faces overlaid on each other for half a second. Raise it and the two portraits are a double exposure; lower it and it reads as a cut.
• The dim is 40 per cent, and it is the only thing this pattern does to the words rather than the pictures.
• The gap is 32px, tighter than the block's 56, because it is both the gap between the columns and the gap between one person and the next; the fade is what separates the chapters now, so the whitespace does not have to.
• The rail is on the left, which is the block's default and also the order the plain stack reads in: portrait, then who it is.
• The wipe is off and the portraits cross-fade instead; the smear is three degrees; the reading line and the drift are the block's own.
• The name is a ladder heading, large as a chain, the paragraphs and the list are medium, and the roles and the "Ask them about" labels are labels at their own clamps, tracked and uppercase. The masthead heading is x-large. Nothing here is display type: a name set larger than the section's own heading is a poster, not a people page.

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 switched off in the inspector, the section is the two-column spread: six portraits down the rail, each beside its own person's words, and nothing is faded. The dim exists only in the live state.
• With the plugin deactivated entirely, the masthead is followed by the six chapters as a plain stack of core blocks: portrait, role, name, two paragraphs, label, list, six times, in the order they were typed, then the hand-off row. Nothing you typed lives in a block setting, so nothing you typed can disappear.
• A reader who has asked for reduced motion always gets the still spread, at full strength with nothing dimmed, and so does a phone: below the block's own two-column breakpoint there is one column and no frame at all, which is the same composition either way.

• A row much taller than the band. The even rhythm holds while every chapter fits inside 760px, which it does at every viewport on the sheet. A long role title in a narrow theme, a third paragraph, or a five-item list will push one row past the band and space that swap further from its neighbours. The block will not break; the timing will drift.
• The dim is not measured. check-knobs moves patternpasteDim and asks whether the render answered, and the still spread is proved to fade nothing. Nothing reads the settled opacity of a chapter mid-page, so the forty is a looked-at number rather than a measured one.
• The still spread at 1920 is airier than the live one. A resting portrait is capped at the frame's own height, so at 720 the picture is 540px wide; measured at 1920 the rail track is 720px, against 577 at 1400, so the widest cell on the sheet reads as two columns with air between them. If your pages are usually read that wide, raise the frame height and the chapter length together: the portraits grow with them.
• A phone gets the copy without the frame. Below the block's breakpoint there is one column, no frame and no floor under a chapter, so it is portrait then words, six times, which is the right render and not the composition this pattern was drawn for.
• The smear itself. The judge proves it leaves nothing behind and that the frame is still at rest; nobody measures the peak of the lean, because reading it during a fast scroll is a flaky measurement.

The copied markup includes example portraits, generated and nobody real. The public image URLs keep the examples visible after pasting. Select an image or cover and choose Replace to use photographs of your own people. See image credits for the sources. Pasting an image URL does not import a Media Library attachment.