Free Shipping Progress

Build a free-shipping progress bar for a cart. Structure: a slim track with a filling bar, a sentence underneath, and an add-an-item control to move it. THE SENTENCE IS THE PRODUCT. The bar shows there is a threshold; the sentence says how much more to add. Only one of those changes what somebody puts in the cart, and it is not the bar. Express the remainder in MONEY: "$13 away from free shipping", never "78% of the way there". Nobody converts a percentage into an amount while shopping. Change the COLOUR at the threshold, accent while climbing and your success token once unlocked, AND change the words with it ("Free shipping unlocked"). The bar alone cannot say whether it is done or merely nearly done. Motion: animate scaleX with transformOrigin left, on a spring (stiffness 210, damping 28). Use scaleX, not width, so the bar never triggers layout while the cart is updating around it. The small settle at the end is what makes adding an item feel like it moved something. Give the message area a MINIMUM HEIGHT, so the control below does not hop when the wording changes length. Accessibility: aria-live="polite" on the sentence, so the unlock is announced. Under prefers-reduced-motion, use zero duration on the fill. The sentence still updates, which is the part that does the work. Colors as tokens: accent while climbing, success once unlocked, hairline for the empty track, muted ink for the secondary half of the sentence. 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.