Service Price Ledger
A price list set like a printed menu — baseline dot leaders, tabular prices, a Book link per row — beside a photo plate that follows hover, focus, or on phones the row mid-screen.
DOM + CSS0 deps1 file · 14 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef, useState } from "react";
/**
* A price list set like a printed one: names, durations, and prices joined by
* dot leaders — with a photo plate beside it that shows whichever service you
* are looking at, and a Book link on every row.
*
* THE LEADER SITS ON THE BASELINE. The row is a baseline-aligned flex line; the
* leader is a 2px box with no text, whose synthesised baseline is its bottom
* edge, so the dots land on the same line as the letters at any font size. The
* dots are anchored to the RIGHT, so the last one always sits the same
* distance from the price. Prices use tabular figures so the column holds.
*
* THE PLATE FOLLOWS ATTENTION, ON EVERY DEVICE. With a mouse it follows the
* hovered row; with a keyboard, the focused Book link; on a phone, where
* nothing hovers, whichever row is passing the middle of the screen. It keeps
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
For a barber, a salon or a café, the price list is the page people come back to — the question is nearly always "how much, and how long?" This section answers it the way a printed menu does. Each row carries a name, a duration and a price joined by dot leaders that sit exactly on the text baseline, with prices in tabular figures so the column holds, and a "from" in small caps where a price can vary. Every row has its own Book link, because a price you cannot act on is a dead end. Beside the list sits a photo plate that shows the service you are looking at: it follows the mouse, follows keyboard focus, and on a phone — where nothing hovers — follows whichever row is passing the middle of the screen. Photos are greyscaled and pressed into one plate colour, so a handful of phone snaps from the shop floor read as a single, deliberate series. Switch it to a café menu and the same rows say Order instead.
Curator’s note
The price list is the page a barber's regulars actually open. Dot leaders are the oldest trick in menu setting, and the only hard part is making them sit on the baseline.
