Footer marquee words, Pattern Paste Canonical: https://patternpaste.com/pattern/footer-marquee-words.html Interactive (https://patternpaste.com/interactive/) Marquee (https://patternpaste.com/interactive/marquee/) Catalogue access Needs plugin (https://patternpaste.com/docs/install-pattern-paste/) # 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. The top row runs rightwards and the two below it oppose in turn; the pointer runs them back at the left of the frame, holds them still in the middle and drives them at three times their speed on the right, and any row can be tapped or focused and held. Needs the companion plugin, which comes with your access; without it, or without motion, the eighteen phrases are a plain stack above the sign-off. States no colour and no font of its own. Start here ## What you change first - The phrases. Eighteen items, each an h3. - The sign-off below the block, which is a sibling and not part of it, so it sits below the frame where it can be read and clicked. - Rows, if three is too much band for your page. - Speed and Reach. 1.2 and 3 are the loud end of what the block does. - A mark between items off, if the dots are too much punctuation for your phrases. - The heading level, if an h3 in the footer upsets your page's heading order. The signature moment ## The last thing on the page will not sit still A footer is usually where a page gives up. This one restates what you stand for in eighteen short phrases, set as type at three and a half per cent of the viewport, on your ink rather than your ground, with a drawn mark between one phrase and the next. The top row runs rightwards, the two below it oppose in turn, and the whole band answers the pointer: back at the left, still in the middle, three times the speed at the right. Any row can be tapped, or focused and held with Enter, which is what a phone gets instead of a pointer. Theme handoff ## What comes from where ### From your theme The face, the weights and both colours. The section is painted with your contrast as its ground and your base as its ink, which is the reverse of the page above it, and every word takes your theme's own display face at whatever size your preset scale settles on inside the clamp. The mark between the phrases is drawn, not a character, so it is the same mark on every device and states no font. ### Set by this pattern Three rows, dealt round-robin from eighteen phrases, at 1.2 times the block's own speed. No plates: the words are the whole of the band, so there is nothing behind them to compete. Each row is 72px and the gap is 24px, so the band is 264px: it is always exactly its rows, which is the only thing it could be once the row height is the one number that decides a row. The reach is 3, higher than the other two marquees, because there is nothing to read carefully here: the phrases are short, the reader is at the end of the page, and the band is worth playing with. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview Three rows of display type running across the foot of the page on your contrast colour. ### The signature moment: the last thing on the page will not sit still A footer is usually where a page gives up. This one restates what you stand for in eighteen short phrases, set as type at three and a half per cent of the viewport, on your ink rather than your ground, with a drawn mark between one phrase and the next. The top row runs rightwards, the two below it oppose in turn, and the whole band answers the pointer: back at the left, still in the middle, three times the speed at the right. Any row can be tapped, or focused and held with Enter, which is what a phone gets instead of a pointer. Three rows of opposed type is the densest thing the block makes, and the footer is where density is affordable: there is nothing below it to compete with. ### Why this is not footer-strip or footer-signoff Those two are navigation: a name, some links, a copyright line, under a rule. This one carries no links at all. It is the band you put ABOVE one of them when the page needs a closing statement rather than a site map, and it should never be the only footer on a page: put it above footer-strip and let that carry the links. Make it yoursVariations and the edits to make first ### What you change first - The phrases. Eighteen items, each an h3. They are short on purpose: a sentence in a row that is moving is a sentence nobody finishes. - The sign-off below the block, which is a sibling and not part of it, so it sits below the frame where it can be read and clicked. - Rows, if three is too much band for your page. Two is calmer; one is a different pattern. - Speed and Reach. 1.2 and 3 are the loud end of what the block does. - A mark between items off, if the dots are too much punctuation for your phrases. - The heading level, if an h3 in the footer upsets your page's heading order. The words are headings so a screen reader can list them. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme The face, the weights and both colours. The section is painted with your contrast as its ground and your base as its ink, which is the reverse of the page above it, and every word takes your theme's own display face at whatever size your preset scale settles on inside the clamp. The mark between the phrases is drawn, not a character, so it is the same mark on every device and states no font. ### What it decides for itself Three rows, dealt round-robin from eighteen phrases, at 1.2 times the block's own speed. No plates: the words are the whole of the band, so there is nothing behind them to compete. Each row is 72px and the gap is 24px, so the band is 264px: it is always exactly its rows, which is the only thing it could be once the row height is the one number that decides a row. The reach is 3, higher than the other two marquees, because there is nothing to read carefully here: the phrases are short, the reader is at the end of the page, and the band is worth playing with. Technical notesBlock mechanics, responsive behaviour and constraints ### What needs the plugin The running, the pointer control and the press-to-hold. With the plugin inactive, or with motion off in the block's inspector, the eighteen phrases are a plain stack of headings above the sign-off, still on the reversed colours and still legible. A reader who asks for reduced motion always gets that. 12KB of core-block markup, 4 blocks (group, heading, paragraph, patternpaste/marquee), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Start free trial to copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Use it for - Closing bands that restate what you stand for - Studio and agency sign-offs - Manifesto and values strips - Campaign and launch page footers - Service lists set as type, not a menu #### Pair with Call to action CTA band A full-bleed closing band that inverts the page: a contrast ground carrying base text, one centred statement, one action. States no colour and no font of its own. (https://patternpaste.com/pattern/cta-band.html)Contact Contact cover ledger A full-bleed contact cover: a display heading in the top left, and a ruled ledger of address, hours, phone and email in the far lower-right corner, label left and value right between hairline rules, with the photograph running between them. A heavy veil of your theme's contrast colour keeps every line legible whatever photograph you choose. The ledger drops under the heading on a phone. Includes a replaceable example photograph. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it. (https://patternpaste.com/pattern/contact-cover-ledger.html)Header Nav bar A header bar on one line: a heavy, tightly tracked wordmark at the left edge against tiny widely tracked links at the right, one solid action beside them, and a hairline under the whole bar. The links are your WordPress menu, a core navigation block that folds to a menu button on a phone so the bar stays one line. Compact by construction, so it reads as the top of a page and never as a hero. States no colour and no font of its own. (https://patternpaste.com/pattern/nav-bar.html) #### Before you paste 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. How to install it (https://patternpaste.com/docs/install-pattern-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. How we test patterns (https://patternpaste.com/how-we-test/) #### What's inside Blocks group, heading, paragraph, patternpaste/marquee Core only NO Chains 42, deepest 2 rungs currentColor no color base, black, contrast, white spacing 50, 70 Continue exploring ## Next in Interactive Explore all 36 interactive patterns (https://patternpaste.com/interactive/)Also in Footer (https://patternpaste.com/patterns/footer/) 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 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)