Watermark
watermarkTiles a high-DPI canvas watermark and restores it after DOM tampering.
Usage
Basic usage
The package content area is a tiled single-line watermark, and pointer-events:none does not block interaction.
2026 Q2 Financial Presentation (Restricted)
This page contains business secrets and screenshots are prohibited. The watermark covers the entire area and adapts to the theme. If you delete the watermark layer, it will be automatically restored.
<Watermark content="Hulian · Confidential">
<YourContent />
</Watermark>Multi-line text
content passes the array and renders it as a multi-line watermark.
2026 Q2 Financial Presentation (Restricted)
This page contains business secrets and screenshots are prohibited. The watermark covers the entire area and adapts to the theme. If you delete the watermark layer, it will be automatically restored.
<Watermark content={["Hulian Confidential", "zhangzhiwei"]}>
<YourContent />
</Watermark>Intensive + Custom Color
gap Tighten the spacing, color / rotate / opacity customize the look and feel.
2026 Q2 Financial Presentation (Restricted)
This page contains business secrets and screenshots are prohibited. The watermark covers the entire area and adapts to the theme. If you delete the watermark layer, it will be automatically restored.
<Watermark
content="DO NOT SHARE"
gap={48}
rotate={-30}
color="var(--color-danger)"
opacity={0.18}
>
<YourContent />
</Watermark>Picture watermark
Pass image (dataURL / link) to tile the image, and width controls the width.
2026 Q2 Financial Presentation (Restricted)
This page contains business secrets and screenshots are prohibited. The watermark covers the entire area and adapts to the theme. If you delete the watermark layer, it will be automatically restored.
<Watermark image={logoDataUrl} width={84}>
<YourContent />
</Watermark>When to use
Use Watermark over a sensitive content region to discourage screenshot leakage. Wrap the protected children; use Empty for no data or Skeleton while loading.
Import
import { Watermark } from "@hulianui/ui"Props
Inherits all native div attributes except content, which is redefined as a string or string array.
| Name | Type | Default | Description |
|---|---|---|---|
| content | string | string[] | — | One or multiple text lines; image takes precedence when both are supplied. |
| image | string | — | Data URL or remote image source. |
| width | number | 120 | Image width in pixels. |
| height | number | Original aspect ratio | Image height in pixels. |
| rotate | number | -22 | Rotation in degrees. |
| gap | number | [number, number] | 100 | Shared x/y spacing or explicit [x, y] spacing in pixels. |
| fontSize | number | 16 | Text size in pixels. |
| fontFamily | string | sans-serif | Font family. |
| fontWeight | number | string | normal | Font weight. |
| color | string | --color-muted | Watermark color; omission follows the semantic theme token. |
| opacity | number | 0.15 | Overall opacity. |
| zIndex | number | 9 | Overlay z-index; pointer events remain disabled. |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Protected content region. |
Pitfalls
- SVG and canvas colors require full
--color-token names such asvar(--color-danger); barevar(--danger)does not resolve. See [[hulian-token-color-var-needs-color-prefix]]. - Canvas tiling and MutationObserver require a client environment. A pure static SSR screenshot may occur before the watermark is drawn; verify in a real browser.
imagetakes precedence overcontent; omit it when text should render.
Related
Playground
2026 Q2 Financial Presentation (Restricted)
This page contains business secrets and screenshots are prohibited. The watermark covers the entire area and adapts to the theme. If you delete the watermark layer, it will be automatically restored.
<Watermark content="Hulian · Confidential" rotate={-22} fontSize={16} opacity={0.15}>
<YourContent />
</Watermark>