Scan page

Build brief for a coding agent. Rebuild this piece in the reader’s stack. If they haven’t said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don’t “improve” them.

What it is

A sheet titled Gate 4 note. Scan sends an 8px beam from the top of the sheet to the bottom in 1.1 seconds, then the line under the button reads Read · Gate 4 note · 2 lines. The note text is already visible. The beam does not hide it. This is not a skeleton that swaps to content. That swap is skeleton-to-content-swap.

Reference behaviour

1. The sheet shows the title and one sentence. The status is empty.
2. Scan sets data-scan, restarts the beam, and clears the status.
3. The beam is 8px, #1f4d3a, opacity .9, and travels top to bottom in 1.1s.
4. After 1100ms the status reads Read · Gate 4 note · 2 lines.
5. A second click restarts the beam and clears the status first.
6. Reduced motion skips the beam animation and writes the status immediately.
7. The note text never leaves the sheet.

Structure

420px
[ Gate 4 note ]
Scan
status

• The sheet is 420 by 260, padding 28px.
• The beam is absolute, left 0, right 0, height 8px.
• The button is 44px, fill #1f4d3a, text #fffdf8.
• The status is 14px, min-height 22px, aria-live polite.
• The wrap is centered.

Tokens

:root { --bg:#f6f4ef; --surface:#fff; --ink:#161513; --ink-2:#5a554c; --line:#e4dfd4; --primary:#1f4d3a; }

Typography

Role	Family	Size	Weight
Title	IBM Plex Sans	24px	600
Body	IBM Plex Sans	16px	400
Status	IBM Plex Sans	14px	400

Motion

• Beam | Scan | top 0 | top 100% | 1.1s cubic-bezier(0.2,0.7,0.2,1). Reduced motion writes the status with no beam travel.

States

• Idle: no status, beam opacity 0.
• Scanning: beam visible, status empty.
• Read: status names the note and 2 lines.
• Replay: scanning again.

Accessibility

• The status is aria-live polite.
• The button is Scan.
• The note title is a heading.
• The beam is decorative.
• Focus ring is 2px #1f4d3a, offset 3px.
• Reduced motion still reports the read.

Responsive rules

• The wrap is 420px at 1280.
• Below 460 the wrap is calc(100% - 32px). The sheet height stays 260px.
• The beam still spans the sheet width.

Acceptance checklist

Always

• The note is readable before the scan.
• The beam travels once per click.
• The status names what was read.
• A second scan restarts.
• Nothing is sent.

This demo

• The title is Gate 4 note.
• The sentence is Twelve loads held. Signed by the night desk.
• The status is Read · Gate 4 note · 2 lines.
• The beam is 8px and #1f4d3a.
• Type is IBM Plex Sans.

Implementation notes

Reset the attribute so the animation can restart.

sheet.dataset.scan = "false";
void sheet.offsetWidth;
sheet.dataset.scan = "true";

The timeout matches the 1.1s travel.

Measurements to keep

• Sheet 420×260, padding 28px, radius 2px.
• Beam height 8px. Travel 1.1s.
• Button height 44px, margin-top 16px.
• Status 14px, min-height 22px, margin-top 12px.
• Title 24px, margin-bottom 8px.

Wrong turns

• Do not hide the note behind the beam.
• Do not scan on load.
• Do not fetch a file.
• Do not leave the status up through the next scan.
• Do not loop the beam.
• Do not use a camera.

Fit with the rest of the library

• A content swap is skeleton-to-content-swap.
• A long read is paper-article-reader.
• This is one sheet and one beam.
• Do not add a file picker.
• Type is IBM Plex Sans.
• The ground is #f6f4ef.

Keyboard

• Enter starts a scan.
• The status is polite.
• The beam is not a control.
• Do not use a positive tabindex.
• Focus stays on Scan.
• Reduced motion skips the travel.
• There is one button.
• The note is a heading plus a paragraph.
• A second Enter restarts.
• Focus offset is 3px.
• Type is IBM Plex Sans.
• No file input.
• Escape does nothing.
• The timeout is 1100ms, or 0 when reduced.
• The sheet clips the beam.
• Nothing is fetched.

Rebuild order

1. Build step: The sheet shows the title and one sentence. The status is empty.
2. Build step: Scan sets data-scan, restarts the beam, and clears the status.
3. Build step: The beam is 8px, #1f4d3a, opacity .9, and travels top to bottom in 1.1s.
4. Build step: After 1100ms the status reads Read · Gate 4 note · 2 lines.
5. Build step: A second click restarts the beam and clears the status first.
6. Build step: Reduced motion skips the beam animation and writes the status immediately.
7. Build step: The note text never leaves the sheet.

• Keep this measurement while rebuilding: Sheet 420×260, padding 28px, radius 2px.

• Keep this measurement while rebuilding: Beam height 8px. Travel 1.1s.

• Keep this measurement while rebuilding: Button height 44px, margin-top 16px.

• Keep this measurement while rebuilding: Status 14px, min-height 22px, margin-top 12px.

• Keep this measurement while rebuilding: Title 24px, margin-bottom 8px.

• While rebuilding, remember: Do not hide the note behind the beam.

• While rebuilding, remember: Do not scan on load.

• While rebuilding, remember: Do not fetch a file.

• While rebuilding, remember: Do not leave the status up through the next scan.

• While rebuilding, remember: Do not loop the beam.

• While rebuilding, remember: Do not use a camera.