Errors
+18%
Up vs last range in eu-west.
Carousel
An insight strip. Overflow-x, snap, peek.
Spec
overflow-x: autowith scroll snap.- Peek 24px of the next item.
- Prev/next are extra, not a replacement for scroll. Keyboard and touch still work if the buttons are gone.
- Keyboard: Tab onto the strip, arrows scroll.
- Touch: native scroll. No pointer hijack.
- Item slot — insights, metrics, small cards.
- No autoplay. Ever.
- Reduced motion:
scroll-snap-type: x mandatorystill. No animated scrollIntoView.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
Insight strip. Snap, peek 24px, no autoplay.
Ingest p95
1.4s
Spike at 11:12 after rebalance.
Budget
14%
Remaining in the 30-day window.
Exports
3
Last CSV at 12:04.
Do / Don't
| Do | Don't |
|---|---|
| Peek the next item. | Hide overflow with no hint there is more. |
| Keep native scroll. | Autoplay. |
| Prev/next in addition. | Replace the strip with buttons-only paging. |
Motion
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
transform: scale(0.97) | 120ms --dur-fast | --ease-out | :active | instant |
| scrollLeft | native / 280ms | --ease-out | prev/next | snap, no animation |
Accessibility
- The strip has a label, e.g.
aria-label="Insights". - Items are reachable by Tab or arrows. Don't trap focus.
- Prev/next named “Previous insight”, “Next insight”.
- No flashing. No autoplay.
- These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.