shadcn.io is not affiliated with official shadcn/ui
Split Attribution Window CTA Block for Solid
A reverse split call to action for a partner program: a slider tool in a hairline frame that shows whether a referral still counts on the day a visitor buys, beside the pitch, four benefits and a Shine Button.
Installation
Overview
A reverse split call to action for an affiliate, referral or partner program, here for Kiln, a fictional studio scheduling app. The visual sits at the start: a narrow tool on a card in a hairline frame with + marks on its corners. It answers the question every partner has: when does a referral count? A visitor clicks your link on day 0, and a slider sets the day they buy. The track is drawn in two parts, the days that count (solid) and the days after the window (muted), and the result under it says "Day 62: credited to you" or "Day 95: expired", with what the sale earns. At the end, behind a split divider, are a badge, the headline, four benefits and a Shine Button. The copy comes first in the page, so on a phone the button is on the first screen and the tool follows under a rule. For affiliate programs, referral schemes, reseller pages and any offer with a time limit worth showing.
FAQ
How do I change the commission, the window and the example?
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.
How is the window drawn on the slider?
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.
How do I use it with a keyboard and a screen reader?
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.
Does the result move as the verdict changes?
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.
How does it fit a phone?
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.
What moves, and can I turn it off?
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.