# Day Arc Locations

> Multi-location directory section with timezone-aware operating arcs, dynamic day and time availability filtering, and responsive Flip visit drawers.

Canonical: https://gsapvault.com/sections/day-arc-locations-section
Live demo: https://gsapvault.com/demos/day-arc-locations-section/index.html

| Property | Value |
|----------|-------|
| Type | section |
| Tier | paid |
| Price | Included only in the Vault |
| Difficulty | advanced |
| Plugins | Flip |
| Techniques | flip-layout-transition, svg-arc-drawing, time-zone-aware-hours, filter-chips, interruptible-transitions, progressive-enhancement, keyboard-navigation, container-queries, responsive-section |
| Uses Lenis | No |

## Overview

Day Arc Locations is a multi-site directory section designed for businesses operating across multiple venues or time zones. An SVG day arc spans the masthead from midnight to midnight, mapping each branch to a live indicator plotted at its current local time and illuminated during open hours. Regional timezone clocks sit immediately below the heading for quick scannability.

Each branch is presented as a portrait arched card featuring location photography, amenity tags, and real-time open/closed status. The arched frame integrates an individual dial showing the venue's operating window for the selected day. Filter chips allow visitors to isolate locations by city, available amenities, or target day and time. When querying specific hours (such as Saturday at 23:00), each marker transitions smoothly along the arc curve while unavailable venues filter out. Expanding a location uses GSAP Flip to transition the card into a full-width visit drawer with address details, transit guidance, booking links, and a weekly timetable.

The demonstration features Kallio Saunas, a fictional bathhouse group across London, Copenhagen, Oslo, and Helsinki. The structure adapts directly to hospitality groups, retail branches, studio networks, fitness spaces, or cultural institutions.

## Features

- SVG day arc plotting each branch at its local time zone with dynamic open-hour illumination
- Real-time open/closed status calculation handling overnight hours and weekly schedules across time zones
- Individual card arch dials displaying daily operating windows and current local time
- Filter chips for city, amenities, and dynamic day/time schedule queries
- Smooth arc marker transitions calculating coordinates along bezier curves during time filtering
- GSAP Flip layout animation expanding selected locations into full-width visit plans
- Interruptible animation queues with instant snap handling for prefers-reduced-motion
- Progressive enhancement displaying complete addresses, directions, and static timetable without JavaScript
- Zero empty-state dead ends with single-action filter reset
- Independent multi-instance support with dal:change events and programmatic open() API

## Use Cases

- Sauna, bathhouse, and wellness groups across regional cities
- Boutique cafe, bakery, and restaurant groups with multiple branches
- Climbing gyms, fitness studios, and co-working networks
- Galleries, cultural venues, and retail flagship stores

## Vibe-Code Ready Setup

This website section includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

Each location is marked up as a list item with data attributes defining its region, IANA time zone, amenity keys, and operating hours rows. The client script parses this markup to automatically generate filter options, calculate regional time differences via Intl.DateTimeFormat, and construct the SVG path arcs.

Schedule queries compare target timestamps against each location's local timetable, accurately handling shifts that cross midnight. Transitions between filter states and expanded cards record geometry via Flip.getState before mutating the DOM, allowing fluid responsive reorganization without abrupt jumps. Marker positions along circular arc paths are animated using tweened progress values evaluated against trigonometry functions.

## Documentation

How this website section works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### Quick Start

1. Copy the `<section class="dal" ...>` element from `index.html`, between the `copy from here` and `copy to here` comments. Keep the small inline `<script>` just inside it (see [Boot gate](#boot-gate)).
2. Copy `assets/style.css`, `assets/script.js` and `assets/img/`.
3. Load the fonts, the stylesheet and the scripts:

_Code snippet omitted: it ships with the download._

GSAP and Flip are optional: without them every change is instant. Without `script.js` the section shows every place with its full address, links and static hours. There is no build step.

Everything in `index.html` outside the section (the page background in the `<style>` block) is demo context only.

### Make it yours

#### Brand controls

Everything visual reads from variables on the section root in `assets/style.css`:

| Variable | Default | Controls |
| --- | --- | --- |
| `--dal-ground` | `#0e2130` | Section background |
| `--dal-ground-2` | `#13293b` | Chips and selects |
| `--dal-ink` | `#edf0ea` | Main text; the arcs are tints of it |
| `--dal-muted` | `#a6b6bf` | Secondary text |
| `--dal-rule` | `rgba(237, 240, 234, 0.18)` | Hairlines; keep it a tint of `--dal-ink` |
| `--dal-accent` | `#ffb25e` | Suns, lit hours, active chips, primary link |
| `--dal-accent-ink` | `#1c1206` | Text on the accent |
| `--dal-closed` | `#6f8796` | Rings of closed suns on the arc |
| `--dal-font-display` | Instrument Serif | Heading and place names |
| `--dal-font-text` | Martian Mono | Everything else |
| `--dal-max` | `1360px` | Content width |
| `--dal-gutter`, `--dal-gap` | fluid | Side padding and grid gap |
| `--dal-radius` | `3px` | Chips, selects and buttons |

A light rebrand, set on the root or in your own stylesheet:

_Code snippet omitted: it ships with the download._

Check the contrast of your own colours: `--dal-muted` on `--dal-ground`, and `--dal-accent-ink` on `--dal-accent`, both need at least 4.5:1.

#### Text and heading

The brand line, heading, lede and fine print are plain HTML in the section header and footer. The section heading is an `h2` and each place name an `h3`; change the tags to suit your page, the styles hang off the classes. The `<em>` in the heading sets its second line in italic accent colour; remove it for a single-colour heading.

#### Locations

Each location is one `<li data-dal-place>` in the `<ol data-dal-list>`. **Add, remove or reorder them freely**; the filters, clocks, suns, counts and statuses are all derived from these items. Two to about nine read well in the grid. With a single location the filters and toggle button step aside and the visit details show open.

For each location, edit:

- `id` on the `<li>`, and the matching `aria-controls` / visit `id` and name `id` (keep them unique on the page).
- `data-area`: the area it is grouped under in the City filter and clocks (a city, neighbourhood, or region).
- `data-tz`: its IANA time zone, such as `Europe/London`, `America/New_York`, or `Australia/Sydney`. Open and closed states are computed in this zone regardless of visitor timezone.
- The area line, name, pitch, and amenities list. Each `<li data-offer="key">Label</li>` becomes a filter chip; locations sharing a key share a chip.
- The visit block: address, transit route, and booking/direction links.
- The hours table (below).

#### Hours

Each row of the hours table is read by the script and also shown to people:

_Code snippet omitted: it ships with the download._

- `data-days`: any of `mon tue wed thu fri sat sun`, separated by spaces or commas.
- `data-open` / `data-close`: 24-hour local times. `24:00` means midnight at the end of the day. **A close earlier than the open runs past midnight**: `15:00` to `02:00` on Friday keeps the place open until 02:00 on Saturday morning, and the Saturday arc lights 00:00 to 02:00.
- `data-closed`: a closed day (optional; days with no row are closed too).
- Two sessions on one day (a lunch break) are two rows with the same day.

The visible text in `<th>` and `<td>` is what people read without JavaScript, so keep it in step with the attributes. The caption names the zone the hours are written in.

#### Links

`Directions` points at a Google Maps directions URL with the place's latitude and longitude, and `Book a session` at `https://example.com/book/...`. **Both are examples: replace them with your own.** Any map or booking service works; nothing is embedded and no API key is needed.

#### Photos

Each place has one photo in `assets/img/`, in two sizes:

| Slot | Files | Size | Notes |
| --- | --- | --- | --- |
| Deptford Creek | `deptford.webp`, `deptford-sm.webp` | 960x1200, 560x700 | 4:5 portrait |
| Hackney Wick | `hackney.webp`, `hackney-sm.webp` | same | |
| Islands Brygge | `brygge.webp`, `brygge-sm.webp` | same | |
| Nordhavn | `nordhavn.webp`, `nordhavn-sm.webp` | same | |
| Sørenga | `sorenga.webp`, `sorenga-sm.webp` | same | |
| Hernesaari | `hernesaari.webp`, `hernesaari-sm.webp` | same | |

To replace one, point the `<img>` `src` and `srcset` at your file and rewrite its `alt`. Any aspect ratio works: the frame is always 4:5 with an arched top, and the photo is cropped to fill it (`object-fit: cover`). If your subject is off-centre, set its focal point on the image:

_Code snippet omitted: it ships with the download._

A single file is fine; drop the `srcset` and `sizes` if you only have one size. Keep the arch clear of the subject's head when you choose a crop: the top fifth of the frame is curved. The first two photos load eagerly and the rest lazily; if you reorder the places, move `loading="eager"` to whichever are in the first row.

### Behaviour and options

- **The arc** is drawn by the script into `[data-dal-dial]`: midnight at both ends, noon at the top, dotted before 06:00 and after 21:00. There is one indicator per location at its local time; locations in the same zone stack inward. When a location is expanded, its active operating window highlights on the arc.
- **Each arched photo** carries a ring with that location's daily hours and an indicator at local time; in the expanded visit view the ring gains 06, noon, and 18 marks.
- **Filters**: City (single selection), Amenities (multi-match), and Schedule (Any time, Open now, or a specific day and time). The time list is the `<select data-dal-time>` in the markup; values are minutes after midnight.
- **Open now** statuses and markers refresh every 30 seconds.
- **Hours & access** expands one location at a time across the full row; opening another closes the active one.

#### API and events

_Code snippet omitted: it ships with the download._

`destroy()` stops the clock, disconnects its observers, removes its listeners, generated filters, arcs, rings and suns, reverts its own GSAP work and returns the markup to the no-JavaScript state. It touches nothing outside its root. Every `[data-day-arc]` on the page initialises independently.

#### Boot gate

The one-line inline script inside the section adds `dal--pending` before the first paint, so the visit details collapse without a jump when the script is coming. If `script.js` has not taken over after four seconds (blocked, failed or slow), the class is removed and every visit plan is shown again. Remove the inline script if your policy forbids inline scripts; the section still works, with a brief reflow on load.

### Accessibility and integration

- Hours & access is a native button with `aria-expanded` and `aria-controls`; closed visit plans are `inert` and `aria-hidden`. Filters are native radio buttons, checkboxes and selects in labelled fieldsets, and the result count is a polite live region.
- The arcs and suns are decorative (`aria-hidden`); every fact they show is also in text: the clocks under the heading, each place's status line and its hours table, with today's row marked.
- Reduced motion makes every change instant, including a change of preference while the page is open. Fast or reversed input settles on the last request.
- Without JavaScript every place shows its address, links and static hours.
- The layout responds to its own width (container queries named `dal`), so it works in a narrow column as well as full width: three columns from 1000px, two from 620px, one below. Under 1000px the heading moves under the arc; under 600px the arc drops its time labels because the clocks carry them.
- The section does not install smooth scrolling, change scroll behaviour or pin anything.

### Dependencies and credits

- [GSAP](https://gsap.com) 3.15 and its Flip plugin, from jsDelivr. Optional.
- [Instrument Serif](https://fonts.google.com/specimen/Instrument+Serif) and [Martian Mono](https://fonts.google.com/specimen/Martian+Mono), SIL Open Font License, from Google Fonts.
- Photographs: generated concept images made for this section. They depict no real place, business or person; replace them before publishing.
- Kallio Saunas and all addresses, schedules, and links in the demo are fictional sample assets.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This website section is included only in the Vault, for existing and new owners. It is not sold individually. The standard licence covers unlimited personal and commercial projects; bundled assets retain their own licence requirements.

- [Get the Vault](https://gsapvault.com/pricing)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt