Marquee, Pattern Paste Canonical: https://patternpaste.com/interactive/marquee/ Interactive (https://patternpaste.com/interactive/) Marquee Needs plugin (https://patternpaste.com/docs/install-pattern-paste/) # The Marquee block Rows of items that run forever past a frame. Adjacent rows travel in opposite directions and wrap seamlessly, and the pointer rewinds them, holds them still or drives them faster by where it sits across the frame. Without JavaScript it is a still row of items clipped by its own band. Subscribe (https://patternpaste.com/account/#plan)The 11 designs Announcement marquee ticker · Twenty Twenty-Five Plays best in its own window (https://patternpaste.com/previews/announcement-marquee-ticker/twentytwentyfive.html) Open in its own window (https://patternpaste.com/previews/announcement-marquee-ticker/twentytwentyfive.html) Rendered by WordPress in Twenty Twenty-Five. Open this pattern (https://patternpaste.com/pattern/announcement-marquee-ticker.html) 11 patterns 11 designs 13 settings patternpaste/marquee 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 11 patterns, 11 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/#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) ## 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 | Rows | patternpasteRows | 1 to 5, in steps of 1 | 2 | Speed | patternpasteSpeed | 0 to 3, in steps of 0.1 | 1 | Start the first row rightwards | patternpasteReverse | On or off | Off | Gap | patternpasteGap | 0 to 96px, in steps of 1 | 22px | Item width | patternpasteItemWidth | 0 to 640px, in steps of 4 | 0px | Item height | patternpasteItemHeight | 0 to 480px, in steps of 4 | 0px | Fade the frame edges | patternpasteFade | On or off | On | Plate behind each item | patternpastePlate | On or off | On | A dot between items | patternpasteMark | On or off | Off | Let the pointer drive the rows | patternpasteScrub | On or off | On | Top speed | patternpasteReach | 1 to 5, in steps of 0.1 | 2.5 | Still band | patternpasteHold | 0 to 60, in steps of 1 | 20 | 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.