Word Clock

Text-based Clock is a web application that displays the time in a unique and creative way using words arranged in a matrix. It mimics the layout of a word clock, presenting time in a more visually appealing format.

Features

• Creative text-based representation of time, rounded to the nearest five minutes.
• Customizable background textures and LED colors, saved in the URL so a setup can be shared.
• Screen readers announce the time as a sentence, and the settings work with the keyboard.

Live Demo

Check out the live demo here.

Tech Stack

• Next.js 16 (App Router) and React 19
• Tailwind CSS 4
• TypeScript 7 for type checking, with TypeScript 6 installed alongside for ESLint and the Next.js build (see TypeScript)
• Vitest for unit tests

Getting Started

You need Node.js 20.19+, 22.13+, or 24+ (the version in .nvmrc is used in CI).

npm install
npm run dev

Then open http://localhost:3000.

Script	What it does
npm run dev	Start the development server
npm run build	Create a production build
npm run start	Serve the production build
npm run lint	Lint with ESLint
npm run typecheck	Type-check with TypeScript 7
npm test	Run the unit tests

GitHub Actions runs lint, typecheck, tests, and build on every push to main and on pull requests.

URL Parameters

The selected texture and LED color are stored in the URL, for example /?texture=wood-1&led=yellow. Unknown values fall back to the defaults.

• texture: stone-1, stone-2, stone-3, stone-4, wood-1, wood-2, fabric-1, gold-1, leather-1, concrete-1, concrete-2, rust-1 (default), rust-2, metal-1
• led: white (default), yellow

Project Structure

• src/lib/wordClock.ts: the letter grid and the time-to-words logic (pure and unit-tested)
• src/lib/settings.ts: textures, LED colors, and URL parameter parsing
• src/hooks/: useClockWords (current time, updated every minute) and useClockSettings (URL settings)
• src/app/components/: the clock face and the settings panel
• src/assets/textures/: background images
• src/app/fonts/: the Word Clock font

TypeScript

tsc is TypeScript 7 (installed as @typescript/native). The typescript package points to Microsoft's TypeScript 6 compatibility package, because ESLint's TypeScript rules don't support TypeScript 7 yet and Next.js type-checks next build with whatever typescript resolves to. Once typescript-eslint supports TypeScript 7, both entries can be replaced with a single typescript dependency.

Clock Grid

The Clock Grid displays time in a matrix format, with each cell containing a word representing a specific time element. This layout offers a clear and intuitive way to read the time, forming the foundation of the Text-based Clock application's unique presentation.

I T L I S A S A M P M
A P Q U A R T E R D C
T W E N T Y X F I V E
H A L F S T E N F T O
P A S T E R U N I N E
O N E S I X T H R E E
F O U R F I V E T W O
E I G H T E L E V E N
S E V E N T W E L V E
T E N S E O C L O C K

Images

All texture images used in this project have been downloaded from Unsplash.

Font

The custom font used in this project is called "Word Clock," which was specially designed for this application. You can download the font from here.

License

This project is licensed under the MIT License. See the LICENSE file for details.