Dot nav

Vertical section-dot navigator: the current dot grows into a labelled pill, tooltips name the others, click to scroll, scroll-spy; dots or numbered-with-progress variants, either edge.

Dots, right edge

Field guide

Reading a tide pool

Arrival

Today’s tides

Low06:420.4 m

High12:584.9 m

Low19:100.6 m

Come an hour before low tide. The rocks are slick, so wear shoes that grip and keep your hands free.

High zone

Periwinkles and barnacles cling above the waterline.

Pools up here are warm and salty. Barnacles close tight until the water returns.

Mid zone

An anemone opens when the pool refills.

Anemones open like small flowers under water and fold into jelly beads when the tide leaves.

Low zone

Kelp and a starfish at the lowest edge.

The richest pools sit at the very edge. Watch the waves: the sea comes back faster than it seems.

Leaving

Stones back where they were
Shoes rinsed
Notes written up

Count your steps back up the shore and come again on the next spring tide.

Numbered with progress, left edge

Setup

Syncing your first table

Install

$ pnpm add @harbour/sync
+ @harbour/sync 2.4.1

Add the client to your project. It has no runtime dependencies.

Configure

region: eu-north
batchSize: 250
retry: 3 × backoff

Pick the closest region and a batch size; the defaults suit most apps.

Connect data

Rows synced per minute while the first import runs.

Point it at a table. The first import streams in batches you can watch.

Deploy

Staging green
Keys rotated
Ship to production

Promote once staging stays green for a day.

Install

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

Props

Prop	Type	Default	Description
sections	{ id: string; label: string }[]	—	Sections by element id, in page order.
container	RefObject<HTMLElement \| null>	page	Scroll container to watch and scroll; the window when omitted.
offset	number (0–1)	0.35	Reading line as a fraction of the container height.
side	"left" \| "right"	"left"	Direction the pill grows and tooltips open.
label	string	"Sections"	Accessible name of the navigation.
onActiveChange	(id: string) => void	—	Called when the current section changes.
variant	"dots" \| "numbered"	"dots"	Plain dots, or numbered markers on a progress line filled to the current section.
defaultTooltip	string	—	Section id whose tooltip starts open (a static preview of the hover label).

Pro component

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

Buy Pebble Pro — $49 How source access works ↗

Props

Prop	Type	Default	Description
sections	{ id: string; label: string }[]	—	Sections by element id, in page order.
container	RefObject<HTMLElement \| null>	page	Scroll container to watch and scroll; the window when omitted.
offset	number (0–1)	0.35	Reading line as a fraction of the container height.
side	"left" \| "right"	"left"	Direction the pill grows and tooltips open.
label	string	"Sections"	Accessible name of the navigation.
onActiveChange	(id: string) => void	—	Called when the current section changes.
variant	"dots" \| "numbered"	"dots"	Plain dots, or numbered markers on a progress line filled to the current section.
defaultTooltip	string	—	Section id whose tooltip starts open (a static preview of the hover label).

Preview

Reading a tide pool

Arrival

High zone

Mid zone

Low zone

Leaving

Syncing your first table

Install

Configure

Connect data

Deploy

Install

Props

Pro component

Preview

Reading a tide pool

Arrival

High zone

Mid zone

Low zone

Leaving

Syncing your first table

Install

Configure

Connect data

Deploy

Install

Props

Pro component