A liquid-glass time instrument that turns the present moment into five live progress bars: day, week, month, year, and century.
Timeless detects the visitor's browser timezone and shows how much of each current time span has already passed. It is designed as a compact single-viewport experience: everything important is visible at once, with distinct color systems, precise calendar math, and fluid motion for each scale of time.
Repository: github.com/onekapisch/timeless
Most clocks tell you what time it is. Timeless shows what time is doing.
It reframes time as a visible resource: the day in motion, the week unfolding, the month advancing, the year accumulating, and the century slowly passing underneath all of it.
- Five live progress indicators for day, week, month, year, and century.
- Browser timezone detection through
Intl.DateTimeFormat().resolvedOptions().timeZone. - Single liquid-glass chronoscope with five time bands, clear visual hierarchy, keyboard-safe semantics, and no nested-card clutter.
- Distinct palettes by time scale:
- Day: sunrise amber
- Week: indigo to sky
- Month: lunar teal to ice
- Year: seasonal green to gold
- Century: cosmic violet to magenta
- High-quality bar animation using Framer Motion springs, a single flowing glint, luminous edges, and reduced-motion support.
- Deterministic time math tests for day, daylight-saving transitions, ISO-style week, leap-year month/year handling, and the 2000-2099 century convention.
- Launch metadata including an application icon, Open Graph image, web manifest, robots route, sitemap route, and social cards.
- Security headers and CI for baseline browser hardening and verified push-based quality checks.
- Privacy-friendly by default: no analytics, cookies, database, API routes, or stored user data.
| Layer | Choice |
|---|---|
| Framework | Next.js App Router |
| Language | TypeScript strict mode |
| Styling | Tailwind CSS v4 |
| Animation | Framer Motion |
| Testing | Vitest |
| Package manager | pnpm |
Timeless calculates progress using local browser time:
- Day: local midnight to next local midnight.
- Week: ISO-style Monday start.
- Month: first day of the current month to first day of the next month.
- Year: January 1 to January 1 of the next year, including leap years.
- Century: common UX convention of
2000-01-01through2099-12-31.
pnpm install
pnpm run devOpen http://localhost:3000.
Run the full local verification set before publishing changes:
pnpm run test
pnpm run lint
pnpm run type-check
pnpm run buildapp/
globals.css Global theme, fonts, background, and design tokens
layout.tsx App shell and font setup
page.tsx Server page mounting the dashboard
components/
time-progress-dashboard.tsx
ui/progressive-flux-loader.tsx
lib/
time-progress.ts Pure time calculation utilities
utils.ts Class name helper
tests/
time-progress.test.ts Time calculation coverage
No secrets are required.
Set this public value in your deployment environment before release:
| Variable | Required | Purpose |
|---|---|---|
NEXT_PUBLIC_SITE_URL |
Public deployment | Produces the canonical host and sitemap URL. Example: https://timeless.example.com |
.env.local.example is included for local setup. Real secrets must never be committed.
Deploy as a standard Next.js app. Vercel is the simplest path:
- Import the GitHub repository into Vercel.
- Use the default Next.js build settings.
- Set
NEXT_PUBLIC_SITE_URLto the final HTTPS URL. - Attach the custom domain, then verify
/robots.txt,/sitemap.xml,/manifest.webmanifest,/icon, and/opengraph-image.
GitHub Actions runs tests, lint, strict type checking, and a production build for pull requests and pushes to main.
Timeless does not store data. Timezone detection happens locally in the browser and is used only to calculate the visible progress values.
No reuse license has been selected yet. The repository is public for viewing and portfolio purposes.
July 20, 2026