Focus scroll

Scroll frame where the item nearest the centre is fully lit and slightly scaled while others dim and blur with distance, with ember centre ticks, click-to-centre and optional snap; reduced motion only dims.

Paragraphs (scroll, or click a line)

The kiln was still warm when we opened it the next morning.
Every shelf held a small surprise: a glaze that ran, a rim that pulled true.
We lifted the mugs out one at a time and turned them in the light.
The oat glaze had broken to amber wherever the clay was thin.
Two had cracked at the handle, so they went to the seconds shelf.
The rest were wrapped in paper and stacked by the door for Friday.
By noon the kiln was cold, and we started wedging clay again.

Cards with snap: step 03

01
Wedge
Knead out the air.
02
Centre
Steady hands, wet clay.
03
Pull
Three slow passes.
04
Trim
Once leather-hard.
05
Bisque
First firing, 1000 °C.
06
Glaze
Dip and wipe the foot.
07
Fire
1240 °C, then a day to cool.

Install

Pro source requires Pebble Pro. Try the full preview above.

Props

Prop	Type	Default	Description
children	ReactNode	—	The items, one child each (paragraphs, cards).
snap	boolean	false	Settle the nearest item on the centre line.
guide	boolean	true	Show the ember centre ticks.
blur / scale	number (px) / number	2 / 1.04	Blur at the edges and the focused item's scale.
initialIndex	number	—	Item centred on mount.
onFocusChange	(index: number) => void	—	Called when a different item becomes the nearest to the centre.
label	string	"Reading list"	Accessible name of the scroll region.

Pro component

Try the full preview above. Editable source and build guides require Pebble Pro.

Buy Pebble Pro — $49 How source access works ↗

← All components Motion & transitions

Focus scroll

Paragraphs (scroll, or click a line)

The kiln was still warm when we opened it the next morning.
Every shelf held a small surprise: a glaze that ran, a rim that pulled true.
We lifted the mugs out one at a time and turned them in the light.
The oat glaze had broken to amber wherever the clay was thin.
Two had cracked at the handle, so they went to the seconds shelf.
The rest were wrapped in paper and stacked by the door for Friday.
By noon the kiln was cold, and we started wedging clay again.

Cards with snap: step 03

01
Wedge
Knead out the air.
02
Centre
Steady hands, wet clay.
03
Pull
Three slow passes.
04
Trim
Once leather-hard.
05
Bisque
First firing, 1000 °C.
06
Glaze
Dip and wipe the foot.
07
Fire
1240 °C, then a day to cool.

Install

Pro source requires Pebble Pro. Try the full preview above.

Props

Prop	Type	Default	Description
children	ReactNode	—	The items, one child each (paragraphs, cards).
snap	boolean	false	Settle the nearest item on the centre line.
guide	boolean	true	Show the ember centre ticks.
blur / scale	number (px) / number	2 / 1.04	Blur at the edges and the focused item's scale.
initialIndex	number	—	Item centred on mount.
onFocusChange	(index: number) => void	—	Called when a different item becomes the nearest to the centre.
label	string	"Reading list"	Accessible name of the scroll region.

Pro component

Try the full preview above. Editable source and build guides require Pebble Pro.

Buy Pebble Pro — $49 How source access works ↗

Preview

Install

Props

Pro component

Preview

Install

Props

Pro component