Watermark

Demo & usage

More examples

<sv-watermark variant="single" text="DRAFT" [angle]="-20" [fontSize]="48" [opacity]="0.12">…</sv-watermark>

<sv-watermark #mark text="Confidential" [observeResize]="false">…</sv-watermark>

// after the container changes size
mark.measure();

<sv-watermark text="Confidential" [viewerId]="user.id" [viewerSalt]="deploymentSalt">…</sv-watermark>

// or build the text yourself
import { svViewerToken } from '@styloviz/watermark';
const text = 'Confidential · ' + svViewerToken(user.id, deploymentSalt);

<sv-watermark #mark text="Confidential" (tampered)="onTampered()">…</sv-watermark>

const expected = mark.signature();
setInterval(() => mark.checkIntegrity(expected), 2000);

When to use

• Marking a document, preview or export with its classification or the viewer's identity.
• Deterring the casual crop-and-share, which is what almost every real leak actually is.
• NOT as a security control — anything rendered in the browser can be removed by somebody with the page source.

Async states

None — this component has nothing to load, so it has no loading, empty or error state to drive.

Outputs

Customization & theming

• Three variants: `tiled`, `single` and `inspect` (which shows the tile arithmetic and the opacity verdict).
• Any `text`, `angle`, `fontSize`, `opacity` and per-axis gaps.
• Row stagger on or off.
• `signature()` + `checkIntegrity(expected)` + the `tampered` output, which reports (it does not restore) a removed, hidden or edited overlay.
• Threat model: watermarking is deterrence, not security. `tampered` means a client-side DOM mutation (or configuration change) was observed; it does not mean the content is protected, and it is not a compliance control.
• Privacy: `viewerId` + `viewerSalt` append an opaque token (`svViewerToken`, a 32-bit FNV-1a hash — not a secret; salt it or mint it server-side). The mark text also lands in the DOM, the visually-hidden label and `data-sv-signature`.
• Measurement: re-tiling is automatic — a ResizeObserver (`svElementSize`, border box, one measurement per frame) re-tiles when the box resizes, and `document.fonts` re-measures the text after web fonts load. Set `[observeResize]="false"` to call `measure()` yourself. The server renders no marks (zero size); the browser tiles on hydration.
• Variant axes: `variant` (tiled, single, inspect) and `angle`, `fontSize`, `opacity`, gaps, `stagger` are appearance; `observeResize` and `viewerId` are behavioural and combine with every variant. `single` ignores gaps and stagger.
• Containing block: the overlay is `position: absolute; inset: 0` inside the component's own relative box, so it covers what is projected into it — not a scrolled-away part of an inner scroll container, and not a body portal (menus, dialogs) opened from inside it.
• Browser limits: `document.fonts` is missing in some embedded webviews (the estimate is kept); forced-colors mode may repaint the marks in system colours; and anything rendered client-side can be removed by somebody with the page source.

Best practices

• Do: Keep the opacity between about 0.04 and 0.25 — the `inspect` variant tells you which side you are on and why.
• Do: Identify the viewer with an opaque token (`viewerId`, or `svViewerToken()`), not a name or email — the mark is published to every screenshot, screen share and support ticket the page appears in. Dev mode warns once when the text looks like an email address.
• Don't: Don't treat `tampered` as a control. It proves only that the overlay was changed in this browser at the time of the check; it proves nothing about screenshots taken before, it is not an audit record, and silence proves nothing — the check runs inside the page an attacker controls. A durable mark is burned in on the server (an exported PDF or image).
• Tip: Leave `stagger` on: a square grid reads as columns, and columns leave clean vertical stripes a screenshot can be cropped to.
• Don't: Don't present it as protection. Say what it is — a deterrent — or the belief that it protects will stop somebody doing something that works.

Accessibility

• The overlay is `pointer-events: none`, so it never intercepts a click meant for the content underneath — the commonest way this control ships broken, and one whose symptom (buttons that do nothing) never looks like a watermark bug.
• The repeated marks are `aria-hidden`; the mark is announced once, in words, in a visually-hidden label. A screen reader reading "Confidential" forty times is not accessibility.
• The marks are `select-none`, so a watermark never lands in the clipboard when somebody copies a paragraph.