Promo Banner 9 block design & features
This promo banner is a single rounded panel in flat lime with centred dark text. It holds a large discount headline, one line of terms and a dashed pill containing the discount code and a Copy button, with a short hint underneath. It is built with Shadcn UI.
The code starts hidden behind dots. Hovering or focusing the pill rolls each character up into view one after another, and moving away rolls them back. Clicking copies the code to the clipboard, switches the button to a check mark with Copied, and changes the hint to a reminder to paste it at checkout for a couple of seconds.
The banner is loud through colour and type size alone, with no imagery, gradients or shadows. The heading, description and code are props. With reduced motion the characters swap without rolling.