...clock

Just live, transparent-background clock built with Svelte.

Everything is configured through URL query parameters — no UI, no build step needed to use it, just a URL (or local file) with ?params appended.

Can be used for OBS/Streamlabs overlays, desktop widgets, etc.

https://clock-overlay.vercel.app/?type=digital&format=12h&show_date=true&date_format=full&show_weather=true&location=Kigali&weather_format=detailed&color=dark&font=Outfit

Quick start

For most purposes, you can skip the following steps and use https://clock-overlay.vercel.app as your base URL :)

npm install
npm run dev      # local dev server, e.g. http://localhost:5173/?type=analogue
npm run build    # outputs a SINGLE self-contained dist/index.html

npm run build inlines all JS/CSS into one dist/index.html. That means you can:

• Host it anywhere (Vercel, Netlify, GitHub Pages, S3, your own server) and point an OBS Browser Source at the URL with your query params, e.g. https://your-domain.com/?type=digital&show_weather=true

• Use it as a local file — in OBS, add a Browser Source, check "Local file", pick dist/index.html, then add ?type=analogue etc. directly after the filename in the same field (OBS accepts file:///path/to/index.html?type=analogue).

Either way the background stays transparent, so it composites straight over your scene, and everything is sized in vmin/SVG-viewBox units so it always scales proportionally to fill whatever browser-source dimensions you set.

Parameters

Param	Type / Values	Default	Applies to
type	analogue | digital	digital	all
format	24h | 12h	24h	digital clock only
show_date	true | false	false	all
date_format	DD/MM/YYYY | MM/DD/YYYY | Full	DD/MM/YYYY	date row
show_weather	true | false	false	all
weather_format	minimal | detailed	minimal	weather row
units	c | f	c	weather row
location	any city name, e.g. Rotterdam	—	weather row
lat	decimal latitude, e.g. 51.92	—	weather row
lon	decimal longitude, e.g. 4.48	—	weather row
color	light | dark | hex code, e.g. %232a003b	light	all
font	any Google Font name, e.g. Inter, Playfair_Display	Inter	all

Details

type

analogue renders a round clock face (SVG, hour/minute/second hands). digital renders large digit text. Anything other than analogue falls back to digital.

format

Only affects the digital clock. 24h shows 00–23. 12h shows 01–12 with an AM/PM label next to the time. Ignored when type=analogue.

show_date

When true, adds a date line below the clock, formatted per date_format.

date_format

• DD/MM/YYYY → 30/08/2026
• MM/DD/YYYY → 08/30/2026
• Full → localized long form, e.g. Sunday, August 30, 2026

Any other value falls back to DD/MM/YYYY.

show_weather

When true, adds a weather row (icon + temperature, optionally a condition label) below the clock/date. Weather comes from Open-Meteo — no API key required.

weather_format

minimal shows just the icon and temperature. detailed also adds a short condition label (e.g. "Rain", "Clear", "Overcast").

units

c for Celsius, f for Fahrenheit. Anything else defaults to Celsius.

location, lat, lon

Coordinates for the weather lookup are resolved in this order:

1. lat + lon, if both are present (highest priority)
2. location (a city name), geocoded automatically via Open-Meteo's geocoding API
3. the browser's Geolocation API, as a last resort

Since OBS's embedded browser usually can't show a location-permission prompt, pass location= or lat/lon explicitly rather than relying on step 3. Weather refreshes every 10 minutes; the clock itself updates every second regardless.

color

Sets the color of every element (clock, date, weather text and icons) — there's a single accent color, no separate per-element colors.

• light → white
• dark → near-black
• any hex code, e.g. color=%232a003b (URL-encode # as %23)

Unrecognized values fall back to light.

font

Any Google Fonts family name. Spaces and underscores are both accepted — Playfair Display and Playfair_Display both work. The font is loaded at runtime from Google Fonts, so the machine running OBS needs internet access for custom fonts to render correctly (falls back to a generic sans-serif otherwise).

Examples

?type=analogue&color=dark
?type=digital&format=12h&show_date=true&date_format=Full
?type=digital&show_weather=true&location=Rotterdam&units=c&weather_format=detailed
?type=analogue&color=%232a003b&font=Playfair_Display

Project structure

src/
  App.svelte              root: reads params, lays out clock/date/weather
  lib/params.js            URL query param parsing + defaults
  lib/dateFormat.js        date string formatting
  lib/weatherCodes.js      WMO weather code -> icon/label mapping
  lib/DigitalClock.svelte
  lib/AnalogueClock.svelte
  lib/Weather.svelte
  lib/WeatherIcon.svelte