Period Compare Ghost

Build a trend chart that compares this period against the previous one. Structure: a header (metric name and the percentage change), an SVG line chart, and a legend row. The rule that matters: both periods share ONE y-scale. Never give the previous period its own axis - a comparison drawn on its own scale is not a comparison, it is two charts pretending to be one. This is the single most common charting mistake. Draw the previous period as a GHOST: pale ink, 2px, and DASHED. Dash it as well as fading it, so the two series stay distinguishable in greyscale, in print, and to a colourblind reader - weight alone survives none of the three. The current period is a solid 2px accent line. Draw order and timing: animate each line's pathLength from 0 to 1 over about 0.7s, with the ghost starting first and the current line following about 120ms later. The baseline should be established before the thing being compared to it arrives. Grid: two recessive horizontal rules and nothing else. At this size a full axis is more ink than data. End marker: a filled dot at the last point of the current line, with a 2px ring in the SURFACE color so it stays readable where it crosses the ghost. Legend: two series means a legend is not optional. Show a line swatch (solid vs dashed) for each, and put each series' final VALUE directly in its legend entry, so nobody has to trace a line back to a swatch. Keep all label text in ink tokens, not in the series colour. Under prefers-reduced-motion, render both lines complete with no drawing animation. Colors as tokens: paper surface, one accent for the current period, low-opacity ink for the ghost, and a status green for the headline change. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.