An ASCII tide that floods and drains the shore
| Name | Type | Default | Description |
|---|---|---|---|
colors | string[] | ["#5227FF", "#FF9FFC"] | Two colours: the water, then the foam along the waterline and the ripples. The bare flats use a neutral tint of the first. |
backgroundColor | string | "#0a0a0a" | Colour behind the glyphs. Light backgrounds switch to ink glyphs. Pass "transparent" to show the page. |
characters | string | " .:~+*#%@" | Glyph ramp from lightest to heaviest. The first character is used for empty cells, so it is usually a space. |
fontSize | number | 11 | Glyph size in pixels. Smaller values make a finer, denser map. |
fontFamily | string | "ui-monospace, …" | Monospace font stack used to draw the glyphs. |
scale | number | 1 | Size of the landscape. Larger values give broader flats and bigger pools. |
level | number | 0.5 | Average water level, from 0 (dry flats) to 1 (almost fully flooded). |
tideRange | number | 1 | How far the tide rises and falls around the average level. 0 holds the water still. |
tidePeriod | number | 36 | Seconds for one full rise and fall of the tide. |
waves | number | 1 | Strength of the swell rolling across the water and lapping at the shore. |
foam | number | 1 | Brightness and width of the foam line along the water's edge. |
contours | number | 1 | Visibility of the dotted contour lines on the exposed flats. 0 hides them. |
wetSand | number | 0.6 | How long the sand stays darkened and glistening after the tide pulls back. 0 disables it. |
depthFade | number | 0.6 | How much deeper water quietens compared with the shallows, from 0 to 1. |
brightness | number | 1 | Overall brightness of the glyphs. |
speed | number | 1 | Pace of the tide and the swell. 0 holds them still. |
interactive | boolean | true | The pointer moves through the map like a hand through water: it drags the tide and its shorelines along, leaves a glowing liquid trail, and everything flows back behind it. |
cursorRadius | number | 80 | Radius of the pointer's reach in pixels: how wide a band of water it drags and how thick its trail is. |
cursorStrength | number | 1 | How far the pointer pushes the water and shorelines before they flow back. 0 leaves the map untouched and only draws the trail. |
wake | number | 1 | Brightness of the liquid trail behind the moving pointer. 0 hides it. |
wakeLength | number | 2 | How long the trail lingers and the pushed water takes to settle, roughly in seconds. |
rippleSize | number | 1 | Speed and reach of the ripple each click sends across the map. |
clickRipples | boolean | true | Each click splashes the water outward and sends a ripple across the map. Rapid clicks stack. |
seed | number | 0 | Changes the shape of the landscape. |
paused | boolean | false | Freezes the tide and the swell. Ripples still work. |
dpr | number | 2 | Upper bound for the device pixel ratio. |
className | string | — | Classes for the root element. Give it a height. |
style | CSSProperties | — | Inline styles for the root element. |
children | ReactNode | — | Content layered above the map. |
colorsstring[]Two colours: the water, then the foam along the waterline and the ripples. The bare flats use a neutral tint of the first.
["#5227FF", "#FF9FFC"]backgroundColorstringColour behind the glyphs. Light backgrounds switch to ink glyphs. Pass "transparent" to show the page.
"#0a0a0a"charactersstringGlyph ramp from lightest to heaviest. The first character is used for empty cells, so it is usually a space.
" .:~+*#%@"fontSizenumberGlyph size in pixels. Smaller values make a finer, denser map.
11fontFamilystringMonospace font stack used to draw the glyphs.
"ui-monospace, …"scalenumberSize of the landscape. Larger values give broader flats and bigger pools.
1levelnumberAverage water level, from 0 (dry flats) to 1 (almost fully flooded).
0.5tideRangenumberHow far the tide rises and falls around the average level. 0 holds the water still.
1tidePeriodnumberSeconds for one full rise and fall of the tide.
36wavesnumberStrength of the swell rolling across the water and lapping at the shore.
1foamnumberBrightness and width of the foam line along the water's edge.
1contoursnumberVisibility of the dotted contour lines on the exposed flats. 0 hides them.
1wetSandnumberHow long the sand stays darkened and glistening after the tide pulls back. 0 disables it.
0.6depthFadenumberHow much deeper water quietens compared with the shallows, from 0 to 1.
0.6brightnessnumberOverall brightness of the glyphs.
1speednumberPace of the tide and the swell. 0 holds them still.
1interactivebooleanThe pointer moves through the map like a hand through water: it drags the tide and its shorelines along, leaves a glowing liquid trail, and everything flows back behind it.
truecursorRadiusnumberRadius of the pointer's reach in pixels: how wide a band of water it drags and how thick its trail is.
80cursorStrengthnumberHow far the pointer pushes the water and shorelines before they flow back. 0 leaves the map untouched and only draws the trail.
1wakenumberBrightness of the liquid trail behind the moving pointer. 0 hides it.
1wakeLengthnumberHow long the trail lingers and the pushed water takes to settle, roughly in seconds.
2rippleSizenumberSpeed and reach of the ripple each click sends across the map.
1clickRipplesbooleanEach click splashes the water outward and sends a ripple across the map. Rapid clicks stack.
trueseednumberChanges the shape of the landscape.
0pausedbooleanFreezes the tide and the swell. Ripples still work.
falsedprnumberUpper bound for the device pixel ratio.
2classNamestringClasses for the root element. Give it a height.
—styleCSSPropertiesInline styles for the root element.
—childrenReactNodeContent layered above the map.
—