LCD Text for Svelte

LCD Text draws every character in seven segments, like a clock radio or a calculator: the lit segments in the text's colour, the unlit ones faint behind them. When it appears, the display powers on from the first character to the last, each one flickering through its segments before it settles. After that it changes at once, like a real display, so it can show a clock or a live value.

Use it for numbers that should look like hardware: a clock, a countdown, a temperature, a score, or a short status such as READY. For digits that roll to each new value, use Sliding Number; for a dot-matrix sign, Dot Matrix Text. The segments are small SVG shapes, and the power-on is three CSS keyframe animations the install adds to your stylesheet, stepping each segment on and off, with no timer and nothing random. Seven segments draw digits well and letters roughly. With reduced motion the display simply shows.

Installation

Usage

<script lang="ts">
import { LcdText } from "@/components/ui/lcd-text";
</script>

<LcdText text="21:45" />

Demos

Glow

glow adds a soft halo around the segments, like a backlit display; it's best on a dark panel. The lit segments take the text's colour, so a text-* class colours them, and offColor is the unlit ones', the text's colour at 12% by default. duration is how long each character flickers, 800 ms by default.

Clock

Once it has powered on, a new text shows at once, so a clock ticks like a real one. trigger="view" waits, dark, until the display scrolls into view.

Accessibility

Screen readers read the text as you wrote it, once, from a visually hidden copy; the segments are hidden from them. The power-on is a short burst, each segment changing a few times in under a second, and it doesn't play with reduced motion. A changing value, such as a clock, isn't announced: wrap it in a live region only if every change matters to someone listening.

FAQ

API Reference