Built for the seconds before the content.
Loading screens and video intros give you almost no time and no interaction — so the mark does exactly two things, forever: the orbits drift around each other at a slow, unhurried pace, and the centre dot breathes. It never ends, never stutters, and never needs a frame of setup.
CSS keyframes with linear timing on the orbits — the loop point is invisible, so a 3-second cut and a 3-minute hold look identical.
Two counter-rotating ellipses and a pulsing circle. Nothing to execute, nothing to block first paint.
Pure vector: legible from a 24px favicon to a 4K title card, on light or dark backgrounds.
With prefers-reduced-motion the mark resolves to its finished, static state — still on brand, just still.
Teal, clockwise, 16s linear.
Coral, counter-clockwise, 22s linear — the mismatch keeps the crossing angle alive.
Lime, 2.4s ease-in-out pulse to 1.3×, with a halo pinging outward.
Ring traces over 1.4s, orbits fade, dot pops — one clean opening beat for a title card.
One clock for the whole pay cycle.
Everything the office argues about at month end, settled while the day is still happening.
Time & attendance
Clock in, start a break, clock out — in the browser, on the shop floor or at the desk. Overnight shifts keep their (next day) marker.
Payroll runs
Approve a period, export the totals, close the month. Every number traces back to a punch somebody actually made.
Schedules
Fixed hours, split shifts, rest days and flexible days — dated, so last week is still judged by last week's roster.
Leave & requests
Staff ask, admins approve or decline, and both outcomes land in that person's change history with a name attached.
Audit trail
Every edit records who did it, what changed and when. The sheet explains itself without anyone rebuilding it.
Reporting
Day-by-day timesheets and punch logs as CSV, in 12-hour US Eastern time, ready for whatever payroll system comes next.
Four colours, two speeds, one mark.
Sampled from the lockup. Teal carries the structure, coral crosses it, lime is only ever the pulse — that restraint is what makes the dot readable at 24px.
Orbit A 16s clockwise, orbit B 22s counter-clockwise. Both linear — easing would make the loop visible.
Dot scales 1 → 1.3 → 1 over 2.4s ease-in-out, halo expands to 3.4× and fades on the same clock.
Ring draws 1.4s, orbits fade in at 0.25s/0.45s, dot pops at 0.5s. Runs once, then loops.
Drop the mark anywhere.
sundial-mark.svg is a
single self-contained file — animations included. Reference it from an
<img>, an app splash, a Lottie-style hold frame, or hand it to
your editor as the exact reference for the title card.
<img src="sundial-mark.svg" width="240" height="240" alt="Sundial">
<!-- or inline it and restyle the strokes -->
<object type="image/svg+xml" data="sundial-mark.svg"></object>SUNDIAL SOLSTICE
Open the timesheet, or read how the backend fits together. Same deploy, same branch.