# Time of Day Hero

> A hero for a place that changes through the day: a giant photographic dial turns to the daypart on show, and the panel, headline and colour ground change with it.

Canonical: https://gsapvault.com/sections/time-of-day-hero-section
Live demo: https://gsapvault.com/demos/time-of-day-hero-section/index.html

| Property | Value |
|----------|-------|
| Type | section |
| Tier | paid |
| Price | Included only in the Vault |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | state-transition, pointer-drag, clip-path, keyboard-navigation, container-queries |
| Uses Lenis | No |

## Overview

A hero built for venues and services whose offer changes with the clock: an all-day kitchen, a studio timetable, a festival programme, a radio schedule. One very large circular photograph sits inside a ring of clock ticks, and each daypart is labelled on that ring. Choosing a daypart rotates the ring so its label arrives at the fixed marker, opens the new photograph with an iris, and moves the whole section, headline word, hours, priced highlights and the colour ground, into that part of the day.

## Features

- Four dayparts authored as readable HTML, three to six supported
- Photographic dial that can be dragged and snaps to the nearest daypart
- Rail of native radio buttons with arrow, Home and End keys
- Colour ground, ink and accent tween per daypart from one editable triple
- Opens on the visitor's local time, or on a daypart you fix
- Readable with no JavaScript, no GSAP and under reduced motion
- Container queries for narrow host columns, plus a complete teardown

## Use Cases

- All-day restaurants, cafés and bars
- Gyms and studios with a class timetable
- Festival and conference day programmes
- Coworking spaces and radio schedules

## 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 daypart is an <article> carrying its own colours, ring label, headline word, photograph and copy; the script reads them, so the number of dayparts and their content are edited in the markup rather than in JavaScript. A change tweens one rotation value that positions the ring labels and marks, interpolates the three colour custom properties on the section root, and opens the incoming photograph with a clip-path iris anchored at the marker. Rapid input resolves the pending swap immediately and settles on the last requested daypart, leaving one photograph in the DOM.

## 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.

### 1. Quick start

Copy three things into your project:

_Code snippet omitted: it ships with the download._

Then link them and paste the section. **The product is the single
`<section class="tod-hero">` element**; everything outside it in `index.html`
(the page `<style>` block, `<main>`) is preview furniture.

_Code snippet omitted: it ships with the download._

**Dependencies:** GSAP 3.12+ core only, no plugins. The demo is built against
GSAP 3.15.0. GSAP is optional: without it the section still switches state,
instantly. There is no build step, no bundler and no framework requirement.

**Fonts:** the preview loads Bricolage Grotesque and Instrument Sans from
Google Fonts. Swap the `<link>` for your own webfonts and change the two font
variables described below; nothing else depends on those families.

---

### 2. Make it yours

#### The dayparts

Each daypart is one `<article data-tod-part>` inside `.tod-hero__parts`. The
script reads them, so **three to six dayparts work** with no JavaScript
changes: add or remove an `<article>`, add or remove the matching rail button,
and the ring positions itself from the new count.

_Code snippet omitted: it ships with the download._

Everything else is ordinary HTML you edit in place: the brand and standfirst
in `.tod-hero__mast`, the eyebrow, the first headline line, the two action
links, and the four rail buttons. **The rail buttons hold their own name and
hours as real text**, which is what makes the whole day readable with no
JavaScript, so keep them in step with the articles.

Copy length is safe within reason. The section holds a fixed height on wide
containers (`min-block-size: min(100svh, 920px)` on the shell) and the panel
reserves its own minimum, so the layout does not jump between dayparts. Very
long ledes or more than four list items will push past that.

#### Root variables

All of them live at the top of `assets/style.css` on `.tod-hero`:

| Variable | What it does |
| --- | --- |
| `--tod-font-display` / `--tod-font-text` | the two font roles |
| `--tod-ground` / `--tod-ink` / `--tod-accent` | the resting colour triple, which is also the no-JavaScript state |
| `--tod-quiet` | opacity of secondary ink: ledes, hours on the rail, ring labels |
| `--tod-max-width`, `--tod-pad-inline`, `--tod-pad-block`, `--tod-gap` | measure and spacing |
| `--tod-hairline`, `--tod-corner` | rule weight and corner radius |
| `--tod-dial-photo` | diameter of the photograph |
| `--tod-dial-band` | width of the ring of ticks and labels around it |
| `--tod-dial-x` / `--tod-dial-y` | where the dial sits, across and down the section |
| `--tod-duration` | length of one change; the script reads this value |

A rebrand is four colour triples on the articles, the resting triple here, and
two font names. For example, a dark studio: set every `data-ground` to a near
black, `data-ink` to a warm white, and give each daypart a different accent.

**Load-bearing rules.** `--tod-dial-band` must stay wide enough for the ring
label to sit between the photograph and the ticks: the script places labels in
the clear part of the band, so a band under roughly 70px on desktop will
crowd them. `--tod-dial-x` above 100% pushes more of the circle past the right
edge of the section, which is the intended crop. The photographs are cropped
to a circle, so any replacement needs its subject near the centre of a square
frame.

#### Replacing the photographs

Drop four square images into `assets/img/` and point each article's
`data-image` and `data-alt` at them. To rebake from your own masters, edit
`assets/img-manifest.json` (sources, crops, output size and grade) and run the
repository's asset build for this slug. The `<img>` in the markup is the
resting photograph; the script swaps it for the active daypart.

---

### 3. Behaviour and options

**Attributes on the root**

- `data-start="auto"` (the default) picks the daypart from the visitor's local
  clock, using each article's `data-hours`. Ranges that cross midnight are
  understood. If the clock falls in no range, the next one to open is shown.
- `data-start="0"`, `"1"`, `"2"`... fixes the opening daypart by index.
- `--tod-duration: 0s` turns all motion off for that instance.

**Inputs**: the rail buttons, dragging the dial with mouse or finger, and
arrow keys, Home and End on the rail. Repeated or interrupted input resolves
the pending change immediately and settles on the last one asked for; it never
leaves two photographs or half-swapped copy.

**Per-instance API.** Each root gets a `todHero` object:

_Code snippet omitted: it ships with the download._

`destroy()` removes every listener and observer, kills any running timeline,
deletes the ring labels and marks the script generated, restores the original
photograph with its own `src` and `alt`, clears the inline colour variables
and puts the rail buttons back as authored. It touches nothing outside its own
root. To mount again, or to mount a section added later:

_Code snippet omitted: it ships with the download._

Two or more sections on one page run independently, including different
`data-start` values and different colours.

---

### 4. Accessibility and integration

- The rail is a `radiogroup` of native buttons with roving tabindex, so Tab
  reaches the group once and the arrow keys, Home and End move within it. The
  dial itself is decorative and hidden from assistive technology; every state
  it can reach is reachable from the rail.
- Each photograph carries its own alt text, swapped with the image.
- Reduced motion is honoured at every change, including a change made while
  the section is already mounted: the state switches instantly, with no
  rotation and no iris.
- With no JavaScript, or with GSAP missing, the first daypart is shown in
  full, all four sets of hours remain readable in the rail, and the photograph
  is present. Nothing is hidden and then revealed by script.
- Measured contrast of the shipped palette, ink on ground and accent on
  ground: Morning 10.37 and 4.68, Midday 8.91 and 4.60, Evening 8.80 and 5.67,
  Late 14.98 and 13.22. Secondary ink at `--tod-quiet` clears 5:1 in all four.
  Your own colours are your own responsibility: measure them.
- The heading is an `<h1>`. Change it to an `<h2>` when the section sits under
  a page title; the class carries the typography, so nothing else changes.
- The section uses container queries (`container-type: inline-size`), so it
  arranges itself from its own width, not the viewport. Below 880px it stacks:
  mast, headline, dial, panel, rail, and the ring labels are hidden because the
  rail below carries the same names.
- It installs no smooth scrolling, no ScrollTrigger, no pinning and no cursor
  replacement, and it sets no styles outside its own root. On touch the dial
  takes the gesture only once it is clearly rotational, so a vertical swipe
  over it still scrolls the page.
- The action links are `href="#"` placeholders. There is no form and no
  back end here.

---

### 5. Credits and licence

Photographs from Pexels, under the Pexels licence, baked into local WebP
derivatives in `assets/img/`. No remote image URLs are used at runtime.

| File | Photograph | Photographer |
| --- | --- | --- |
| `morning.webp` | [Overhead shot of a healthy breakfast](https://www.pexels.com/photo/overhead-shot-of-healthy-breakfast-8366819/) | Micheile Henderson |
| `midday.webp` | [Food on a ceramic plate](https://www.pexels.com/photo/food-on-ceramic-plate-14715950/) | Doğu Tuncer |
| `evening.webp` | [A close-up shot of a person getting a mussel](https://www.pexels.com/photo/a-close-up-shot-of-a-person-getting-a-mussel-6848242/) | cottonbro studio |
| `late.webp` | [Drinks on a counter in a restaurant](https://www.pexels.com/photo/drinks-on-counter-in-restaurant-5371926/) | cottonbro studio |

Fonts: [Bricolage Grotesque](https://fonts.google.com/specimen/Bricolage+Grotesque)
and [Instrument Sans](https://fonts.google.com/specimen/Instrument+Sans), both
under the SIL Open Font Licence. Animation by
[GSAP](https://gsap.com/), used from its CDN under GSAP's standard licence.

"Marlow & Ash", its menu and its address are fictional demonstration content.
Replace them before you ship.

## 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