Skip to main content

Marquee

BlockMarquee Heroes & Blocks 1 option

An endlessly scrolling text band for skills, clients or slogans.

Published · by Christopher Alberto

Live demo

Open full screen

At a glance

Component
BlockMarquee
Category
Heroes & Blocks
Used as
Page block — “Block: Marquee”
Options
1 editable field
Built with
PHP, Twig, SCSS
Platform
WordPress · Flynt theme · Timber/Twig · ACF Pro

About this component

A single-line marquee that scrolls its text continuously across the page — a lightweight way to break up sections with a list of skills, clients or a slogan.

Highlights

  • Pure CSS animation, no JavaScript.
  • Seamless loop: the text is duplicated so there is never a gap.
  • Stops animating for visitors who prefer reduced motion.

Options

Editors add this as Block: Marquee in a page's components. Every field it exposes:

Option Field Type Details
Text * text text Default: SAMPLE ✦ PLACEHOLDER ✦ MARQUEE ✦ COMPONENT ✦ PREVIEW ✦ Separate items with a space-padded ✦.

Under the hood

Components/BlockMarquee/

  • _style.scss Styles (SCSS) 49 lines
  • functions.php Fields & data (PHP) 29 lines
  • index.twig Markup (Twig) 12 lines

Share this component
Christopher Alberto

Built by

Christopher Alberto · Senior WordPress Engineer

Senior WordPress engineer with a decade-plus of builds across New Zealand, Australia, the UK, the US, Canada and Germany — FlyntWP, Roots/Sage, WooCommerce and custom platforms, built for speed and maintainability.

LinkedIn GitHub

Related components