# 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. As every name reaches the reading line the frame takes that person's picture, changes shape to their crop, overshoots a little and settles, and the people you are not reading about fade back so the one you are reading about is the one that is lit. One portrait cross-fades into the next rather than wiping, because a list of colleagues has no direction to state. Example portraits are included, generated and nobody real; replace them with photographs of your own people. 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. Canonical: https://patternpaste.com/pattern/team-chapters-index.html Section: Team Access: Included in Pattern Paste access. Needs: 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. Also needs: 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. Blocks: button, buttons, group, heading, image, list, list-item, paragraph, patternpaste/chapters Keywords: team, people, staff, index, sticky, portraits, chapters, scroll Promise: This variation embeds one of our blocks: install the companion plugin, then paste. --- ## The signature moment: six people, each a short profile with a portrait that cross-fades into the next as you reach their name, and the person you are reading about is the one that is lit 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. ## Why this is not editorial-chapters-case or timeline-chapters-years - **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. ## What it inherits from your theme - **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. ## What it decides for itself - **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. ## 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 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. ## What you change first 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. ## What is not proved - **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. ## Included images 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](/image-credits/) for the sources. Pasting an image URL does not import a Media Library attachment.