shadcn.io is not affiliated with official shadcn/ui
Self-Destructing Comments Block for Ark UI
Three short-lived notes: one that shows for ten seconds under a draining bar with a Pause button, one that deletes itself an hour after posting as a Pretend it's control moves time, and one you can Burn now.
Installation
Overview
Say it once and let it go, with these self-destructing comments for React with Ark UI. A compact header names the channel in Embersby, a notes tool for teams, and holds a Pretend it's Segment Group (Now, +30 min, +61 min), because the page never reads a clock. A hairline frame lists three notes. The first is view once: it sits behind a Click to view Button, shows its words for ten seconds under a draining Progress bar with a Pause button (resting the pointer on it holds the clock too), then reads This message burned. The second is timed: it was posted at 09:12 and lives for an hour, so its bar and its Deletes in 31 min line follow the pretended time until it deletes itself. The third is yours and carries Burn now. All three layers of each note share one cell, so nothing moves when a note burns, and Reset demo brings them back. It is built from Segment Group, Progress, Button, Badge, Avatar and Guides, with CSS only. For secrets in a team chat, one-time instructions and anything that should not stay on the page.
FAQ
How does the ten second burn work?
Opening the note sets left to VIEW_SECONDS and starts one setInterval that takes a second off at a time; it runs only while the note is open, not paused and the pointer is not resting on it, and it stops at zero. The bar is a Progress whose value is left / 10, and under reduced motion it jumps instead of sliding while the number beside it still counts. Pause and Resume are a real button, so a keyboard user can hold the clock; the pointer rule is a convenience on top.
What does Pretend it's change?
Only the timed note. POSTED_TIMED is the typed time it was posted, LIFETIME is 60 minutes, and the minutes left are worked out against a fixed AS_OF plus the pretended offset: 31 now, 1 at +30 min, and none at +61 min, when the note is replaced by This message deleted itself. The view-once note and your own note do not depend on it.
What stays local, and how do I make it real?
All of it. Nothing is deleted from a server: a burned note is just a different layer of the same row, and the text of every note is still in the page. In your app the server must hold the text, send it only when the recipient asks to view it, record that it was viewed and delete it there, and the timed deletion must be a job on the server. Say honestly that a viewer can still photograph their screen.
Is it accessible?
The ticking number and the bar are hidden from screen readers so nothing is read out every second; a polite status message says when you open the note, pause it and when it burns, and a text line says the note shows for ten seconds. Because a timer that moves on its own can be a barrier, Pause is always on screen and the burn is the only thing on the page that ticks. Burned and deleted notes say so in words with an icon, not colour.