#326
Scroll-linked counter and chart draw
A revenue figure counts up from $0 to $48,210 while a line chart draws itself, both tied to the container's scroll position; scrolling back reverses them.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Scroll-linked counter and chart draw" pattern (@codeatlasdev/ui demo #326, motion/scroll) in my app.
Call get_demo({ ids: ["#326"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: KPI headers, report sections and pricing pages where a number and its trend should build as the reader reaches them.
Keep these library parts, with the props and tokens the demo uses:
- MotionStage, MotionCtx from "@codeatlasdev/ui"
Behaviour to keep:
- `MotionStage` from `@codeatlasdev/ui` with `loop={5000}`: autoplay scrolls the container, a wheel or touch scroll takes over
- The counter text is `Math.round(TOTAL * v)` formatted with `Intl.NumberFormat('en-US')`; `v` is `el.scrollTop / max` (text cannot be scroll-driven in CSS)
- The line has `pathLength="1"` and `stroke-dasharray: 1`; `stroke-dashoffset` goes from `1` to `0` (`calc(1 - var(--p))`)
- Native: `animation-timeline: scroll(nearest block)` with `@keyframes draw`, inside `@supports (animation-timeline: scroll())`; otherwise a `scroll` listener writes `--p`
- Autoplay scrolls in `2800` ms with an ease-out cubic
- Screen readers get the final figure from a `ca-sr-only` span; the animating digits are `aria-hidden="true"`
- Under reduced motion the figure shows the final total and the line is fully drawn
Exact motion (do not approximate):
- text (count-up 0 to 48,210): scroll position, 1 - (1 - t) ** 3
- stroke-dashoffset 1 to 0: animation-timeline: scroll(nearest block), linear
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- MotionStage
@codeatlasdev/ui
How it is built
- `MotionStage` from `@codeatlasdev/ui` with `loop={5000}`: autoplay scrolls the container, a wheel or touch scroll takes over
- The counter text is `Math.round(TOTAL * v)` formatted with `Intl.NumberFormat('en-US')`; `v` is `el.scrollTop / max` (text cannot be scroll-driven in CSS)
- The line has `pathLength="1"` and `stroke-dasharray: 1`; `stroke-dashoffset` goes from `1` to `0` (`calc(1 - var(--p))`)
- Native: `animation-timeline: scroll(nearest block)` with `@keyframes draw`, inside `@supports (animation-timeline: scroll())`; otherwise a `scroll` listener writes `--p`
- Autoplay scrolls in `2800` ms with an ease-out cubic
- Screen readers get the final figure from a `ca-sr-only` span; the animating digits are `aria-hidden="true"`
- Under reduced motion the figure shows the final total and the line is fully drawn
Related
Loading source.