Circular Text
Text set around a circle that turns slowly around a centre glyph or button, speeding up on hover and pausing on focus.
Preview
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Text around the circle; end it with a separator such as · . |
| repeat | number | 1 | Times the text repeats. |
| size | number | 160 | Diameter in px. |
| duration | number | 18 | Seconds per turn. |
| hoverSpeed | number | 4 | Speed multiplier while hovered; focus inside pauses. |
| direction | "clockwise" | "counterclockwise" | "clockwise" | Turn direction. |
| children / textClassName | ReactNode / string | — | Centre glyph or control, and classes for the ring of text. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.