shadcn.io is not affiliated with official shadcn/ui
Watermarked Comments Block for Ark UI
A confidential review thread viewed through a tiled watermark of the viewer id and time, with Light, Normal and Dense settings, and a Trace a leak select that resolves a leaked excerpt to a person.
Installation
Overview
Remind every reader that the room is theirs alone, with this watermarked comment thread for React with Ark UI. A compact header names the review room. A hairline frame opens with a band for the viewer: an Input that sets the viewer id and a Segment Group that sets the watermark Light, Normal or Dense. Under it the three confidential comments sit in a labelled scroll region of fixed height, with a tiled watermark drawn over them: a grid of rotated marks that read "ingrid@marksley.example, 14 Oct 09:41". The tiles are hidden from screen readers and never take a click, so the thread stays readable and selectable. Below, "Trace a leak" is a Native Select of two leaked excerpts: choosing one reads the mark visible in it and resolves it to a person, a device and a time through a typed lookup. A line says a watermark deters but does not stop copying. It is built from Input, Segment Group, Native Select, Label, Avatar, Badge and Guides, with a CSS entrance only. For deal rooms, embargoed drafts and any thread you would rather not see on a screenshot.
FAQ
How do I change the viewer, the mark and the lookup?
markOf builds the mark from the viewer id and the STAMP constant, DENSITIES sets how many tiles each setting draws and how many columns they sit in, and LOG is the typed lookup that traceOf reads. In a real room the mark is drawn from the signed-in user and the time the page was opened, not from a text field. The field here is only so you can see the mark change.
Does a watermark stop leaks?
No. It deters people and gives you a lead after the fact: someone can retype the words or crop the tiles out of a screenshot, and a photo of the screen carries the mark with it. Use it with limited access, short sessions and an audit trail, and tell readers it is there. The block says so under the trace.
How does Trace a leak work for real?
Your server records an id for each time someone opens the room, draws that id (not an email address, which would be easy to remove) in the mark, and keeps the log of who opened it and when. Tracing reads the mark in a leaked image, looks it up in that log and returns the person and the time. Here the log is a typed object and the match is exact. Real marks need an error-tolerant code, since a screenshot can hide part of a tile.
Is it accessible?
The watermark is aria-hidden and has pointer-events off, so assistive technology reads the comments and nothing else, and the marks are faint enough to leave the text at a readable contrast. The viewer field and density control are labelled, the trace result is written as a sentence and the status line is present from load and is read out politely when you change the setting or trace an excerpt.