Drop one script tag on a page and <colourline-clock> renders the
time in the ColourLine visual language — three coloured lines per character, with the numbers
overlaid. No dependencies, no webfont, no network calls: the glyphs are drawn as SVG from the
canonical encoding.
Every control below maps to an attribute on the element. The snippet updates as you go.
One script tag, then the element. The script defines the custom element, so anything already in the document — or added later — starts ticking on its own.
<script src="https://colourline.info/widgets/colourline-clock/colourline-clock.js" defer></script>
<colourline-clock format="hh:mm" hours="24"></colourline-clock>
Prefer not to use a custom element? Any container with
data-colourline-clock is filled in automatically, and
ColourLineClock.mount('#el', {…}) does the same from JavaScript.
Sizing is CSS: the element is inline-block with a fixed aspect ratio, so
set a height (it defaults to 2.6em) or a
width and the other follows.
24-hour, numbers overlaid, colours cross-fade on the minute.
The 7° shear of ColourLine Italic on touching poster bars, with digits sliding on each change.
Numbers hidden, bars touching — the poster reading of the language.
Specimen style: the caption sits under the bars, as on the alphabet sheet.
AM/PM is ColourLine too — half height, top-aligned. The bars carry their own colour, so any background works; on near-black, the canon black bar reads as a gap.
Palettes 1–3 mirror the colour-vision simulations in the font's CPAL table.
| Attribute | Values | Default |
|---|---|---|
| format | hh:mm · hh:mm:ss | hh:mm |
| hours | 24 · 12 | 24 |
| numbers | overlay · below · off | overlay |
| hide-numbers | boolean — shorthand for numbers="off" | — |
| italic | boolean — 7° right shear | false |
| animate | fade · slide · none | fade |
| bars | gapped · touching | gapped |
| palette | solid · deuteranomaly · protanomaly · tritanomaly | solid |
| meridiem | boolean — AM/PM in ColourLine at half height, 12-hour mode only | false |
| timezone | IANA name, e.g. Europe/London | local |
| tracking | extra space between glyphs, in em | 0 |
| duration | animation length in ms | 380 |
Full documentation, the JavaScript API and the static renderSVG() renderer
are in the README.