Motion

Draw on scroll

A results chart draws itself as you scroll, with a marker riding the tip that reads out the week and the value under it.

16 / 74

Where it earns its place

Case studies and investor pages where the result is a curve: engagement after a relaunch, conversion across an experiment, growth since launch.

Kept the best idea: the marker is placed from the path's own geometry with getPointAtLength, not with CSS offset-path, so it stays on the stroke at any size.
Kept multi-segment drawing, but each segment's share of the scroll is its share of the length, so the tip moves at one even speed instead of crawling through the short run.
The chart is drawn in the panel's own pixels from real data points through a Catmull-Rom curve, so the line passes through every week instead of approximating it.
Turned a decorative line into Northstar Cloud's relaunch: the old site in nickel, the new one in champagne, a launch marker, and a readout that interpolates the value under the tip.
Driven by the panel's own scroller; reduced motion shows the finished chart, and the grid card draws it on a loop.