kala.watch

An interactive online tool that visualizes the passing of time.

Technologies

I use Nuxt 3 as the frontend framework.
Pinia is used to manage global state.
To keep track of time and handle all the weird localization shit, I use Day.js. It rules.
Some visualizations leverage P5.js.
GSAP is used for all sorts of UI animations.

Setup

Make sure to install the dependencies:

# step 1: use proper node version (v18.5.0 at the time of this writing)
# if you use nvm, like me, run this:
nvm use

# step 2: install depenencies
# i use npm. but use whatever package manager you prefer, babe.
npm install

Development Server

Start the development server on http://localhost:3000

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Check out the deployment documentation for more information.

How to add a new time unit

Create a new .vue component (./components/time-[UNIT_NAME].vue). Important to note you must use the time- prefix here!
Register the new [UNIT_NAME] within the timeUnitsSupported array found within ./store/time. Doing this will add it into the site-wide navigation.
Voila. That's it!

Standard units

Day.js, the library that handles most all of the time logic throughout the app, has some pretty handy methods for comparing now against any unit you can dream up. For standard units like second, minute, hour, etc., you can use endOf(). Check out ./components/time-month.vue for an example.

Nonstandard units

For non-standard units - say for example, a scaramucci (10 days) – we take a more hands-on approach. First, we figure out how many milliseconds long that time unit is. In this case we use a handy lil function that converts days to milliseconds called daysToMsec. We then compare now against that time unit duration. Check out ./components/time-scaramucci.vue for an in-depth example.

How to add a new visualization

Create a new .vue component (./components/visualizations/[NAME].vue). Important to note you must include this within the visualizations directory!
Register the new [NAME] within the styleList array found within ./store/ui. Doing this will add it into the site-wide navigation.
Voila. That's it!

What's with the name?

Glad you asked. Kāla is a Sanskrit word that has fluid meanings and often refers to "time", "destiny", or "fate". Other translations define Kala as "an impersonal messenger of death". Gloomy as hell, I know... but we're mortals after all; time and death go hand in hand.

According to Monier-Williams, kāla's verbal root (kal) means "to calculate".

The name kala was ultimately chosen because this project is a time calulator, aka: a watch.

Now, look, I'd be lying if I said I knew all of this beforehand. Like most things, I stumbled across this meaningfully rich word serendipitously while researching various time units I could register within the app (one kālá corresponds to 144 seconds).

Anyhow. That's the story.

Todo

Add "punct" : 15mins
Add QUADRANT: 6 hours
Add MILEWAY: 20mins
Pregnancy: 280days

Inputs

Time scale

egstad / kala