Dot Wave
A canvas dot matrix with a travelling wave in size and opacity and ember crests, frozen to one frame under reduced motion.
Preview
Live audio
Every room in your building, heard at once
Sensors stream sound levels in real time. Watch the levels change throughout the day.
Floor 3 · Studio B
42 dB
Dense grid · wave travels down
All 64 sensors online
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| spacing | number | 18 | Distance between dots in px. |
| dotSize | number | 2.6 | Largest dot radius in px, at a wave crest. |
| wavelength | number | 220 | Wave length in px. |
| angle | number | 25 | Direction the wave travels, in degrees (0 = right, 90 = down). |
| speed | number | 1 | Wave speed multiplier. 0 holds the wave still. |
| accent | boolean | true | Light the highest dots in ember. |
| fade | "edges" | "center" | "none" | "edges" | Fade the dots at the edges, or clear them from the middle for centred copy. |
| canvasClassName | string | — | Extra classes for the canvas layer. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.