Horologist is a JavaScript library for animating DOM elements to represent time in the same ways as many of the world's greatest haute horologist watchmakers. It supports and enables many of the different watchmaking complications and variations such as chronographs, minute repeaters, multiple time zones, perpetual calendars and more.

Demos

See the Horologist library in action.

• A. Lange & Söhne - Datograph Perpetual Tourbillon
• A. Lange & Söhne - Zeitwerk
• F.P. Journe - Tourbillon
• Kari Voutilainen - GMR
• Speake-Marin - Velsheda

Getting Started

To get started, first install horologist into your project.

npm i horologist

yarn add horologist

With the package installed, import the main Watch class, instantiate it with its settings, and call the start() method.

import { Watch } from 'horologist';

const settings = {
    id: "k0-seasons",
    dials: [{ ... }],
    moonphase: { ... },
};

const Sarpaneva = new Watch(settings);
Sarpaneva.start();

Complications

Horologist aims to recreate the work of haute horology watchmaking in a digital format by emulating many of the handmade complications and variations. View each complication to learn more about it, its features and settings API.

| Complication | Documentation | Description | | --------------------- | ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | | Chronograph | Docs | Also referred to as a “stopwatch” function, a chronograph typically uses subdials to keep track of seconds, minutes, and hours. | | Date Indicator | Docs | A date calendar shows the date of the month. | | Day Indicator | Docs | A day calendar shows the day of the week. | | Day / Night Indicator | Docs | A day/night indicator can be a two-color disc showing day or night through either light and dark coloured segments. | | Dial | Docs | A dial serves to indicate hours, minutes and seconds. | | Equation of Time | Docs | The equation of time is the difference between true solar time and mean time. | | Foudroyante | Docs | A hand that makes one rotation every second, pausing two thru ten times to indicate fractions of a second. | | Leap Year Indicator | Docs | A mechanism to indicate the current year's relationships to the next leap year. | | Minute Repeater | Docs | A highly complicated watch function that audibly strikes the time in hours, quarter hours, and/or minutes. | | Month Indicator | Docs | A month indicator displays the current month of the year. | | Moonphase | Docs | Displays new moon, first quarter moon, full moon, and last quarter moon by means of a disk that rotates beneath a small aperture. | | Power Reserve | Docs | A subdial or gauge used to display how much power remains before the watch stops. | | Watch | Docs | The root class which controls all complications. | | Week Indicator | Docs | A week calendar displays the current week of the year in either standard or ISO formats. |

Mentions

There are a few libraries that allow Horologist to be its best, and they should be acknowledged.

• date-fns
• lunarphase-js
• suntimes

Contact

@danielyuschick on Twitter