Expanding panels

Row of drawn-scene panels: the hovered or focused one springs open to show its title and text while the rest compress to slim labelled strips; arrow keys walk it; stacks vertically on narrow containers.

Day one
Pebble
Boardwalks over the reeds at first light, herons standing in the channels.
Day two
Red canyon
A slot canyon walk where the walls glow orange by noon and cool by four.
Day three
Pine ridge
A long climb through pines to a ridge with views back over the whole valley.
Day four
Night harbour
Lanterns on the water, the ferry horn, and fish suppers on the harbour wall.
Day five
Dune sea
Sand ripples to the horizon and a slow walk out to the last lighthouse.

Install

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

Props

Prop	Type	Default	Description
panels	{ id; title; eyebrow?; text; art }[]	—	Panels in order; art fills the panel (an image or drawn scene).
value / defaultValue / onValueChange	string / string / (id: string) => void	— / first / —	The open panel.
openOnHover	boolean	true	Open panels on mouse hover as well as focus and click.
label	string	"Gallery"	Accessible name of the list.

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

Expanding panels

Day one
Pebble
Boardwalks over the reeds at first light, herons standing in the channels.
Day two
Red canyon
A slot canyon walk where the walls glow orange by noon and cool by four.
Day three
Pine ridge
A long climb through pines to a ridge with views back over the whole valley.
Day four
Night harbour
Lanterns on the water, the ferry horn, and fish suppers on the harbour wall.
Day five
Dune sea
Sand ripples to the horizon and a slow walk out to the last lighthouse.

Install

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

Props

Prop	Type	Default	Description
panels	{ id; title; eyebrow?; text; art }[]	—	Panels in order; art fills the panel (an image or drawn scene).
value / defaultValue / onValueChange	string / string / (id: string) => void	— / first / —	The open panel.
openOnHover	boolean	true	Open panels on mouse hover as well as focus and click.
label	string	"Gallery"	Accessible name of the list.

Pro component

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

Buy Pebble Pro — $49 How source access works ↗

Preview

Pebble

Red canyon

Pine ridge

Night harbour

Dune sea

Install

Props

Pro component

Preview

Pebble

Red canyon

Pine ridge

Night harbour

Dune sea

Install

Props

Pro component