Component

Fan carousel

Six cards laid on an arc: each one spreads out, drops, tilts and shrinks in proportion to its distance from the chosen card. All that arithmetic is done in CSS from one single number — the index of the checked radio button — so the fan spreads out before the script even arrives, and the arrow keys step through it natively.

Click a card to bring it to the front, or drag it sideways. HTML, CSS and JavaScript: no framework, no build step, not a single external request.

The original design

Every measurement is taken from the published reference and then expressed as a multiple of --arc-font-size, so that one single variable rescales the whole thing — the arc, the shadows and the tilt included.

Daily Energy

Feel Better Every Day

Portrait in lilac light: a woman with her eyes closed, one arm folded above her head.

Sleep Score

Track your recovery

Sleep

Morning Flow

Start with clarity

Ritual

Portrait against a blue and golden sky: a woman’s hair carried by the wind.

Heart Rhythm

Feel every signal

Health

Portrait in daylight: a woman with curly hair, her eyes closed, hands behind her neck.

Mind Reset

Breathe and refocus

Calm

Portrait on a bright red background: a woman in an open shirt, one arm raised above her head.

Active Day

Move with intention

Motion

Portrait in grey light: a man in a light jacket, his gaze turned to one side.

Body Ready

Know your limits

Fitness

Sleep Score Morning Flow Heart Rhythm Mind Reset Active Day Body Ready

The compact variant

The original design is made for a page that shows nothing else. The fan-carousel--compact variant changes one thing only — --arc-font-size goes from 16 to 10 px — and the card, the arc, the radius, the shadows and the five text sizes all rescale together.

Programme

One habit a week

Sleep well

Seven hours, every day

Night

Get going

Ten minutes on waking

Morning

Breathe

In for four, out for six

Breath

Walk

Thirty minutes outside

Outdoors

Move

Three sessions, no more

Effort

Recover

One day off, entirely

Rest

Sleep well Get going Breathe Walk Move Recover

What you need to know

The state lives in the document. A checked control, not a JavaScript variable. The CSS reads it with :has(), the keyboard steps through it with the arrow keys, a form would submit it as it is.
The script only does the dragging. Switch it off: the cards can still be clicked, the dots still answer, and the fan is already spread out — the page without JavaScript shows it.
The arrow keys do not leak out of the component. They act when a dot has focus, because they are the native arrow keys of a radio group. The reference listened for them on window: they changed card even while you were typing in a field elsewhere on the page.