Loading page…
Loading page…
SurfaceTexture is the system's wallpaper: faint, token-tinted fields behind heroes, panels, and cards. Swell is a live canvas wave field; the other eight are tiling SVG patterns. Every variant rides currentColor at low opacity — the field re-themes with its surface and never competes with content.
Each field at its per-variant default opacity, tinted text-faint on the canvas token. SVG fields tile in both axes with no visible seam; swell fills the frame with Perlin lines.
Perlin line waves (React Bits), horizontal by default — live tide + cursor wake. scale sm|md|lg|xl.
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-faintCanvas Perlin waves, rotated 90° from the React Bits default so lines run horizontal. waveSpeedX 0.02, line colour from currentColor. Freezes under prefers-reduced-motion. Scale presets tune density and amplitude.
scale="sm"
scale="md"
scale="lg"
scale="xl"
90° from upstream — rolling swell.
React Bits upright lines.
<div className="relative overflow-hidden">
<SurfaceTexture variant="swell" scale="lg" className="text-primary" opacity={0.1} />
</div>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-accentThe tile prop multiplies the motif size — >1 enlarges into bolder wallpaper, <1 tightens into a finer weave. Geometry stays seamless at every scale.
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" />