Spiral combines a clock and calendar in one continuous view. Each turn represents a day, events fill the hours they occupy, and nighttime shading shows the time between sunset and sunrise at your chosen location.
- Drag around the center to move through time, or scroll to step through days.
- Click or tap an empty hour to create an event. Set its title, times, color, and calendar, then choose Add Event. The + button opens the same options in a form.
- Pull the time display at the bottom upward to browse and search your events.
- Tap the time display to return to now.
Spiral runs in your browser. You can also install it using your browser's Install app or Add to Home Screen option. In Safari on iPhone or iPad, look for Add to Home Screen in the Share menu. Once its files are cached, the clock, events, and settings work offline; new place searches need a connection.
Events and settings are saved in this browser. They do not sync automatically between devices. To keep a backup or move events, open + > Events > Export All and choose JSON or Calendar (.ics). Clearing browser data removes locally saved events and settings.
Place searches send the text you submit to Open-Meteo. Device-location and coordinate lookups use a reverse-geocoding service. Sharing an event sends it to the external calendar you choose. Study recordings are saved in this browser and can be downloaded as files.
Open windows share event changes. If saving fails or another window has changed the events you are editing, a notice offers recovery actions, including downloading your unsaved events. Unreadable saved data is preserved so you can recover it.
Click or tap an event to open its details. Edit its title, description, times, or calendar; changes to an existing event are saved automatically. New drafts are saved only when you choose Add Event. Home and Work are the default calendars, and you can add your own.
To change an event's color, select it and tap its colored ring. Drag the start or end handle to change its duration directly on the spiral. Overlapping events stack. A mouse or pen click selects the event under the pointer. Touch taps select the hour; repeated taps cycle through its events. The chevrons in the details let you cycle with either input. + New creates another event, and Delete removes the selected event.
When editing text, Enter saves a title, Ctrl+Enter saves a description, and Escape cancels the text edit. Leaving the field, switching events, or closing the details finishes the active edit.
add_event.mp4
Pull up the bottom time display for the chronological event list. Search by name, choose which calendars are visible, or long-press an event's calendar tag to show only that calendar. Selecting a list item jumps to the event and opens its details. Each row has actions to delete or share it with an external calendar; the list's bulk actions apply to visible events.
The Events section in the + panel also offers Export All and Import Files. Imports support Spiral JSON and .ics files, including timed and all-day events. Matching event IDs update existing events; older revisions are skipped. Invalid files are rejected before adding any events. Recurring schedules, cancellations, and custom non-IANA time zones are not supported. See the time and import guide for the exact rules.
Drag clockwise to move forward and counterclockwise to move backward. Release while moving to let the spiral coast. Scrolling or a two-finger pinch steps through days. Tap the time display, double-tap outside the spiral, or press Space or Home to return to the live clock.
One turn covers the day's 24 clock hours. Midnight has a thicker dividing line, months have thicker arcs, and the weekday gradient resets on Mondays. Hovering over an hour shows its date and time. Opening details can switch the view to circles and zoom in; clicking outside or pressing Escape closes it.
Keyboard shortcuts apply when you are outside a text field:
| Key | Action |
|---|---|
| Left / Right or A / D | Rotate; add Alt for finer movement or Alt+Shift for faster movement |
| Up / Down or W / S | Step through days; add Alt for hours or Alt+Shift for weeks |
| Space or Home | Return to now |
| N, +, or = | Open Add Event |
| F or / | Search events |
| Delete or Backspace | Delete the selected event |
| Escape | Close the current view or panel |
year_loop.mp4
Under Settings > Nighttime Shading, search for a city, place, or postal code, enter coordinates, or use your device's location. Search runs when you press Enter or the search button. Use Use location time zone to display times in the selected place's zone. Changing the display zone preserves event times.
During a backward clock change, the repeated hour occupies two consecutive sections under one hour label. Their divider appears when an event occupies the hour or Segment edges is enabled. These sections are two occurrences of the same clock hour; simultaneous events still stack within each section.
New timed events last one elapsed hour by default. At a repeated time, you can choose the first or second occurrence, identified by its UTC offset. The duration label shows the actual elapsed time. Skipped clock hours stay blank, and manually entering a nonexistent time shows an error. All-day events keep their calendar dates when you change zones.
Open Settings for dark mode, sound and vibration, color palettes, layout presets, and overlays. Static Mode keeps midnight at the top; turning it off keeps the spiral's end at the bottom. Circle Mode uses concentric day rings. Reset Settings restores the defaults.
Show Dev Options reveals controls for the number of days, scale, coil thickness, guide lines, and labels. You can also adjust the day count with Shift+scroll or a three-finger pinch, and coil thickness with Ctrl+scroll or a four-finger pinch. A Radius value of 1 gives coils equal thickness; higher values make outer coils wider. The + panel includes a random-event generator for trying different calendars and overlaps.
Study Session records interactions for a study. Enter a participant ID, choose a phase, start and stop recording, then download the data. Open Study Analysis lets you inspect saved or imported sessions and export CSV summaries and an HTML report. The Study Session section and Dev Options button are visible by default, with their additional controls collapsed.
Spiral is a static web app with Canvas rendering and a service worker for offline use. There is no build step or application backend.
- Development guide: run locally, tests, module map, provider configuration, and study tools.
- Time and import guide: event identity, time zones, clock changes, and import limits.
- Performance guide: rendering design, benchmarks, and remaining limits.