shadcn.io is not affiliated with official shadcn/ui
Animated Reveal Awards Block for Ark UI
Five results kept under drawn seals: a Reveal button per row and a Reveal all toggle wipe each band away, with the result text always in the page.
Installation
Overview
An envelope reveal for React with Ark UI. A centred header gives the totals ("3 wins, 1 highly commended, 1 runner-up"). Below, five categories sit as rows of two cells on shared hairlines: the category with its own Reveal button, and a result cell covered by a drawn sealed band. Reveal wipes the band away toward the end of the line with a clip-path transition; under reduced motion it goes at once. A Reveal all toggle opens or closes every row and a polite line counts them. A placing is told by its word and its chip: solid, outlined or dashed. The programme and the results are made up for the example, and nothing is sent anywhere.
FAQ
How do I change the results?
Edit RESULTS: each has a category, a placing (Winner, Highly commended or Runner-up) and a citation. The header's totals are counted from the list.
Is the result hidden from screen readers?
No. The result's words are always in the page, and only the drawn band covering them is hidden from assistive technology. The seal is a picture, so a screen reader user hears every result.
What about reduced motion?
With reduced motion the band disappears at once with no wipe. Nothing moves by itself, only after you press a button.
How does Reveal all work?
It is a toggle button: pressed means every row is open. Pressing it opens all five, and pressing it again covers them. Opening each row by hand also presses it once the fifth opens.