Component
Arc carousel
Ten images set on the rim of a wheel with a 48 em radius. The one at
the top grows, lifts and speaks up; the others tilt, shrink and fade
away — all of it derived from a single number,
--wcar-index, which holds the selected card. HTML, CSS
and JavaScript — no framework, no build step, not a single external
request.
The wheel, exactly as measured
Drag the wheel with the mouse, scroll sideways with the wheel, or focus a card and step through with the arrow keys. The step, the spring travel and the sensitivity are all set without opening the script.
Comfort by design
Interiors made for sitting down, breathing out and staying a little longer.
Get startedComfort is in the details
From materials to shapes, every element adds to the sense of ease.
DetailsOne variable, and everything follows
The same component, in a 24 rem column, with
--wcar-font-size at 10 px: the radius, the cards, the
text and the dots have all scaled together. Four cards here instead
of ten — the count is read from the markup, there is nothing to
declare. The arc, though, is closed down to 90°:
--wcar-span has to be set alongside the number of cards,
otherwise four images spread 48° apart and lie flat against the
edges.