shadcn.io is not affiliated with official shadcn/ui
Reveal Timer Gallery Block for React
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 Base UI, 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.
Related
- 02041158Pro
Event Countdown Banner
CountdownsAn event countdown for a developer conference: a calendar tile with the name and a sentence saying when it starts, four cells of days, hours, minutes and seconds in a corner-marked frame, and a Shine Button to reserve a seat.
- 6d 22hPro
Trial Countdown Banner
CountdownsA trial notice for a writing app: a clock, a sentence with the time left ticking, a line on what upgrading keeps, a Shine Button to upgrade and a dismiss button that folds the block away.
- Pro
Digit Countdown Banner
Urgency and limitsA slim early-pricing band between the page rails, in your theme: the offer at the start, then past a solid divider a live countdown to the end of this month in a small frame beside a Shine Button, with a hairline along the bottom edge that drains as the month runs out.
- Pro
Instant Print Gallery
Walls and tablesSix drawn instant prints lying a degree off square on a faint table band, each faded and blurred until you hover, focus or tap it, with a button that develops the whole tray one print after another.
- Pro
Photo Booth Strip Gallery
Walls and tablesA photo-booth strip of four frames on a perforated paper strip that fills one frame at a time, 3, 2, 1 and a flash for each, with a drawn pose in every frame and a button to print it again.
- Pro
Lightbox Gallery
Stage and thumbnailsNine pictures of a photography studio's year on shared hairlines, a featured frame and a caption under each, where every frame opens one viewer dialog with the whole picture, its credit, Previous and Next, a counter, arrow keys and a swipe.