Start free trial

Patterns Interactive

WordPress sections that move.

36 patterns wrapped around 7 blocks. Install the plugin once, paste, and the section moves in your own theme. The plugin installs once and keeps working after you cancel. A section you pasted keeps moving.

SubscribeHow the plugin installs

7 blocks36 patterns36 designsRequires 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.

36 patterns · 7 blocks

Chapters

Chapters of prose beside one picture frame that stays with the reader as they scroll.

6 patterns · 6 designsAbout this block

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

Content Slider

A native horizontal collection of editable Group blocks with touch scrolling, optional snapping, keyboard navigation and arrow, number or dot controls.

4 patterns · 4 designsAbout this block

Feature slider walkthrough rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveFeaturesFeaturesNeeds plugin

Feature slider walkthrough

An inverted feature section that explains a product in three steps, one at a time: each stage fills the frame with a large photograph and its copy beside it, named in words (Step 1 of 3) and selected with numbered controls below.

7 blocksOpen preview
Hero slider cover rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroHeroNeeds plugin

Hero slider cover

A full-width hero slideshow with three bright edge-to-edge photographs and compact opaque panels, each carrying a headline, concise introduction and action.

7 blocksOpen preview
Portfolio slider editorial rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveGalleryGalleryEditorialNeeds plugin

Portfolio slider editorial

An editorial portfolio section with four broad image-led project cards and compact caption and project metadata beneath each image.

7 blocksOpen preview
Testimonial slider proof rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTestimonialsTestimonialsNeeds plugin

Testimonial slider proof

A testimonial section with three generous quote-and-metric cards, one main card and the next card held visibly at the edge.

5 blocksOpen preview

Isometric wall

A wall of tiles laid on an isometric plane.

6 patterns · 6 designsAbout this block

Hero wall clients rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroHeroLogosNeeds plugin

Hero wall clients

A proof-led hero featuring twenty-eight partner brand icon marks on a gently inclined, continuous drifting plane.

10 blocksOpen preview
Hero wall field rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroHeroNeeds plugin

Hero wall field

A masthead over a band of drifting posters: a display headline, one line of lede and one action, then an edge-to-edge isometric field of twenty-eight picture tiles that is 520px of band and nothing more, its top and bottom faded out so the lanes read as running on past the section rather than stopping at a cut.

7 blocksOpen preview
Hero wall index rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroHeroNeeds plugin

Hero wall index

A hero that is an archive: an editorial masthead hanging from a full-width hairline, then forty-two dated text entries laid flat as an isometric wall that stays pinned for half a screen while the lanes run under the reader.

9 blocksOpen preview
Hero wall mosaic rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroHeroNeeds plugin

Hero wall mosaic

A hero that is nothing but photographs: a short masthead, one line and one action, then twenty-eight square pictures laid edge to edge on a steeply tilted plane that holds the screen for half a scroll while the lanes run past.

7 blocksOpen preview
Hero wall rail rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroHeroNeeds plugin

Hero wall rail

A masthead over a rack of twelve large posters standing in upright columns: a short headline in the wide column, a lede and one action in the narrow one, a full-width hairline between them, and below it a band the page scrolls straight past while the columns slide by each other.

10 blocksOpen preview
Hero wall split rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroHeroNeeds plugin

Hero wall split

A two-column hero: on one side a label, a display headline, a paragraph and two buttons as ordinary core blocks; on the other a contained isometric panel of forty-two picture tiles, 620px tall and exactly the column's width, that drifts on its own clock and follows the reader's scroll lightly.

9 blocksOpen preview

Marquee

Rows of items that run forever past a frame.

11 patterns · 11 designsAbout this block

Announcement marquee ticker rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeaderHeaderNeeds plugin

Announcement marquee ticker

A one-line announcement bar for the very top of a page: ten labelled notices, each a bold word and a short line, run slowly across a thin band on your contrast colour with a drawn dot between them, above a hand-off row that stands in for your header and opening section.

4 blocksOpen preview
CTA marquee rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCall to actionCall to actionNeeds plugin

CTA marquee

A closing call to action between two hairlines: one slow line of heavy capitals saying the same invitation over and over runs the width of the page, and under it the ask stands still as a promise.

8 blocksOpen preview
Footer marquee words rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveFooterFooterNeeds plugin

Footer marquee words

Three rows of display type running across the foot of the page on your contrast colour, dealt from eighteen short phrases with a drawn mark between them and no plate behind anything, so the words are the whole of the band.

4 blocksOpen preview
Gallery marquee frames rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveGalleryGalleryNeeds plugin

Gallery marquee frames

Two rows of framed pictures running opposite ways past a band of two 300px rows, with the pointer driving them: the left of the frame runs them backwards, the middle holds them still so a picture can be read, and the right hurries them along.

5 blocksOpen preview
Gallery marquee mounts rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveGalleryGalleryNeeds plugin

Gallery marquee mounts

Twelve pictures hung in drawn frames, running two rows deep past the section with the pointer driving them.

5 blocksOpen preview
Gallery marquee photos rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveGalleryGalleryNeeds plugin

Gallery marquee photos

A wall of photographs in motion: a short heading row, then three full-bleed rows of pictures 240px high running in alternate directions with 8px between them and nothing else in the rows, no captions, no cards and no plates.

5 blocksOpen preview
Hero marquee ribbon rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroHeroNeeds plugin

Hero marquee ribbon

A page-opening hero: a label, a display headline across the width, a paragraph and two buttons as ordinary core blocks, standing still above one full-bleed ribbon of twelve tall portrait pictures, 440px high, that runs edge to edge beneath them with no plate or caption between the pictures.

7 blocksOpen preview
Logo marquee strip rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveLogosLogosNeeds plugin

Logo marquee strip

A masthead over one quiet row of fourteen client marks: a label, a line of heading and one line of orientation, then a 120px band running across the section under them.

5 blocksOpen preview
Services marquee ticker rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveFeaturesFeaturesNeeds plugin

Services marquee ticker

Six numbered services set at display size in one ruled line across your page ground, a drawn dot between each, with a short intro above the band and a hand-off row of ordinary copy below it, so it reads as a strip between two sections.

4 blocksOpen preview
Testimonial marquee rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTestimonialsTestimonialsNeeds plugin

Testimonial marquee

Twelve client quotes, each with a small round photograph, the name and the company, running two rows deep in opposite directions with the pointer driving them.

5 blocksOpen preview
Testimonial marquee editorial rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTestimonialsTestimonialsNeeds plugin

Testimonial marquee editorial

Eight client quotes set large in one slow line across an inverted band, with no card behind them: a drawn dot between voices, and a small round photograph with the name under each quote.

5 blocksOpen preview

Scrollspy Rail

A native block section whose sticky index follows the reader through named content sections.

3 patterns · 3 designsAbout this block

Case scrollspy anatomy rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveEditorialEditorialNeeds plugin

Case scrollspy anatomy

A case study told as a photo essay: a compact masthead, then four sections that each open on a large captioned photograph and several paragraphs of story, ending in a results ledger.

7 blocksOpen preview
Handbook scrollspy directory rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveSingle articlesSingle articlesNeeds plugin

Handbook scrollspy directory

A reference directory: twelve entries in a narrow reading column beside a wide, unnumbered index of their titles that stays in view and marks the entry being read.

6 blocksOpen preview
Services scrollspy index rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveFeaturesFeaturesNeeds plugin

Services scrollspy index

A text-led services section with a narrow numbered index beside five generous service chapters.

8 blocksOpen preview

Stack

Cards that stack over one another as the reader scrolls.

3 patterns · 3 designsAbout this block

Case stack panels rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveGalleryGalleryEditorialNeeds plugin

Case stack panels

Five case-study panels on a dark band: a short masthead, then five prints dealt over one another as you scroll, each one a photograph in a wide cinematic crop with its client, its year and one line of outcome on the plate beneath it.

7 blocksOpen preview
Pricing stack tiers rendered in Twenty Twenty-FiveShot in Twenty Twenty-FivePricingPricingCompareNeeds plugin

Pricing stack tiers

Four pricing cards built as plan sheets: a numbered header, a large price beside a compact feature ledger, and a ruled footer.

8 blocksOpen preview
Process stack steps rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHow it worksHow it worksNeeds plugin

Process stack steps

Six process cards with oversized phase numbers, short editorial headlines and a ruled deliverables footer.

8 blocksOpen preview

Warp Reel

A screen-filling photographic wheel that snaps to a complete project after every scroll or drag and loops in both directions.

3 patterns · 3 designsAbout this block

Destination reel rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveGalleryGalleryNeeds plugin

Destination reel

A full-screen-height landscape reel fills the left beside an editorial heading and numbered travel index.

9 blocksOpen preview
Fullscreen portfolio reel rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroHeroNeeds plugin

Fullscreen portfolio reel

A photographic wheel fills the screen from top to bottom, with one project opening between curved neighbours.

7 blocksOpen preview
Studio split reel rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroHeroNeeds plugin

Studio split reel

A large studio statement holds the left while a screen-height photographic wheel fills the right.

9 blocksOpen preview

Back to the library

Chapters·Cover chapters backdrop in Twenty Twenty-FiveOpen in its own window
Content Slider·Feature slider walkthrough in Twenty Twenty-FiveOpen in its own window
Isometric wall·Hero wall clients in Twenty Twenty-FiveOpen in its own window
Marquee·Announcement marquee ticker in Twenty Twenty-FiveOpen in its own window
Scrollspy Rail·Case scrollspy anatomy in Twenty Twenty-FiveOpen in its own window
Stack·Case stack panels in Twenty Twenty-FiveOpen in its own window
Warp Reel·Destination reel in Twenty Twenty-FiveOpen in its own window