Textures & Fields
SurfaceTexture is the system's wallpaper: a faint, token-tinted SVG <pattern> that tiles seamlessly edge-to-edge behind heroes, panels, and cards. Nine nautical variants, every one riding currentColor at low opacity — the field re-themes with its surface and never competes with content.
All variants
Each field at its per-variant default opacity, tinted text-faint on the canvas token. Fields tile in both axes with no visible seam at any container size.
Rolling sine swell with a slow diagonal drift — the default field.
Seigaiha wave-scales: three concentric ribs per scale, half-offset rows.
Twisted rope courses with fibre ticks and splice rings.
45° bunting stripes — the boldest field; use sparingly.
Diagonal fishnet diamonds knotted at every crossing.
Fine engraver's crosshatch — thin, dense, no ornament.
Nautical-chart graticule with survey crosses and depth soundings.
Overlapping shallow wave crests — open water, half-offset rows.
The Privateer Skull mark tiled brick-fashion, alternate courses offset half a tile.
<div className="relative overflow-hidden">
<SurfaceTexture variant="skulls" />
{/* real content sits above with relative z-10 */}
</div>--ch-fg-faint
Skulls field
The house mark itself as wallpaper — the exact PrivateerSkull geometry (shared path data, never redrawn), scaled into the tile and laid brick-fashion: alternate courses shift half a tile, so the mark never stacks into columns. Ships at 0.06 default opacity; keep it at or below 0.08 so the flag stays a texture, not a statement.
Enlarged and tinted aurum for hero moments.
Tightened into a finer weave for small panels.
<SurfaceTexture variant="skulls" tile={1.6} opacity={0.08} className="text-accent" />--ch-fg-faint--ch-accent
Scale
The tile prop multiplies the motif size — >1 enlarges into bolder wallpaper, <1 tightens into a finer weave. Geometry stays seamless at every scale.
Texture vs. Watermark
Two different background voices. SurfaceTexture is all-over wallpaper — a repeating field with no focal point. Watermark is a motif — one (or a loose scatter of) skull/compass/coordinates stamp that anchors a region. They compose: a texture can carry a watermark above it.
Field: uniform, edge-to-edge, no anchor.
Motif: a single centred stamp that grounds the region.
{/* wallpaper */} <SurfaceTexture variant="skulls" />
{/* motif */} <Watermark motif="skull" repeat="center" />