# Scan scrolling

Scroll a page once and get its scroll experience as a storyboard, scene by scene, with six frames each and what moved in words, saved as one PDF to hand to an AI coding agent or a person.

Scan scrolling turns how a page behaves as you scroll into a storyboard: the page cut into
scenes, each with six frames from where it starts to where it ends, what moved in it said in
sentences, and how it feels when the scroll stops. Use it to show an AI coding agent, or a
designer, a page whose sections pin, fade and slide as it scrolls, without recording a video. It
is a preview: the popup marks it with a green dot until you first use it.

1. **Open the page** at the top and click the Page Scanner icon.
2. **Press Scan scrolling**, under **Record steps**. The popup closes, Chrome's debugging bar
   comes up over the page, and the page scrolls down by itself at a steady pace. The Page
   Scanner icon shows how far down it has come.
3. **Leave the page alone** while it scrolls. Scrolling, clicking or typing on it stops the scan.
4. **The storyboard opens** in a tab beside the page when the scan reaches the end, and the page
   goes back to where it was.

To stop early, click the Page Scanner icon and press **Stop and open the storyboard**: what was
scanned so far opens, marked as stopped short. A scan also stops after two minutes, if you press
**Cancel** on the debugging bar, open DevTools on the page or close the tab.

An agent can ask for a storyboard too, with
[`page-scanner storyboard`](https://docs.pagescanner.app/cli/commands#a-pages-scroll-as-a-storyboard) or the MCP server's
[`storyboard_page`](https://docs.pagescanner.app/mcp/tools#storyboard_page), and gets the PDF, what was measured as JSON and
the frames as files, without opening the editor. While an agent's scan runs, the popup shows how
far it has come and **Stop the scan**, which ends it and hands the agent what was scanned.

## Read the storyboard

The storyboard is a board of the scenes, a row each, top to bottom. A row says the scene's number
and title, whether the page held still there (**Pinned**), moved things as it scrolled
(**Scrolls, things move**) or just scrolled (**Plain scroll**), how many screens it lasts, and how
it feels: **Stops with the scroll**, **Glides** for a moment after you stop, or **Loops on its
own**. Its six frames show it from entry to exit.

Press a row to pick that scene; the **Scenes** panel on the right shows it:

- **What happens**: what moved, measured ("The 4 words or lines of "SPACE MISSIONS MADE
  SIMPLE" move up 113px over 0.8 screens of scroll, one after another"). Take a line out with its ×, and bring
  the scene's lines back with **Put back**. A line cannot be reworded, so what the agent reads is
  what was measured.
- **Note for the agent**: anything you want to add, in your own words. It is kept apart from the
  measurements.
- **Text on screen**: the words that were on screen in the middle of the scene.
- **Leave it out of the PDF** fades the scene on the board, for a stretch the agent does not need.

The up and down arrows beside "Scene 3 of 8" move through the scenes. The board pans and zooms
as the editor's stage does; **Fit** in the zoom shows all of it.

## Play it back

The player at the bottom of the board goes back a scene, plays, and goes on a scene; its track
has a mark at each scene's start, and it says which scene it is in. Press **Play** (or `Space`)
and the flipbook opens over the board and plays the scroll at the pace it was scanned. Scroll
over the flipbook, or drag the track, to move through it by hand; `←` and `→` step one frame,
and `↑` and `↓` one scene. **Play in the flipbook** in the Scenes panel, the button at the
player's right, or `F` open it without playing, and `Esc` closes it.

The board and the player follow each other: pick a row and the player jumps to that scene, play
into the next scene and its row is picked.

**Use this frame** puts the frame you are looking at into the scene's strip, in the cell nearest
it (the strip's six cells are the scene's start, every fifth of the way, and its end). Use it
when the scan's own pick missed the moment that matters. The Scenes panel says how many frames
you chose, and **Put back the scan's** undoes them. A plain scroll has no strip, so the button is
off there.

## Mark the frames

The toolbar is the editor's, without the crop: rectangles, ellipses, lines and arrows, the
highlighter, text, step numbers, emoji, blur and redact, with the same letters
([Shortcuts](https://docs.pagescanner.app/extension/shortcuts)). Draw over the frames to point at what matters, or redact
something that should not be shared. `⌘/Ctrl` + `Z` undoes a mark, and `Esc` puts Select back
in hand.

## Save it as a PDF

Press **Extract** at the right of the toolbar (or `⌘/Ctrl` + `P`). The PDF is the file to hand an
AI coding agent: its first page is an overview of the page (its address, the window size, how
long it is, how it feels, and every scene in a line), and then each scene that moves has a page
of its own, with its six frames in two rows of three, what happens in it, how it feels, your note,
the words you wrote on its frames, and the text that was on screen. Everything said is text the
agent can read, kept apart from what you added: your note is under "Note (from the person who
scanned it)", and words written with the text tool are under "Written on the frames", with the
frame each was on.

Your marks are drawn into the frames, at the same place in each frame they cover on the board;
a redaction is black in the picture itself, so what it hides is not in the file. Scenes you left
out are not in the file. It is named after the page and the day, for example
`space-service-storyboard-2026-10-23.pdf`.

## Keeping it

A storyboard is kept for as long as its tab is open. Your changes (the marks, the notes, the lines
taken out, the scenes left out, the frames you chose) survive a reload of the tab, and Chrome asks
before you close a tab with changes you have not extracted, since closing it deletes the
storyboard. Extract it to keep it.

## Limits

- It scrolls the page itself, not a panel that scrolls on its own inside it, so an app whose
  content scrolls in a box shows as one screen that holds.
- A scan takes at most two minutes, which is about a hundred screens.
- The frames are at most 720 px wide, so small text in them is soft. A video or a canvas drawn by
  script is pictures only.
- The flipbook has the frames the scan kept, six to eight a second, so an animation faster than
  that shows as a few pictures.
- An animation that only starts on a real wheel or touch, not on a scroll, does not play.
- Cookie banners are not cleared first, so a banner is in the frames.
- The debugging bar stays up while it scans. See [the bar during a scan](https://docs.pagescanner.app/extension/debugger).