Interactive WordPress patterns, Pattern Paste Canonical: https://patternpaste.com/interactive/ Patterns (https://patternpaste.com/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. Subscribe (https://patternpaste.com/account/#plan)How the plugin installs (https://patternpaste.com/docs/install-pattern-paste/) - Chapters 6 patterns Chapters of prose beside one picture frame that stays with the reader as they scroll. Find out more (https://patternpaste.com/interactive/chapters/) - Content Slider 4 patterns A native horizontal collection of editable Group blocks with touch scrolling, optional snapping, keyboard navigation and arrow, number or dot controls. Find out more (https://patternpaste.com/interactive/content-slider/) - Isometric wall 6 patterns A wall of tiles laid on an isometric plane. Find out more (https://patternpaste.com/interactive/iso-wall/) - Marquee 11 patterns Rows of items that run forever past a frame. Find out more (https://patternpaste.com/interactive/marquee/) - Scrollspy Rail 3 patterns A native block section whose sticky index follows the reader through named content sections. Find out more (https://patternpaste.com/interactive/scrollspy-rail/) - Stack 3 patterns Cards that stack over one another as the reader scrolls. Find out more (https://patternpaste.com/interactive/stack/) - Warp Reel 3 patterns A screen-filling photographic wheel that snaps to a complete project after every scroll or drag and loops in both directions. Find out more (https://patternpaste.com/interactive/warp-reel/) 7 blocks 36 patterns 36 designs 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. 36 patterns · 7 blocks ## Chapters Chapters of prose beside one picture frame that stays with the reader as they scroll. 6 patterns · 6 designs About this block (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) ## 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 designs About this block (https://patternpaste.com/interactive/content-slider/) Shot in Twenty Twenty-Five Features Features Needs 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 blocks Open preview (https://patternpaste.com/pattern/feature-slider-walkthrough.html) Shot in Twenty Twenty-Five Hero Hero Needs 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 blocks Open preview (https://patternpaste.com/pattern/hero-slider-cover.html) Shot in Twenty Twenty-Five Gallery Gallery Editorial Needs 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 blocks Open preview (https://patternpaste.com/pattern/portfolio-slider-editorial.html) Shot in Twenty Twenty-Five Testimonials Testimonials Needs 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 blocks Open preview (https://patternpaste.com/pattern/testimonial-slider-proof.html) ## Isometric wall A wall of tiles laid on an isometric plane. 6 patterns · 6 designs About this block (https://patternpaste.com/interactive/iso-wall/) Shot in Twenty Twenty-Five Hero Hero Logos Needs plugin ### Hero wall clients A proof-led hero featuring twenty-eight partner brand icon marks on a gently inclined, continuous drifting plane. 10 blocks Open preview (https://patternpaste.com/pattern/hero-wall-clients.html) Shot in Twenty Twenty-Five Hero Hero Needs 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 blocks Open preview (https://patternpaste.com/pattern/hero-wall-field.html) Shot in Twenty Twenty-Five Hero Hero Needs 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 blocks Open preview (https://patternpaste.com/pattern/hero-wall-index.html) Shot in Twenty Twenty-Five Hero Hero Needs 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 blocks Open preview (https://patternpaste.com/pattern/hero-wall-mosaic.html) Shot in Twenty Twenty-Five Hero Hero Needs 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 blocks Open preview (https://patternpaste.com/pattern/hero-wall-rail.html) Shot in Twenty Twenty-Five Hero Hero Needs 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 blocks Open preview (https://patternpaste.com/pattern/hero-wall-split.html) ## Marquee Rows of items that run forever past a frame. 11 patterns · 11 designs About this block (https://patternpaste.com/interactive/marquee/) Shot in Twenty Twenty-Five Header Header Needs 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 blocks Open preview (https://patternpaste.com/pattern/announcement-marquee-ticker.html) Shot in Twenty Twenty-Five Call to action Call to action Needs 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 blocks Open preview (https://patternpaste.com/pattern/cta-marquee.html) Shot in Twenty Twenty-Five Footer Footer Needs 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 blocks Open preview (https://patternpaste.com/pattern/footer-marquee-words.html) Shot in Twenty Twenty-Five Gallery Gallery Needs 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 blocks Open preview (https://patternpaste.com/pattern/gallery-marquee-frames.html) Shot in Twenty Twenty-Five Gallery Gallery Needs plugin ### Gallery marquee mounts Twelve pictures hung in drawn frames, running two rows deep past the section with the pointer driving them. 5 blocks Open preview (https://patternpaste.com/pattern/gallery-marquee-mounts.html) Shot in Twenty Twenty-Five Gallery Gallery Needs 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 blocks Open preview (https://patternpaste.com/pattern/gallery-marquee-photos.html) Shot in Twenty Twenty-Five Hero Hero Needs 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 blocks Open preview (https://patternpaste.com/pattern/hero-marquee-ribbon.html) Shot in Twenty Twenty-Five Logos Logos Needs 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 blocks Open preview (https://patternpaste.com/pattern/logo-marquee-strip.html) Shot in Twenty Twenty-Five Features Features Needs 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 blocks Open preview (https://patternpaste.com/pattern/services-marquee-ticker.html) Shot in Twenty Twenty-Five Testimonials Testimonials Needs 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 blocks Open preview (https://patternpaste.com/pattern/testimonial-marquee.html) Shot in Twenty Twenty-Five Testimonials Testimonials Needs 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 blocks Open preview (https://patternpaste.com/pattern/testimonial-marquee-editorial.html) ## Scrollspy Rail A native block section whose sticky index follows the reader through named content sections. 3 patterns · 3 designs About this block (https://patternpaste.com/interactive/scrollspy-rail/) Shot in Twenty Twenty-Five Editorial Editorial Needs 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 blocks Open preview (https://patternpaste.com/pattern/case-scrollspy-anatomy.html) Shot in Twenty Twenty-Five Single articles Single articles Needs 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 blocks Open preview (https://patternpaste.com/pattern/handbook-scrollspy-directory.html) Shot in Twenty Twenty-Five Features Features Needs plugin ### Services scrollspy index A text-led services section with a narrow numbered index beside five generous service chapters. 8 blocks Open preview (https://patternpaste.com/pattern/services-scrollspy-index.html) ## Stack Cards that stack over one another as the reader scrolls. 3 patterns · 3 designs About this block (https://patternpaste.com/interactive/stack/) Shot in Twenty Twenty-Five Gallery Gallery Editorial Needs 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 blocks Open preview (https://patternpaste.com/pattern/case-stack-panels.html) Shot in Twenty Twenty-Five Pricing Pricing Compare Needs 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 blocks Open preview (https://patternpaste.com/pattern/pricing-stack-tiers.html) Shot in Twenty Twenty-Five How it works How it works Needs plugin ### Process stack steps Six process cards with oversized phase numbers, short editorial headlines and a ruled deliverables footer. 8 blocks Open preview (https://patternpaste.com/pattern/process-stack-steps.html) ## 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 designs About this block (https://patternpaste.com/interactive/warp-reel/) Shot in Twenty Twenty-Five Gallery Gallery Needs plugin ### Destination reel A full-screen-height landscape reel fills the left beside an editorial heading and numbered travel index. 9 blocks Open preview (https://patternpaste.com/pattern/gallery-warp-reel-destinations.html) Shot in Twenty Twenty-Five Hero Hero Needs plugin ### Fullscreen portfolio reel A photographic wheel fills the screen from top to bottom, with one project opening between curved neighbours. 7 blocks Open preview (https://patternpaste.com/pattern/hero-warp-reel-portfolio.html) Shot in Twenty Twenty-Five Hero Hero Needs plugin ### Studio split reel A large studio statement holds the left while a screen-height photographic wheel fills the right. 9 blocks Open preview (https://patternpaste.com/pattern/hero-warp-reel-studio.html) Back to the library (https://patternpaste.com/patterns/) Chapters · Cover chapters backdrop in Twenty Twenty-Five Open in its own window (https://patternpaste.com/previews/cover-chapters-backdrop/twentytwentyfive.html) Content Slider · Feature slider walkthrough in Twenty Twenty-Five Open in its own window (https://patternpaste.com/previews/feature-slider-walkthrough/twentytwentyfive.html) Isometric wall · Hero wall clients in Twenty Twenty-Five Open in its own window (https://patternpaste.com/previews/hero-wall-clients/twentytwentyfive.html) Marquee · Announcement marquee ticker in Twenty Twenty-Five Open in its own window (https://patternpaste.com/previews/announcement-marquee-ticker/twentytwentyfive.html) Scrollspy Rail · Case scrollspy anatomy in Twenty Twenty-Five Open in its own window (https://patternpaste.com/previews/case-scrollspy-anatomy/twentytwentyfive.html) Stack · Case stack panels in Twenty Twenty-Five Open in its own window (https://patternpaste.com/previews/case-stack-panels/twentytwentyfive.html) Warp Reel · Destination reel in Twenty Twenty-Five Open in its own window (https://patternpaste.com/previews/gallery-warp-reel-destinations/twentytwentyfive.html)