Tier watermark
componentThe season/tier corner assembly shared by the item tile and the inspect popup header: a soft scrim, the season crest, and a colored diamond per gear tier — the diamonds and gradient are drawn in CSS (no baked-in Bungie asset margins), so the whole stack aligns precisely.
Install
npx shadcn@latest add @engram/tier-watermarkRegistry item: /r/tier-watermark.json — the machine-readable definition agents install from.
Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
seasonIcon | ImageRef | — | Clean season glyph (`DestinyIconDefinition.secondaryBackground`). |
tier | number | 0 | Gear tier (1–5). Drawn as that many diamonds — gold at tier 5, light blue/purple below; tier 1 (and untiered) shows none. |
corner | "top-left" | "top-right" | "top-left" | Corner the crest + diamonds sit in. Default top-left. |
glyphSize | number | 16 | Season crest width, px. |
diamondSize | number | 5 | Diamond edge length, px. |
scrimWidth | number | 32 | Width of the top-to-bottom scrim strip down the crest's column, px. |
crestGap | number | 3 | Gap between the crest and the diamonds, px. |
diamondGap | number | 4 | Gap between adjacent diamonds, px. Scaled down with the tile so a full 5-diamond stack never runs off the bottom edge on small tiles. |
className | string | — | — |
Composition
pulled in on install- tier-watermarkcomponent
- bungie-imageatom
Dependencies
npm@engram/core
Own the code: shadcn add copies this component's source into your repo to read and edit directly. Extend without forking — edit the source, use asChild to swap the element, or pass the typed annotations prop for curated data.