Activity Terrain

Accessibility

• Every day has a label with its date and count.
• The grid uses one tab stop, and arrow keys move within it.
• The subtitle announces the day in focus.
• Level is never colour alone: the count is always in the label and the subtitle.

Motion

• Pillars rise from the grid in 600 ms, 8 ms apart from left to right.
• A hovered day turns green, the others fade to 50% in 150 ms, and an inverse chip shows its count.
• Dragging up or down on the terrain changes the camera.
• With reduced motion, views switch instantly.

Responsive behavior

• 672 by 426 px with 26 weeks on Web.
• 358 by 348 px with the last 16 weeks on Mobile.
• The card picks its layout from its own width.

Performance

• Every day stays mounted in both layers, one button or SVG group per day, so keep weeks to about a year.
• Pillars rise with CSS transitions, and only the week delay differs.
• Below 400 px of width it renders only the last 16 weeks.

• Import ActivityTerrain from @/components/fetaui/activity-terrain and pass weeks and start.
• weeks is one array of seven counts per week, Sunday first and oldest first. start must be that first Sunday.
• Pillar height follows the count up to 16. Busier grids scale down so the tallest pillar stays inside the card. Five ink steps top out at 8.
• The toggle offers Flat and Terrain. Orbit comes from a vertical drag, O, or view. previewDay is for docs. Composes Card and ToggleGroup.