@egintegrations/watermark

A lightweight, reusable watermark component for React, Astro, and web projects. Renders a configurable watermark overlay with a hover effect that fills the logo's line work with a custom color via CSS mask.

Installation

npm install @egintegrations/watermark

Peer Dependencies

npm install react

Usage

React / Next.js

import { Watermark } from "@egintegrations/watermark";

function Dashboard() {
  return (
    <Watermark
      opacity={0.12}
      hoverOpacity={0.35}
      hoverColor="#f5e0c0"
      maxWidth="300px"
      rotation={0}
    >
      <div style={{ minHeight: 400 }}>
        <h1>Dashboard Content</h1>
      </div>
    </Watermark>
  );
}

Astro

---
import { Watermark } from "@egintegrations/watermark";
---

<Watermark client:load opacity={0.12} hoverOpacity={0.35} hoverColor="#f5e0c0" maxWidth="300px">
  <div style="min-height: 400px">
    <h1>Dashboard Content</h1>
  </div>
</Watermark>

Minimal

<Watermark>
  <YourApp />
</Watermark>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | src | string | embedded EGI logo PNG | Watermark image source (data URI or URL) | | opacity | number | 0.12 | Default opacity of the watermark | | hoverOpacity | number | 0.35 | Opacity on hover | | width | string | "100%" | Container width | | maxWidth | string | "300px" | Maximum width of the watermark image | | zIndex | number | 0 | Z-index of the watermark layers | | rotation | number | 0 | Rotation angle in degrees | | hoverColor | string | "#f5e0c0" | Color that fills the logo line work on hover (CSS mask overlay) | | disableHover | boolean | false | Disable hover effect | | className | string | — | Additional CSS class | | style | CSSProperties | — | Additional inline styles |

Hover Effect

On hover, two things happen simultaneously:

1. The watermark image opacifies from opacity → hoverOpacity and scales up 1 → 1.05
2. A CSS mask overlay fades in, filling only the logo's line work and text with hoverColor — no box-shadow, no background tint, just the logo shape filled with color

License

MIT

Repository

EGIntegrations/egi-comp-library — packages/typescript/watermark