Scrollytelling Panel

Preview in your theme

ready

ready — default props: visual on the left, five steps on the right, one hairline reading line at 45% of the scrollport deciding who owns the frame. The dots below the frame are real controls: tab to them and press Enter to jump a step. On a fine pointer, move the cursor over the frame — the photograph drifts away from it.

onActiveChange:0 · Picked twice, by hand, at 1,900 metres

Scroll inside this box — the visual is pinned, the copy moves.

Coffee cherries being sorted by hand on a hillside farm — Cerro Azul, second pass · March

Washing channels running beside a processing station — Cerro Azul, second pass · March

01 · Harvest
Picked twice, by hand, at 1,900 metres
Cherries ripen unevenly on the same branch, so every tree is walked twice a season. Only the fruit that gives under a thumb goes in the basket — everything else waits nine more days.
02 · Wash
Twelve hours in the tank decides the acidity
Fermentation is where the cup is really written. Pull the lot too early and it reads flat; leave it overnight and the fruit turns to vinegar. The tank is tasted every ninety minutes.
03 · Dry
Eighteen days on raised beds, raked hourly
Drying slowly on mesh keeps moisture even through the bean instead of case-hardening the outside. Beds are covered at noon and again at dusk, and nothing leaves until it reads 10.5%.
04 · Roast
First crack at 196°C, and then you have ninety seconds
Development time after first crack is the whole argument between a bright cup and a heavy one. The profile is logged bean-probe by bean-probe and replayed on the next batch to within four seconds.
05 · Brew
Ground eleven minutes before it reaches the table
Every step above buys the same thing: a window. Grind inside it and the cup tastes like the farm; grind an hour early and it tastes like the shelf it sat on.

variant · right rail, rise swap

mediaSide="right" + swap="rise" + stickyOffset={56}— the frame parks 56px down (room for the stage's own toolbar) and each visual arrives from below instead of dissolving in place.

stickyOffset leaves room for a header of your own.

Field notesstickyOffset=56

01 · Harvest
Picked twice, by hand, at 1,900 metres
Cherries ripen unevenly on the same branch, so every tree is walked twice a season. Only the fruit that gives under a thumb goes in the basket — everything else waits nine more days.
02 · Wash
Twelve hours in the tank decides the acidity
Fermentation is where the cup is really written. Pull the lot too early and it reads flat; leave it overnight and the fruit turns to vinegar. The tank is tasted every ninety minutes.
03 · Dry
Eighteen days on raised beds, raked hourly
Drying slowly on mesh keeps moisture even through the bean instead of case-hardening the outside. Beds are covered at noon and again at dusk, and nothing leaves until it reads 10.5%.
04 · Roast
First crack at 196°C, and then you have ninety seconds
Development time after first crack is the whole argument between a bright cup and a heavy one. The profile is logged bean-probe by bean-probe and replayed on the next batch to within four seconds.
05 · Brew
Ground eleven minutes before it reaches the table
Every step above buys the same thing: a window. Grind inside it and the cup tastes like the farm; grind an hour early and it tastes like the shelf it sat on.

variant · zoom swap, dense runway

swap="zoom" + stepHeight="15rem" + parallax={false} + activeLine={0.3} — a denser, faster edit: short runways, the reading line raised to a third of the way down, and the pointer effect switched off for a calmer frame. Narrow the window past lg and the line drops back below the parked frame — a line the opaque visual is sitting on would hand the story to copy you cannot read.

Shorter runway per step — the story moves twice as fast.

01 · Harvest
Picked twice, by hand, at 1,900 metres
Cherries ripen unevenly on the same branch, so every tree is walked twice a season. Only the fruit that gives under a thumb goes in the basket — everything else waits nine more days.
02 · Wash
Twelve hours in the tank decides the acidity
Fermentation is where the cup is really written. Pull the lot too early and it reads flat; leave it overnight and the fruit turns to vinegar. The tank is tasted every ninety minutes.
03 · Dry
Eighteen days on raised beds, raked hourly
Drying slowly on mesh keeps moisture even through the bean instead of case-hardening the outside. Beds are covered at noon and again at dusk, and nothing leaves until it reads 10.5%.
04 · Roast
First crack at 196°C, and then you have ninety seconds
Development time after first crack is the whole argument between a bright cup and a heavy one. The profile is logged bean-probe by bean-probe and replayed on the next batch to within four seconds.
05 · Brew
Ground eleven minutes before it reaches the table
Every step above buys the same thing: a window. Grind inside it and the cup tastes like the farm; grind an hour early and it tastes like the shelf it sat on.

loading — the pinned frame and three copy slabs are held at their real proportions, so nothing jumps when the steps land.

empty

empty — a story with no steps says so instead of pinning an empty frame. A ready response that carries zero steps lands here too.

No story steps yet

Add steps and the pinned visual starts following the reader down the page.

error

error — the steps never arrived. Try again is only rendered when the host passes onRetry; here it swaps in the loaded story.

Couldn't load this story

The steps didn't arrive, so there is nothing to pin the visual to.

Loading preview…

This component is part of Pro

The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.

Unlock with Pro

Scrollytelling Panel

Picked twice, by hand, at 1,900 metres

Twelve hours in the tank decides the acidity

Eighteen days on raised beds, raked hourly

First crack at 196°C, and then you have ninety seconds

Ground eleven minutes before it reaches the table

Picked twice, by hand, at 1,900 metres

Twelve hours in the tank decides the acidity

Eighteen days on raised beds, raked hourly

First crack at 196°C, and then you have ninety seconds

Ground eleven minutes before it reaches the table

Picked twice, by hand, at 1,900 metres

Twelve hours in the tank decides the acidity

Eighteen days on raised beds, raked hourly

First crack at 196°C, and then you have ninety seconds

Ground eleven minutes before it reaches the table

Picked twice, by hand, at 1,900 metres

Twelve hours in the tank decides the acidity

Eighteen days on raised beds, raked hourly

First crack at 196°C, and then you have ninety seconds

Ground eleven minutes before it reaches the table

Picked twice, by hand, at 1,900 metres

Twelve hours in the tank decides the acidity

Eighteen days on raised beds, raked hourly

First crack at 196°C, and then you have ninety seconds

Ground eleven minutes before it reaches the table

Picked twice, by hand, at 1,900 metres

Twelve hours in the tank decides the acidity

Eighteen days on raised beds, raked hourly

First crack at 196°C, and then you have ninety seconds

Ground eleven minutes before it reaches the table