shadcn.io is not affiliated with official shadcn/ui
Reveal Timer Gallery Block for React Aria
A locked, hatched print tagged Drop in a framed figure that unlocks to a drawn poster when a ninety-second countdown from page load reaches zero, with Skip the wait and Lock again buttons for an honest demo.
Installation
Overview
A reveal timer for React with React Aria, for Dropdate, a limited-print studio. A split behind a divider: at the end a framed print, with + marks on its corners and a ribbon reading "Edition of 120", that starts locked, hatched and tagged "Drop"; at the start the compact header, a short list of facts (edition, size, paper), a card with the live countdown and two ghost buttons for an honest demo, "Skip the wait" and "Lock again". The clock starts when the page does, at ninety seconds, so it never goes stale; when it reaches zero the hatching wipes away from the foot to the head and the print underneath, a drawn type poster, is there. A polite line says the clock at stages only (a minute to go, thirty seconds, ten) rather than every second, and with reduced motion the reveal is instant. On a phone the print sits above the timer. The poster is drawn, not photographed, in your theme's greys. It's built from CountdownText, Badge, Button and Guides. The studio and the print are made up, and nothing is sold or saved.
FAQ
How do I count down to a real release?
Replace the useState for target with your release time as a timestamp (the CountdownText takes a Date, a timestamp or a date string) and drop the effect that sets it ninety seconds after the page opens. If the time has already passed on load, the print opens at once. The "Skip the wait" and "Lock again" buttons are for demos: remove them for the real thing.
How do I use my own print?
Replace the Scene under the hatching with <img alt="" className="size-full object-cover" src={…} /> and set PRINT.description for its alt text. It stays described only to a screen reader once it is unlocked: while locked it is hidden from assistive technology, so the surprise is kept for everyone.
Why does the clock not say every second?
A line that changes every second is read out over and over. Instead the block says one thing at a minute, thirty seconds and ten seconds, and once more when the print unlocks. The digits themselves are hidden from screen readers and repeat what the line says.
What happens with reduced motion?
The digits change in place without dropping in, and the hatching is gone at once instead of wiping away. Nothing else on the block moves.