Retro LED Ticker Web Component – dylanTicker

dylanTicker is a zero-dependency Web Component for creating retro dot-matrix scrolling text using JavaScript and Canvas text.

It supports left and right motion, adjustable speed and pixel size, LED colors, hover pause, manual playback controls, and runtime message updates.

Features

• Left and right dot-matrix scrolling.
• Adjustable movement speed and LED cell size.
• Independent lit and unlit LED colors.
• Attribute-based pause state and pause-on-hover behavior.
• Runtime message updates with pause, resume, and toggle controls.
• Multiple strings joined into one scrolling message with a configurable separator.
• Chunked Canvas rendering for long text.
• Reduced-motion behavior and an accessible text label.

How To Use It

Installation

Load the component as an ES module:

<script type="module" src="/js/dylan-ticker/retro-ticker.js"></script>

Basic Usage

Add the <retro-ticker> custom element after loading the module.

<retro-ticker
  message="FRONTEND NEWS STARTS HERE"
  speed="14"
  direction="left"
  pixel-size="10"
  color="#ff3b30"
  pause-on-hover
></retro-ticker>

Available Attributes to Configure the Ticker

• message (string, default: element text or blank): Sets the scrolling text. Lowercase text is converted to uppercase.
• speed (number, default: 14): Sets the movement speed in dot-matrix columns per second. Invalid or non-positive values fall back to 14.
• direction (left or right, default: left): Sets the scrolling direction.
• pixel-size (number, default: 10): Sets the LED cell size in CSS pixels. Values are clamped between 4 and 24.
• color (color, default: #ff3b30): Sets the lit LED color.
• off-color (color, default: #3a1715): Sets the unlit LED grid color.
• paused (boolean, default: absent): Stops the scrolling animation while the attribute is present.
• pause-on-hover (boolean, default: absent): Stops the animation while the pointer is over the ticker.

Update The Message With JavaScript

Set the message property when ticker content changes after page load.

const ticker = document.querySelector('retro-ticker');

ticker.message = 'DEPLOYMENT COMPLETE';

Use setMessages() to join several strings into one ticker message.

ticker.setMessages([
  'FIRST STORY',
  'SECOND STORY',
  'THIRD STORY'
]);

ticker.setMessages(
  ['BUILD PASSED', 'DEPLOY READY'],
  ' / '
);

JavaScript Properties

• message (string, read/write): Reads or updates the current ticker message.
• speed (number, read-only): Returns the validated scrolling speed.
• pixelSize (number, read-only): Returns the LED cell size after the 4 to 24 pixel limit is applied.

API Methods

// Pause scrolling.
ticker.pause();

// Resume scrolling.
ticker.resume();

// Switch between running and paused states.
ticker.toggle();

// Join several strings with the default "   •   " separator.
ticker.setMessages(['FIRST STORY', 'SECOND STORY']);

// Set a custom separator.
ticker.setMessages(['FIRST STORY', 'SECOND STORY'], ' / ');

Styling And Customization

Use the color, off-color, and pixel-size attributes for the main LED settings.

The Shadow DOM marks its board and scrolling message with part="board" and part="message". Use ::part() for additional CSS overrides.

retro-ticker::part(board) {
  border-radius: 0;
  background: #050505;
  box-shadow: none;
}

retro-ticker::part(message) {
  filter: none;
}

Reduced Motion And Accessible Text

dylanTicker assigns role="img" when the host element does not already have a role. The current message becomes the host element’s aria-label, while the rendered ticker content is hidden from the accessibility tree.

When prefers-reduced-motion: reduce is active, the animation stops and the ticker board becomes horizontally scrollable.

Alternatives And Related Resources

• AcmeTicker: Vanilla JS News Ticker with Typewriter Effects and RTL Support
• Overflow-Aware Marquee Scroller in Vanilla JS – fluid-marquee
• Dynamic Marquee-like Text Scroller In Vanilla JavaScript
• Marquee-like Infinite Scrolling Text in Vanilla JavaScript – text-roller

The post Retro LED Ticker Web Component – dylanTicker appeared first on CSS Script.