Start free trial

Interactive Marquee Needs plugin

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.

SubscribeThe 11 designs
Announcement marquee ticker·Twenty Twenty-FivePlays best in its own window

Open in its own window Rendered by WordPress in Twenty Twenty-Five.Open this pattern

11 patterns11 designs13 settingspatternpaste/marqueeRequires 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

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

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.

SettingAttributeValuesDefault
Animate this blockpatternpasteMotionOn or offOn
RowspatternpasteRows1 to 5, in steps of 12
SpeedpatternpasteSpeed0 to 3, in steps of 0.11
Start the first row rightwardspatternpasteReverseOn or offOff
GappatternpasteGap0 to 96px, in steps of 122px
Item widthpatternpasteItemWidth0 to 640px, in steps of 40px
Item heightpatternpasteItemHeight0 to 480px, in steps of 40px
Fade the frame edgespatternpasteFadeOn or offOn
Plate behind each itempatternpastePlateOn or offOn
A dot between itemspatternpasteMarkOn or offOff
Let the pointer drive the rowspatternpasteScrubOn or offOn
Top speedpatternpasteReach1 to 5, in steps of 0.12.5
Still bandpatternpasteHold0 to 60, in steps of 120
Back to the interactive patterns