Centered Light Confetti Unlock CTA Block for React

unlock is the button's click handler: it sets unlocked and nothing else. Call your own code there, an upgrade request or a feature flag, and set unlocked when it succeeds; if it fails, leave the panel locked and show your error. Nothing here talks to a server, so the demo unlocks every time. The "Lock it again" button is only there to replay the demo, so remove it, and its handler lockAgain, in your version.

The button throws sixteen pieces from the point of the press, or from its centre when you press Enter or Space, in CSS: each piece's flight is set by its position in the burst and nothing re-renders. Pass colors, particleCount or duration to the button to change it. The default colours are shades of your theme's tokens, which is why the burst follows the preset.

The Shine Button clips its light by hiding the button's overflow, and that would also cut off the confetti as it leaves the button. So the unlock button keeps its overflow visible and the light sweeps inside its own clipped, rounded layer under the label. It plays on hover, keyboard focus and press, and with reduced motion it fades in where it stands. The unlocked state's link is a plain Shine Button.

The pieces don't fly: they fade in and out where they would land, and the cross-fade between the two states becomes an instant swap. The panel is the same height before and after, so nothing on the page moves.

The locked and unlocked states sit in the same grid cell, and the one that isn't showing is hidden from view, from the keyboard and from screen readers, so only one heading is ever read. After the press, focus moves to the new heading, "You unlocked Pro", so it's read aloud; "Lock it again" returns focus to the unlock button. The confetti and the light are decoration and are hidden from assistive technology.

Both states are always rendered in one grid cell, so the panel is as tall as the taller of the two. The locked state stays until the burst has played and then fades out while the unlocked one fades in. If you change the copy, keep the two states about the same length, or the shorter one will sit centred in the extra room.

The panel's padding shrinks below the sm breakpoint, the heading steps down from text-4xl to text-3xl and balances over its lines, and the buttons and the three features wrap under each other when they don't fit. Nothing has a fixed width, so it reads at 320 pixels.