The word clock

TextGSAP, CSS onlyMediumCompressed weight: Demo 5.1 KBGSAP 28 KBFreeDownload the zip

A text animation in the minimal style, on black: a grid of capitals tells the time in words, IT IS TWENTY PAST TEN. The lit letters are wide, full and light, the others narrow, thin and nearly black. When the time changes the old words go out narrowing and the new ones light up in reading order, each on a spring of width and weight; between one word and the next four orange corners count the minutes.

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The word clock</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <!-- the clock: a grid of letters, the time lit up in words; the four corner marks count the minutes in between -->
    <div class="clock" data-clock>
      <div class="grid" data-grid aria-hidden="true"></div>
      <i class="corner corner--tl" data-corner aria-hidden="true"></i>
      <i class="corner corner--tr" data-corner aria-hidden="true"></i>
      <i class="corner corner--br" data-corner aria-hidden="true"></i>
      <i class="corner corner--bl" data-corner aria-hidden="true"></i>
      <p class="sr" data-said aria-live="polite"></p>
    </div>
    <p class="foot" data-foot>
      <span class="foot__brand">Ostra Coffee, Harbour Street</span>
      <span class="foot__time" data-time>10:16</span>
    </p>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.

15 values to change

Open the Playground

Or ask Claude Code for it

With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:

Take “The word clock” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On an almost black background a grid of ten rows of eleven capital letters, all narrow, hairline-thin and a dark grey you can barely see, appears row after row. Then the letters that say the time light up, in reading order: IT IS QUARTER PAST TEN. Every lit letter becomes wide, full and paper-coloured, with a small bounce of width and weight that passes its size by a whisker and comes back. Here the clock runs fast: a minute every 0.7 seconds. Between one five minutes and the next, the extra minutes are counted by four thin corners around the grid, like the crop marks of a sheet, lighting up in orange one at a time. On the five minutes the corners go out, the words no longer needed narrow and thin back into the dark, from the last letter to the first, and straight after the new words light up letter by letter: TWENTY PAST TEN, TWENTY FIVE PAST TEN, HALF PAST TEN, and after the half TWENTY FIVE TO ELEVEN. At the bottom left the name of an invented coffee shop, on the right the time in figures.

How it works

A grid of our own

The ten rows of eleven letters are our own design: every word has its place (row, column, length) and the minute words come before PAST and TO, which come before the hours, so every sentence reads left to right and top to bottom. The spare letters hide the coffee shop’s name, OSTRA, and BREWS. The cells belong to a fixed-size CSS grid: width and weight change without moving the neighbours.

From the time to the words

The minutes are rounded to the five: zero is O’CLOCK, from five to thirty it says PAST the hour, from thirty-five on TO the next hour (TWENTY FIVE, TWENTY, QUARTER, TEN, FIVE). The minutes left over, one to four, light the corners. The whole sentence also goes into a hidden paragraph with aria-live, so whoever uses a screen reader hears it.

Every letter has a number

Every cell has a value v from 0 to 1: width from DARK_WIDTH to LIT_WIDTH, weight from DARK_WEIGHT to LIT_WEIGHT and colour from dark grey to light, worked out on each frame in gsap.ticker and written only when they change. Lighting up is a tween of v to 1 with back.out(2.4), so it passes 1 by a little and comes back: the letter widens a hair too far and settles.

The choreography of the change

When the words change the cells lit before and after are compared: the ones that stay (IT IS, PAST, the hour) do not move, the ones leaving go to 0 with power2.inOut, from the last to the first, and 0.38 seconds later the new ones light up in reading order, staggered by STAGGER.

Time running

A gsap.delayedCall of TICK seconds moves the clock on by a minute and calls itself again; with REAL_TIME it checks the real time once a second. The corners are four elements with two 1 px borders, like crop marks, and change colour with a tween.

Values to change

Name	File	Default	What it changes
`START`	script.js	`'10:16'`	The time the clock starts from (hours:minutes).
`TICK`	script.js	`0.7`	How many seconds a minute lasts: the clock runs fast so the words change every few seconds.
`REAL_TIME`	script.js	`false`	With true the clock shows the real time of whoever is looking, a minute a minute.
`LIT_WIDTH`	script.js	`118`	The width of the lit letters, on the wdth axis (62 to 125).
`LIT_WEIGHT`	script.js	`780`	The weight of the lit letters (100 to 900).
`DARK_WIDTH`	script.js	`66`	The width of the other letters.
`DARK_WEIGHT`	script.js	`140`	The weight of the other letters.
`STAGGER`	script.js	`0.035`	The seconds between one letter lighting up and the next.

Try them in the Playground

When to use it

For the page of a coffee shop, a bar or a shop that says whether it is open, for the opening of a hotel or a holiday home, for a watchmaker, or as a piece to show in a typography portfolio. With REAL_TIME it becomes a real clock to keep in a corner of the page.

On phones

The same animation: the grid takes almost the whole width of the screen and the cells are measured again, with the type in proportion.

With reduced motion

The letters do not change width or weight: they all have the same shape and the ones that say the time light up and go out only through their colour, as a fade, all together. The corners change colour as usual.

Pitfalls

With the letters in a normal line of text, widening one moved all the others: every letter sits in a cell of a fixed-size CSS grid, centred, and can change width without disturbing its neighbours.
A grid copied from a clock on sale would have been theirs: this one is drawn from scratch, with the words in an order that can say every time and the spare letters hiding the coffee shop’s name.
Unlit letters too dark disappeared and the grid made no sense; too light they made noise. With #34312d on #0f0e0d they barely show, just enough to tell it is a grid of letters.
At midnight and noon hour zero is TWELVE: the list of hours starts from TWELVE and is read with the remainder of the division by twelve.

Libraries

GSAP 3.15.0, Archivo (font variabile, assi wdth e wght) 5.3.0.

Compressed with gzip, the three demo files weigh 5.1 KB; the libraries: GSAP 28 KB.

Testing

Tested on 19 October 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: To do

License

Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.