Component
Arc carousel — without JavaScript
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
This page loads the component's stylesheet, and nothing else: no
script at all. The wheel still turns — each card is the
<label> of a radio button, and the geometry follows
--wcar-index, which the CSS sets on its own with
:has(). Click a card, or step through the group with the
arrow keys. The two navigation buttons, on the other hand, disappear:
they would ask for « the next one », something a
stylesheet cannot express.
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.