Centered Light Ticket Perforated Edge CTA Block for React

They are real cut-outs, not circles painted in the page colour: each piece of the ticket has a CSS mask made of two radial gradients that makes a half circle at each end of the tear line fully transparent, so whatever is behind the ticket shows through, on a light page, a dark page or a photo. A hairline is drawn around each cut so the card's border follows it. The pieces sit side by side on wide screens and stack on narrow ones, and the notches move from the sides of the tear line to the top and bottom edges of the stack.

The stub is a cover over the piece that holds the code. The Shine Button toggles it: the cover slides away and tilts for 0.7 seconds while fading out, and the code underneath, which was out of reach until then, becomes visible and focusable. A polite status line announces "Your code is WELCOME20." The button's label switches to "Tape the stub back", which puts the cover back.

The stub doesn't slide or tilt: it only fades out in 0.3 seconds, and fades back in when taped on. The ticket's entrance is skipped too.

Edit PERCENT at the top of the file: the code, "WELCOME20", is built from it and the headline and the stub show the same number. Copy puts the code on the clipboard, its icon turns into a check for three seconds and screen readers hear "Copied"; if the clipboard is refused, as on a page not served over HTTPS, they hear "Couldn't copy" and the code is still there to select. The code is only a stand-in: serve a real one from your server if each visitor should get their own.

Yes. Everything is a real control: the tear button and the Copy button take Tab, Enter and Space. Until the stub is torn the code and its button are inert, so they can't be reached while covered; after, the stub is inert instead. The decorative notches and perforation are hidden from assistive technology.

Below the sm breakpoint the stub goes under the main part, the tear line turns horizontal and the notches sit at its two ends; the stub then slides down as it goes. In a right-to-left layout the stub is on the start side, its notches follow and it tilts the other way.