WatermarkOverlay

Tiled text watermark over content

Marks what a thing is — DRAFT, SAMPLE, a viewer's name on a preview — across everything inside it. It is a label, not protection: the text underneath stays selectable, and a screenshot can be cropped or edited.

Basic

第3話 脚本 v0.4

Draft — not for distribution

○坂道の上・夕方　倫也、桜の下で帽子を拾う。振り向いた先に、恵。

<script setup lang="ts">
import { BlessText, BlessWatermarkOverlay } from "blessing-ui";
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <BlessWatermarkOverlay
      text="DRAFT"
      style="width: 320px; padding: 24px; border: 1px solid var(--bless-color-border)"
    >
      <BlessText as="p" weight="bold">第3話 脚本 v0.4</BlessText>
      <BlessText as="p" size="sm" muted>Draft — not for distribution</BlessText>
      <BlessText as="p" size="sm"
        >○坂道の上・夕方　倫也、桜の下で帽子を拾う。振り向いた先に、恵。</BlessText
      >
    </BlessWatermarkOverlay>
    <BlessWatermarkOverlay
      text="© Blessing"
      :gap="120"
      :angle="-45"
      :font-size="12"
      :opacity="0.25"
      style="width: 240px; height: 160px; background: var(--bless-color-surface)"
    />
  </div>
</template>

• The layer is hidden from screen readers and lets clicks and selection through. If the mark matters (a draft), say it in the content as well.
• color defaults to the text colour, so it follows dark mode; pass any CSS colour, a token included (var(--bless-color-danger-text) for a warning mark). opacity, angle, gap and fontSize tune the tile.

Usage

import { BlessWatermarkOverlay } from "blessing-ui";

API

Props

Name	Type	Default	Description
text*	string	—
gap	number	180	tile size in px
angle	number	-22
fontSize	number	16
opacity	number	0.15
color	string	"currentColor"	any CSS colour; the default follows the text colour, so it flips with the theme

Slots

Name	Scope	Description
default	—