Time of Day Hero

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	Micheile Henderson
midday.webp	Food on a ceramic plate	Doğu Tuncer
evening.webp	A close-up shot of a person getting a mussel	cottonbro studio
late.webp	Drinks on a counter in a restaurant	cottonbro studio

Fonts: Bricolage Grotesque and Instrument Sans, both under the SIL Open Font Licence. Animation by GSAP, 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.