Services marquee ticker

Six numbered services set at display size in one ruled line across your page ground, with a short intro above the band and a hand-off row below it.

A services list is usually a grid of cards or a menu. This one sets each service as a single word at display size, gives it a small numeral above it like an entry in an index, and runs the six of them in one line between two hairlines. The numerals keep the order readable while the names move, and the rules above and below make it a strip the page passes through rather than a section of its own: copy on your ground above it, copy on your ground below it.

footer-marquee-words is a closing statement: eighteen phrases in three opposed rows on your inverted colours, with nothing below it but a sign-off. This one is a band BETWEEN sections: one row, six single words, each numbered, on your page ground, ruled top and bottom, with an intro that says what the band is and a hand-off row that carries the page on. Use the footer when the page is ending; use this when the page is turning from what you say to what you have done.

It is also not services-scrollspy-index, which is the long read: five service chapters with a numbered rail. This is the one-line summary that sits above a section like that, or stands in for it.

1. The services. Six items, each a numeral and an h3. Keep them to a word or two: a phrase in a moving line is a phrase nobody finishes. Duplicate an item in List View to add one, and renumber.
2. The intro. The heading and the line beside it, which says what the pointer does, because a control nobody knows about is a control nobody uses.
3. The hand-off row below the band, a sibling of the block, so it reads and links like ordinary copy. Replace it with the start of your next section.
4. Speed and Reach in the block's Motion settings, if 0.7 is too calm.
5. Separator, if you would rather the words ran without the dot.
6. The heading levels. The intro is an h2 and each service an h3, so a screen reader can list them; change the levels if your page needs others.

Everything you can see. The section is your base with your contrast as the ink, so it sits in the page rather than inverting it. The service names are in your theme's face; the heading takes your x-large size, the intro and hand-off copy your medium, the eyebrows and numerals your small. The two hairlines and the separator dot are drawn in the ink. Text measured against the ground in every stock theme.

The display size of the names, a bare clamp(2.75rem, 7.5vw, 7.5rem) rather than a preset, because the size of the words is the composition. The numeral above each name, the 64px gap, the speed, the plate off and the separator dot on.

• Six services, one row. Six single words at display size run well past a 1920px frame, so the loop never shows its seam, and six is about as many disciplines as a studio can claim with a straight face.
• The row height is the block's own. No Item height is stated, so the row follows the block's fluid default and the names scale with it, from 44px on a phone to 120px on a wide screen.
• Speed 0.7. Slower than the block's resting speed, because a single word at this size is read at a glance but has to be read before it leaves.
• Gap 64. The drawn dot sits in the middle of it, so each word keeps its numeral clear of the dot before it.

The running, the pointer control and the tap-to-stop. With the plugin inactive, or with motion switched off in the block's inspector, the intro is followed by the six numbered services as a plain stack, then the hand-off row. A reader who asks for reduced motion always gets the still line, and the line can always be stopped with a tap, Enter or Space.