Split Attribution Window CTA Block for React

Edit the constants at the top of the file: COMMISSION (the percentage), WINDOW_DAYS (the last day that counts), MAX_DAYS (the length of the track) and SALE (the example plan's monthly price). The benefits, the edge drawn on the track, the "Day 90" mark, the verdicts and the earned amount are all worked out from them, with whole-number maths, so the block keeps agreeing with itself when you change one.

The slider's own track is painted with a hard-edged gradient, in the foreground colour up to the last day that counts and in the muted track colour after it, and the filled range is hidden so the colours stay put as the thumb moves. The edge sits under the thumb's centre on day 90, using half the thumb's width (--inset) because the thumb stays inside the track's ends. The block assumes the default style's 12px thumb; set --inset to half of yours. The marks under the track share the same inset, and the whole drawing runs in the reading direction.

The slider is labelled Day a visitor buys, moves a day at a time with the arrow keys, and Home and End jump to day 0 and day 120. It reads its value as the verdict ("Day 62: credited to you") instead of a bare number. A polite status line, which stays in the page, repeats the verdict once you stop moving, never during a drag, and the marks and the click icon are hidden from assistive technology because the label and the verdict say the same.

No. The badge, the title and the sentence swap in place, and the title and the sentence keep room for their longest wording, so nothing below or beside the card moves when the thumb crosses day 90, down to a 320 px screen.

The columns stack below the lg breakpoint with the copy first, so the Shine Button lands on the first screen, and the framed tool follows. The marks use short labels so the click and the day 90 mark never touch at 320 px, and the sentence wraps inside the card.

The copy fades up on load, the Shine Button sweeps a band of light across itself on hover or focus, and the thumb follows your pointer or keys. It's all CSS, with no animation library. With reduced motion on, the copy appears in place and the light fades in instead of sweeping.