Staggered grid
Tile grid where a press sends a scale-and-dim ripple outward by distance, with an in-view entrance wave; off under reduced motion.
Preview
Editing activity
Last 16 weeks · 624 edits
Click any day to send a ripple through the grid.
LessMore
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | number | — | Number of columns; tiles (children) fill row by row. |
| stagger | number | 0.035 | Seconds of delay per tile of distance from the ripple origin. |
| depth | number | 0.82 | Lowest scale a tile dips to in the ripple. |
| entrance | boolean | true | Wave the tiles in the first time the grid scrolls into view. |
| onRipple | (index: number) => void | — | Called with the tile that started a ripple (click or Enter). |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.