Horizontal scroll section

Pinned section whose cards slide horizontally as you scroll vertically, with a progress bar; focus scrolls a card into view; reduced motion falls back to a normal horizontal scroller.

Studio notes

How a mug is made

Keep scrolling: the steps slide past sideways while the section holds still.

Six steps, two firings

About three weeks

Step 1
Wedge the clay
Knead out the air so the pot won't crack in the kiln.
Step 2
Centre on the wheel
Wet hands, steady pressure, until it spins without a wobble.
Step 3
Open and pull
Press a well, then lift the walls in three slow passes.
Step 4
Trim and handle
Once leather-hard, trim the foot and pull a handle.
Step 5
Bisque and glaze
A first firing, then a dip in the speckled oat glaze.
Step 6
Glaze firing
Twelve hours to 1240 °C, then a full day to cool.

After the kiln

Sand the foot, check for pinholes and wash before first use. Seconds go to the studio shelf.

Install

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

Props

Prop	Type	Default	Description
children	ReactNode	—	The cards, in order (each becomes a list item).
header	ReactNode	—	Shown above the row inside the pinned area.
container	RefObject<HTMLElement \| null>	page	Scroll container to follow; the window when omitted.
label	string	"Cards"	Accessible name of the list of cards.
trackClassName	string	—	Classes for the row (padding, gap).

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

Horizontal scroll section

Pinned section whose cards slide horizontally as you scroll vertically, with a progress bar; focus scrolls a card into view; reduced motion falls back to a normal horizontal scroller.

Studio notes

How a mug is made

Keep scrolling: the steps slide past sideways while the section holds still.

Six steps, two firings

About three weeks

Step 1
Wedge the clay
Knead out the air so the pot won't crack in the kiln.
Step 2
Centre on the wheel
Wet hands, steady pressure, until it spins without a wobble.
Step 3
Open and pull
Press a well, then lift the walls in three slow passes.
Step 4
Trim and handle
Once leather-hard, trim the foot and pull a handle.
Step 5
Bisque and glaze
A first firing, then a dip in the speckled oat glaze.
Step 6
Glaze firing
Twelve hours to 1240 °C, then a full day to cool.

After the kiln

Sand the foot, check for pinholes and wash before first use. Seconds go to the studio shelf.

Install

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

Props

Prop	Type	Default	Description
children	ReactNode	—	The cards, in order (each becomes a list item).
header	ReactNode	—	Shown above the row inside the pinned area.
container	RefObject<HTMLElement \| null>	page	Scroll container to follow; the window when omitted.
label	string	"Cards"	Accessible name of the list of cards.
trackClassName	string	—	Classes for the row (padding, gap).

Pro component

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

Buy Pebble Pro — $49 How source access works ↗

Preview

How a mug is made

Six steps, two firings

After the kiln

Install

Props

Pro component

Preview

How a mug is made

Six steps, two firings

After the kiln

Install

Props

Pro component