Content & display

Watermark

Q: How do I implement a Watermark?

Add a page watermark: draw user name + id + date on a canvas, rotate ~-20°, export dataURL, tile as a full-viewport layer with pointer-events: none and low opacity. Optionally reattach via MutationObserver if removed.

Semi-transparent tiled identity (name, id, date) over content as a leak deterrent.

Also known as page watermark · tiled watermark · document stamp

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Watermark".

Add a page watermark: draw user name + id + date on a canvas, rotate ~-20°, export dataURL, tile as a full-viewport layer with pointer-events: none and low opacity. Optionally reattach via MutationObserver if removed.

Anatomy:
- content: Name + id + date so a screenshot points to a person.
- tiling: Rotate ~15–30° with spacing so any crop still shows it.
- tamper guard: MutationObserver recreates the node if deleted.
- opacity: Around 0.08–0.12: readable content, still visible in screenshots.

Preferred API / pattern: `canvas tile layer / CSS background`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Watermark captures clicks
○Avoid: Hundreds of DOM text nodes
○Avoid: Opacity too high
○Avoid: Treating it as real security

In plain wordsHow people search for it

“faint diagonal name and employee id tiled across the whole admin page”“the background stamp so a screenshot shows who leaked it”“light repeated text over a design preview or PDF”

AnatomyOpen for part names

content: Name + id + date so a screenshot points to a person.
tiling: Rotate ~15–30° with spacing so any crop still shows it.
tamper guard: MutationObserver recreates the node if deleted.
opacity: Around 0.08–0.12: readable content, still visible in screenshots.

How to write itOpen for stack patterns

Web (HTML/CSS)Canvas → dataURL + background-repeat

React + Tailwind + shadcn/uicanvas tile layer / CSS background

SwiftUICanvas overlay / tiled Image

Ant Design<Watermark content={[name, id]}>

Notes

Deterrent, not cryptography—DevTools can strip it; pair with server audit logs. Canvas tiling beats hundreds of DOM nodes. pointer-events: none or the whole page dies. Useful for admin consoles, design previews, and document viewers—not only “compliance in one market.”

Common mistakesHumans and models trip here

Watermark captures clicks: forgot pointer-events: none.
Hundreds of DOM text nodes: scroll jank—use a canvas background.
Opacity too high: unreadable UI; too low: useless in screenshots.
Treating it as real security: still log access server-side.

More failure symptoms on AI broke it.

Related patterns

Scrim / Overlay / BackdropA translucent layer under an overlay that dims the page and blocks clicks.Data TableA grid of rows and columns for comparing structured records.Glassmorphism / Backdrop BlurBlur what’s behind a surface and tint it so the layer reads as translucent glass.

Spotted a wrong name or missing pattern?

Message on X