Retro LED Ticker Web Component - dylanTicker

Authordigiguru

Last UpdateSeptember 9, 2026

LicenseMIT

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.

Retro LED Ticker Web Component – dylanTicker