Border Beam
A streak of light that travels around a card's border, with token colours, several beams, an optional glow and a static edge under reduced motion.
Preview
Studio planRecommended
$24 / seat / month
- Unlimited projects and guests
- Version history for 180 days
- Priority support, 4 h response
Thinking · 2 sources
Deploying to production
Syncing
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 120 | Beam length in px. |
| duration | number | 6 | Seconds per lap of the border. |
| borderWidth | number | 2 | Border thickness in px. |
| radius | number | 14 | Corner radius of the path in px; match the parent's radius. |
| colorFrom | string | "var(--accent)" | Head colour of the beam. |
| colorTo | string | "var(--chart-5)" | Tail colour of the beam. |
| beams | number | 1 | How many beams share the border, evenly spaced. |
| reverse | boolean | false | Run counter-clockwise. |
| glow | boolean | false | Soft blurred halo around the beam. |
| delay | number | 0 | Start offset in seconds, to desynchronise several cards. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.