Activity Rings

Accessibility

• The rings carry a text summary like Move 479 of 800 calories.
• Legend rows are buttons with aria-pressed.
• Every value is also shown as text, so nothing relies on the tone of a ring.

Motion

• Rings sweep from 12 o’clock in 800 ms, 80 ms apart, the first time they scroll into view.
• A ring past its goal draws a second lap on top, then settles.
• Hover fades the other rings to 25% in 150 ms and lifts the legend row to 5% ink.
• The success Badge pops in when every ring closes.
• With reduced motion, rings appear at their value.

Responsive behavior

• 418 px on Web, with the legend beside the rings.
• 358 px on Mobile, with the rings above a full width legend.

Performance

• The sweep runs once, when the rings first enter the viewport.
• The lap past 100% mounts only for rings over their goal, and never when still.
• Numbers count by writing text directly, so they never re-render per frame.

• Import ActivityRings from @/components/fetaui/activity-rings. Without rings it shows sample data from ACTIVITY_RINGS.
• Only the first three rings draw. Pass value and goal as real numbers, and let value pass goal so the lap shows.
• Leave active out to follow hover and focus. defaultActive pins a ring, and a click on the legend toggles the pin.
• date defaults to a sample string, so always pass it. Composes Card, Badge and CountUp.