Grid Background
A line, dot or plus-mark pattern background with an edge fade and slowly pulsing ember cells.
Preview
NewPebble notes 2.0 is out
Notes that keep up with the work
Capture decisions where they happen. Search everything your team wrote, in one place.
Weekly writers+8.2%
12,480
Ember cells pulse across the grid
Build #482 passed
- Branch
- main
- Duration
- 1m 42s
- Checks
- 38 / 38
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "lines" | "dots" | "plus" | "lines" | Pattern drawn behind the content. |
| size | number | 24 | Cell size in px. |
| fade | "none" | "radial" | "edges" | "top" | "bottom" | "radial" | Mask that fades the pattern towards the edges. |
| pulse | number | 0 | How many ember cells slowly light up and fade. Stops under reduced motion. |
| patternClassName | string | — | Classes for the pattern layer, e.g. [--grid-color:...] to recolour it. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.