Watermark

Utility

Canvas-based watermark overlay with configurable text/image patterns, rotation, opacity, and tamper-resistant rendering

Watermark Component

Repeated watermark overlays for draft, confidential, and staging content.

Basic Usage

Apply default watermark text over content and simple document blocks.

Quarterly strategy document content and milestone summary.
Product requirement review notes shared with design and engineering.

Implementation Notes

Start with broad, readable text and avoid heavy opacity in default setups.

  • - Keep watermark labels short and recognizable.
  • - Use medium opacity to preserve readability of real content.
  • - Validate print and screenshot visibility early.

Normal Usage

Adjust rotation, color, and spacing for polished product interfaces.

Internal architecture notes with service ownership map.
Collaboration draft for feature rollout and support handoff.

Implementation Notes

Normal mode should align with your UI theme while preserving legible foreground content.

  • - Keep color contrast subtle but visible in screenshots.
  • - Use consistent angles for a predictable visual language.
  • - Tune pattern width and height for document density.

Advanced Usage

Switch profile presets to reuse watermark styles across workflows.

Profile preview for release notes, runbook screenshots, and shareable QA artifacts.

Active profile: DRAFT | opacity 0.08

Implementation Notes

Advanced mode should compose cleanly with app state and reusable configuration presets.

  • - Store mode profiles in a shared configuration map.
  • - Reuse presets across export, print, and screenshot flows.
  • - Keep profile labels consistent with legal policy terms.

Real-Life Use Cases

Used for legal docs, audit exports, and pre-release screenshots.

Customer contract preview with pricing appendix and legal clauses.
Pre-release dashboard screenshot for QA signoff and launch review.

Implementation Notes

Show how the component fits real workflows, not isolated UI demos.

  • - Pair watermark modes with document sensitivity classes.
  • - Ensure exported PDFs preserve overlay styling.
  • - Include policy-friendly labels like CONFIDENTIAL or DRAFT.

View on GitHub

See the full source code on GitHub

Related Components

View all
Affix

Affix element to viewport with configurable offset and boundary constraints

Chart

Comprehensive charting system with 10 chart types (Line, Bar, Area, Pie, Radar, RadialBar, Scatter, Composed, Funnel, Treemap), responsive design, and data transformations

Collapsible

Animated collapsible content with controlled expansion, smooth transitions, and accessibility

Resizable

Resizable panel system with drag handles, min/max constraints, and layout persistence

Previous

VirtualList