Glyph Sonar

Sonar pings sweeping a field of glyphs, lighting up drifting shoals

glyph-sonar-tw

Customize

Shoals

Echo

Background

Glyph Size

11px

Spacing

1.00

Glyph Weight

1.00

Density

0.50

Scale

1.00

Drift

1.00

Drift Angle

20°

Ambient

0.35

Interval

3.4s

Origin X

0.50

Origin Y

0.50

Ping Speed

1.00

Range

1.00

Ring Width

1.00

Persistence

0.60s

Reveal

0.50

Echo Strength

1.00

Glow

0.12

Intensity

1.00

Speed

1.00

Auto PingClick PingEchoInteractivePaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#7C5CFF", "#FF9FFC"]`	Colour of the resting shoals and colour of the echo where a ping strikes them, blended in OKLab. The crest of a strike burns toward white.
`backgroundColor`	string	`"#0A0A0A"`	Colour of the open water.
`mode`	"auto" \| "glow" \| "ink"	`"auto"`	glow adds light for dark backgrounds, ink prints coloured glyphs for light ones. auto picks from the background brightness.
`charset`	string	`" ·+×○◎◉"`	Glyphs the field is drawn with, sorted by how much ink each one uses, so any string works as a brightness ramp. · • ● + × ○ ◎ ◉ □ ■ ◇ ◆ △ ▲ are drawn as crisp vector shapes; anything else uses fontFamily.
`fontFamily`	string	`system monospace`	Font for characters that are not built-in shapes. Use a font that is already loaded on the page.
`glyphSize`	number	`11`	Size of each glyph in pixels.
`spacing`	number	`1`	Gap between glyphs as a multiple of their size, from 0.7 (packed) to 3 (airy).
`glyphWeight`	number	`1`	Stroke weight of the built-in shapes, from 0.4 to 3.
`density`	number	`0.5`	How much of the water the shoals cover, from 0 (a few faint contacts) to 1 (crowded).
`scale`	number	`1`	Size of the shoals. Larger values make fewer, broader shapes.
`drift`	number	`1`	How fast the shoals drift and reshape, from 0 (still) to 5.
`driftAngle`	number	`20`	Direction the shoals drift, in degrees. 0 drifts to the right, 90 upward.
`ambient`	number	`0.35`	How visible the shoals are between pings, from 0 (only pings reveal them) to 1.
`autoPing`	boolean	`true`	Send pings from the origin on a steady rhythm.
`interval`	number	`3.4`	Seconds between automatic pings.
`originX`	number	`0.5`	Horizontal position the automatic pings start from, from 0 (left) to 1 (right). Values outside that range move it off-frame.
`originY`	number	`0.5`	Vertical position the automatic pings start from, from 0 (top) to 1 (bottom). Values above 1 let them rise from below the frame.
`pingSpeed`	number	`1`	How fast each wavefront travels outward.
`range`	number	`1`	How far a ping travels before it fades out.
`ringWidth`	number	`1`	Thickness of the wavefront.
`persistence`	number	`0.6`	Seconds a shoal keeps glowing after a wavefront passes, like phosphor on a sonar screen.
`reveal`	number	`0.5`	How much faint structure around the shoals a ping uncovers as it passes, from 0 to 1.
`glow`	number	`0.12`	Soft bloom around the brightest glyphs, from 0 to 3.
`intensity`	number	`1`	Overall exposure.
`speed`	number	`1`	Time scale for everything: drift, pings and their rhythm.
`interactive`	boolean	`true`	Respond to the pointer.
`clickPing`	boolean	`true`	Clicking sends a ping from that point. Every click adds its own wavefront, so pings overlap freely.
`echo`	boolean	`true`	The pointer becomes an object in the water: wavefronts break around it, leaving a soft shadow behind, and bounce back as a smaller echo.
`echoStrength`	number	`1`	Strength of the pointer's echo and shadow, from 0 to 2.
`paused`	boolean	`false`	Freeze the field. Reduced-motion users always get a still frame.
`quality`	number	`1`	Resolution scale from 0.25 to 1. Lower values are cheaper on large screens.
`ref`	{ ping }	`—`	ping(x, y) sends a ping from a point given as fractions of the width and height. Without arguments it starts from the origin.
`children`	ReactNode	`—`	Content placed over the background.
`className`	string	`—`	Classes for the root element. It fills its parent, with a 240px minimum height.
`style`	CSSProperties	`—`	Inline styles for the root element.

colors[string, string]

Colour of the resting shoals and colour of the echo where a ping strikes them, blended in OKLab. The crest of a strike burns toward white.

Default["#7C5CFF", "#FF9FFC"]

backgroundColorstring

Colour of the open water.

Default"#0A0A0A"

mode"auto" | "glow" | "ink"

glow adds light for dark backgrounds, ink prints coloured glyphs for light ones. auto picks from the background brightness.

Default"auto"

charsetstring

Glyphs the field is drawn with, sorted by how much ink each one uses, so any string works as a brightness ramp. · • ● + × ○ ◎ ◉ □ ■ ◇ ◆ △ ▲ are drawn as crisp vector shapes; anything else uses fontFamily.

Default" ·+×○◎◉"

fontFamilystring

Font for characters that are not built-in shapes. Use a font that is already loaded on the page.

Defaultsystem monospace

glyphSizenumber

Size of each glyph in pixels.

Default11

spacingnumber

Gap between glyphs as a multiple of their size, from 0.7 (packed) to 3 (airy).

Default1

glyphWeightnumber

Stroke weight of the built-in shapes, from 0.4 to 3.

Default1

densitynumber

How much of the water the shoals cover, from 0 (a few faint contacts) to 1 (crowded).

Default0.5

scalenumber

Size of the shoals. Larger values make fewer, broader shapes.

Default1

driftnumber

How fast the shoals drift and reshape, from 0 (still) to 5.

Default1

driftAnglenumber

Direction the shoals drift, in degrees. 0 drifts to the right, 90 upward.

Default20

ambientnumber

How visible the shoals are between pings, from 0 (only pings reveal them) to 1.

Default0.35

autoPingboolean

Send pings from the origin on a steady rhythm.

Defaulttrue

intervalnumber

Seconds between automatic pings.

Default3.4

originXnumber

Horizontal position the automatic pings start from, from 0 (left) to 1 (right). Values outside that range move it off-frame.

Default0.5

originYnumber

Vertical position the automatic pings start from, from 0 (top) to 1 (bottom). Values above 1 let them rise from below the frame.

Default0.5

pingSpeednumber

How fast each wavefront travels outward.

Default1

rangenumber

How far a ping travels before it fades out.

Default1

ringWidthnumber

Thickness of the wavefront.

Default1

persistencenumber

Seconds a shoal keeps glowing after a wavefront passes, like phosphor on a sonar screen.

Default0.6

revealnumber

How much faint structure around the shoals a ping uncovers as it passes, from 0 to 1.

Default0.5

glownumber

Soft bloom around the brightest glyphs, from 0 to 3.

Default0.12

intensitynumber

Overall exposure.

Default1

speednumber

Time scale for everything: drift, pings and their rhythm.

Default1

interactiveboolean

Respond to the pointer.

Defaulttrue

clickPingboolean

Clicking sends a ping from that point. Every click adds its own wavefront, so pings overlap freely.

Defaulttrue

echoboolean

The pointer becomes an object in the water: wavefronts break around it, leaving a soft shadow behind, and bounce back as a smaller echo.

Defaulttrue

echoStrengthnumber

Strength of the pointer's echo and shadow, from 0 to 2.

Default1

pausedboolean

Freeze the field. Reduced-motion users always get a still frame.

Defaultfalse

qualitynumber

Resolution scale from 0.25 to 1. Lower values are cheaper on large screens.

Default1

ref{ ping }

ping(x, y) sends a ping from a point given as fractions of the width and height. Without arguments it starts from the origin.

Default—

childrenReactNode

Content placed over the background.

Default—

classNamestring

Classes for the root element. It fills its parent, with a 240px minimum height.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

colors

[string, string]

["#7C5CFF", "#FF9FFC"]

Colour of the resting shoals and colour of the echo where a ping strikes them, blended in OKLab. The crest of a strike burns toward white.

backgroundColor

string

"#0A0A0A"

Colour of the open water.

mode

"auto" | "glow" | "ink"

"auto"

glow adds light for dark backgrounds, ink prints coloured glyphs for light ones. auto picks from the background brightness.

charset

string

" ·+×○◎◉"

fontFamily

string

system monospace

Font for characters that are not built-in shapes. Use a font that is already loaded on the page.

glyphSize

number

11

Size of each glyph in pixels.

spacing

number

1

Gap between glyphs as a multiple of their size, from 0.7 (packed) to 3 (airy).

glyphWeight

number

1

Stroke weight of the built-in shapes, from 0.4 to 3.

density

number

0.5

How much of the water the shoals cover, from 0 (a few faint contacts) to 1 (crowded).

scale

number

1

Size of the shoals. Larger values make fewer, broader shapes.

drift

number

1

How fast the shoals drift and reshape, from 0 (still) to 5.

driftAngle

number

20

Direction the shoals drift, in degrees. 0 drifts to the right, 90 upward.

ambient

number

0.35

How visible the shoals are between pings, from 0 (only pings reveal them) to 1.

autoPing

boolean

true

Send pings from the origin on a steady rhythm.

interval

number

3.4

Seconds between automatic pings.

originX

number

0.5

Horizontal position the automatic pings start from, from 0 (left) to 1 (right). Values outside that range move it off-frame.

originY

number

0.5

Vertical position the automatic pings start from, from 0 (top) to 1 (bottom). Values above 1 let them rise from below the frame.

pingSpeed

number

1

How fast each wavefront travels outward.

range

number

1

How far a ping travels before it fades out.

ringWidth

number

1

Thickness of the wavefront.

persistence

number

0.6

Seconds a shoal keeps glowing after a wavefront passes, like phosphor on a sonar screen.

reveal

number

0.5

How much faint structure around the shoals a ping uncovers as it passes, from 0 to 1.

glow

number

0.12

Soft bloom around the brightest glyphs, from 0 to 3.

intensity

number

1

Overall exposure.

speed

number

1

Time scale for everything: drift, pings and their rhythm.

interactive

boolean

true

Respond to the pointer.

clickPing

boolean

true

Clicking sends a ping from that point. Every click adds its own wavefront, so pings overlap freely.

echo

boolean

true

The pointer becomes an object in the water: wavefronts break around it, leaving a soft shadow behind, and bounce back as a smaller echo.

echoStrength

number

1

Strength of the pointer's echo and shadow, from 0 to 2.

paused

boolean

false

Freeze the field. Reduced-motion users always get a still frame.

quality

number

1

Resolution scale from 0.25 to 1. Lower values are cheaper on large screens.

ref

{ ping }

—

ping(x, y) sends a ping from a point given as fractions of the width and height. Without arguments it starts from the origin.

children

ReactNode

—

Content placed over the background.

className

string

—

Classes for the root element. It fills its parent, with a 240px minimum height.

style

CSSProperties

—

Inline styles for the root element.