Context
The client wanted a recipe discovery experience that made dayparts the organizing principle, presented in a way that felt distinctive and engaging rather than a standard filtered list.
The design called for a clock UI: recipes arranged in a circle, color-coded by daypart, with a fork and knife pointer. The challenge was that the number of recipes per daypart is variable — pulled live from a Pimcore CMS API — meaning the size of each slice, and the position of every element on the clock, had to be calculated programmatically after the data was loaded.
Role
Process
- 01
Generating the clock as SVG
The entire clock is built programmatically in Vue. Recipes, daypart slices, markers, labels, and color coding are all computed and rendered from the API data. Color coding is data-driven from the CMS, making it easy to update without touching the front end.
- 02
The trig problem
Because the number of recipes per daypart varies, the angular size of each slice varies too. Placing recipe markers and daypart labels at the correct positions on the circle required trigonometric calculations after each data load. The calculations needed to handle centering each daypart's recipes within its slice, accumulating angles correctly across dayparts, and converting between degrees and radians for SVG coordinate math. AI assistance was instrumental in working out the correct trigonometric functions for variable item placement.
- 03
Animation
GreenSock (GSAP) handles the fork and knife pointer animation, adding a tactile, satisfying quality to interacting with the clock.
- 04
Mobile adaptation
The desktop clock gives way to a simpler pie chart on mobile, letting users tap a daypart to select it. The switch was a practical design decision: the full clock UI doesn't translate well to touch targets and narrow viewports, but the core daypart-first navigation concept carries over cleanly.
Visuals
dayparts.value.forEach((daypart): void => {
daypart.titlePieces = splitWords(daypart.title, 10)
// Calculate the angle of the daypart
daypart.angle = (daypart.count / computedNumberOfPoints.value) * 360
// Calculate the arc length of the daypart
daypart.arc = calculateArcLength(radiusOfPieStroke, daypart.angle)
// Base centers the pie on its daypart recipes
let base: number = fullCircumferenceOfPieStroke / 4 + daypart.arc / daypart.count / 2
// Set the dash offset of the daypart
daypart.offset = base - offsetAccumulator
// Calculate the angle bisector
cumulativeAngle += daypart.angle;
if (cumulativeAngle >= daypart.angle) {
angleBisector = cumulativeAngle - daypart.angle / 2;
}
// Convert base back to degrees
const angleOffset = 90 + (base * (Math.PI / 180))
// Convert the angle from degrees to radians
const angleRad = (angleBisector - angleOffset) * (Math.PI / 180);
// Calculate the coordinates of the point
const x = (centerX + 100) + radiusOfPieStroke * Math.cos(angleRad);
daypart.labelX = x
const y = (centerY + 100) + radiusOfPieStroke * Math.sin(angleRad);
daypart.labelY = y
offsetAccumulator = offsetAccumulator + daypart.arc
})
Outcome
The app successfully surfaces recipes organized by daypart in a distinctive, visually engaging format. The variable slice calculation handles real-world data gracefully, and the mobile pie chart provides a usable fallback without sacrificing the daypart-first concept.