A "LED scroller cheat sheet" is a one-page quick reference for the browser-based LED Scroller tool: a short list of every control, accepted value, character rule, and playback behavior so you can build a banner without trial and error. The tool turns one short line of text into a large, looping, monospaced scrolling banner that runs entirely in the current browser tab. Controls cover exactly three speed presets (Slow = 12-second loop, Medium = 8 seconds, Fast = 4 seconds), two travel directions (right-to-left or left-to-right), five text sizes (32, 48, 64, 80, or 96 CSS pixels), and three playback actions (Start, Pause or Resume, and Restart). Accepted input is up to 120 Unicode code points with outer whitespace trimmed and control characters rejected. Editing any input clears the old preview, and prefers-reduced-motion freezes the banner so an operating-system accessibility request is honored. Use this cheat sheet as a side panel while you build: pick the message length, the size, the speed label, and the direction, and the result is a banner you can pause for transcription or restart from the beginning whenever you need a clean loop.
Controls at a Glance
The LED Scroller keeps its surface deliberately small. Every control maps to one validated setting on the preview, and the widget rejects any value that does not match the contract below before a single frame of animation appears.
| Control | Accepted values | What it actually does |
|---|---|---|
| Message | 1 to 120 Unicode code points; outer whitespace trimmed | Sets the one-line banner text |
| Speed — Slow | Preset only | One full CSS loop in 12 seconds |
| Speed — Medium | Preset only | One full CSS loop in 8 seconds |
| Speed — Fast | Preset only | One full CSS loop in 4 seconds |
| Direction — Right to Left | Toggle | Banner starts on the right, travels left |
| Direction — Left to Right | Toggle | Reverses the motion |
| Text size | 32, 48, 64, 80, or 96 CSS pixels | Five fixed sizes; no manual entry |
| Start Scrolling | Button | Validates the full configuration, then renders |
| Pause / Resume | Button | Toggles CSS animation-play-state |
| Restart | Button | Recreates the animation instance from its initial position |
If a setting is not on this table, the LED Scroller does not expose it. There is no custom pixel-per-second input, no manual duration input, no per-character color control, no canvas draw cycle, and no fullscreen prompt. That is intentional: keeping the control surface predictable prevents extreme values from breaking the page and keeps the contract auditable.
Build a Banner From the Cheat Sheet
The cheat sheet works best when you treat it as a checklist. Walk the controls in this order and the preview is guaranteed to render.
- Type one short message into the text field, between 1 and 120 Unicode code points, with no line breaks or control characters.
- Pick a speed preset: Slow for a calm read, Medium for general use, or Fast for a busy stage signal.
- Pick a direction: Right to Left is the standard ticker, Left to Right reverses it for languages or scripts that read the other way.
- Pick a text size from the five values listed in the table above.
- Press Start Scrolling — the tool validates the entire current configuration before a new animation instance appears.
- Press Pause for a stationary sign, Resume to continue the same motion, or Restart to begin a fresh loop from the initial position.
If you change any input after the banner is running, the previous preview is cleared so the visible banner can never silently disagree with the controls. Press Start Scrolling again to confirm the new configuration. Open the LED Scroller in a separate tab so you can keep this cheat sheet next to the tool while you build.
Character Rules and Input Limits
The text field is a single line, so the rules are tight. A single emoji counts as one character, accented letters count as one character, and non-Latin scripts count one code point per glyph rather than one per UTF-16 unit. That keeps the 120-character budget honest for every writing system.
| Input | Accepted or rejected | Reason |
|---|---|---|
| Plain Latin letters, digits, punctuation | Accepted | Single-line banner content |
| Accented letters (é, ñ, ü, etc.) | Accepted | One Unicode code point each |
| Emoji (🎉, 🚀, ✅) | Accepted as one character | Counted by code point, not raw UTF-16 |
| Non-Latin scripts (中文, العربية, Ελληνικά) | Accepted | One code point per glyph |
| Leading and trailing whitespace | Removed | Outer spaces are trimmed |
| Line breaks, tabs, control characters | Rejected | Single-line mode; invisible separators would confuse the output |
| Unicode line or paragraph separators | Rejected | Same reason — this is one-line content |
| Empty message | Rejected | Nothing to scroll |
| More than 120 code points | Rejected | Hard input cap |
The widget does not auto-shorten an over-limit message, replace unsupported text, convert case, correct spelling, translate the input, or insert decorative symbols. What you type is what scrolls; if the input fails validation, nothing animates and the controls stay on their last valid state.
Reading the Speed Presets Honestly
Each preset is a fixed CSS loop duration, not a calibrated physical speed. Slow completes one loop in 12 seconds, Medium in 8 seconds, and Fast in 4 seconds. Because the keyframes translate a full-width monospaced line by a fixed CSS distance over that duration, the apparent travel rate depends on message width, chosen font size, browser width, zoom level, and the specific device. A short word on Fast can look like a leisurely glide, while a long phrase on Slow can look like a steady march.
Treat the labels as transparent interface presets and pick by watching the actual preview rather than by assuming a pixel rate. If the message is hard to read at the chosen pace, change the preset, shorten the message, increase the text size, or all three. The honest way to choose is by what the eye can actually follow at the distance and viewport you plan to display on.
Pause, Resume, Restart, and Reduced Motion
The three playback buttons do three different things to the CSS animation. Pause toggles animation-play-state to paused and freezes the current frame so the banner becomes a stationary sign. Resume toggles animation-play-state back to running and continues the same motion from the paused frame — it is not a new loop. Restart is the only button that creates a fresh animation instance, increments the render revision, and returns the banner to its initial position before the next frame.
The stylesheet also honors the browser's prefers-reduced-motion media query by keeping the banner paused whenever that preference is set. The message remains readable as a stationary line and every control still works, so the OS or browser accessibility setting never gets silently overridden by the page. If your banner appears frozen on a device you did not configure, that is the safeguard doing its job; choose the preset, change controls, or turn the reduced-motion setting off at the OS level if the motion is wanted.
When a Browser Preview Is Not the Right Tool
The LED Scroller is honest about what it is not. It does not reproduce a named dot-matrix font, a specific electrical refresh rate, a pixel pitch, a brightness measurement, a physical sign controller, or a manufacturer protocol. The rendered shape depends on the fonts available to the browser, and the timing is CSS-defined rather than hardware-defined. If exact signage dimensions, certified brightness, remote scheduling, or hardware export is required, the software shipped with that physical display is the right tool.
For a quick handheld sign, an event cue, a desk message, a presentation prompt, a photo prop, or a visual attention signal, the browser preview is enough. It is most useful as a fast visual presentation tool that lets you preview motion honestly without pretending to be one. Keep critical safety instructions stationary and plainly visible; a moving decorative banner should not be the only channel for an emergency warning, accessibility notice, traffic direction, or any other high-consequence message.
Privacy, Storage, and What Runs Where
Everything happens in the current browser tab. Validation runs in JavaScript, runs the CSS animation, and renders the preview using large monospaced browser text with increased character spacing and the site's own color tokens. No timer loop, requestAnimationFrame worker, canvas draw cycle, or server process continues in the background. The widget does not request fullscreen permission because browser fullscreen prompts vary, can be blocked without a direct gesture, and may hide important controls.
The message itself is not uploaded, saved, analyzed, or sent to an advertising or AI service by the widget. There is no account requirement and no generated file. For a larger view, increase the text size to 96 CSS pixels, use the browser's normal fullscreen command if you want it, or use trusted casting software to mirror the browser window to a larger display. Verification covers trimming, empty input, Unicode character boundaries, control and separator rejection, every speed contract, both directions, supported sizes, and invalid configuration failure, then checks exact text, animation name and duration, pause state, restart behavior, and the surrounding page output.
Quick Message Tips for Readable Banners
The clearest result comes from a short phrase with strong contrast and minimal dense punctuation. Aim for a phrase that reads at a glance from across a room, not a sentence that has to be parsed. Pause the banner before transcribing anything important — a name, a code, an address, a Wi-Fi password, a room number — so a viewer has time to copy it. A moving decorative banner is a poor channel for high-consequence text, and pausing it converts the same tool into a stationary sign without changing any of the message content. If you want a fuller worked example of which phrases hold up at a distance, the LED banner text readability guide walks through short-message patterns that survive the same speed and size controls this cheat sheet defines.
For a deeper look, see Random Date Generator Cheat Sheet: Inputs and Limits.