Make a printed 5×5 in Chatbooks photo book from a project's collection (clips, albums, photos): catalogue with permanent IDs, lab and pick tools, spread-first layout, QR short links, 300 dpi export with bleed for Chatbooks' trim.
83 screenshotsAgents: SKILL.mdPrint this page for a paper copy.
Why printed books
I'm a big fan of printed things: something you can hold, touch, flip through, stare at, and come back to, to reflect on or simply admire the work. These are personal projects, and I wanted them to have a physical form I can keep in my real space, not just a URL.
So I took a Chatbooks subscription (a monthly photo-book plan), and set out to give the projects I build through vibe coding and agent coding, with Claude, ChatGPT, Grok and Gemini, a printed counterpart. I composed the first book by hand. Over time the work moved into tools: ChatGPT helped make HTML book previews, and each book taught us something about trim, spreads, QR codes and how to review before printing. This page collects those learnings, and the same text works as a skill that agents follow.
Related book projects
JRB20's Sora Sketchbook: the editorial portfolio behind Act JRB20, with alternate narrative editions and square HTML book proofs.
Book Preview: a flip-book viewer for photo books (gallery view, page curl, QR share), with Music Cards, Room Sale and Tree Stories.
Apple Books Print Cards: printable QR cards for owned Apple Books, including exports sized for Chatbooks.
Every Frame (4 volumes of Sora frames) and All I Need Music (234 soundtracks): the two books this playbook was learned on.
Before this playbook (v0.5, with ChatGPT)
The method on this page didn't start here. For a month before it, ChatGPT and I tried to turn the Sora archive, 2,719 generated clips, into something readable. The goal was never only a photo book: the same body of work was published and prototyped in several forms, each asking a different question. An editorial site asked what is the story; web readers asked what should be compared and in what order; a 5 × 5 proof asked what survives a page turn; cards and books asked what deserves to become physical. They are related forms of one publishing practice, not competing outcomes.
Date
Form
What it taught us
27 Aug
Sora to Print
A browser editor for square 1,500 px Chatbooks cards (title, short copy, QR code, safe area). Real pages, assembled one at a time.
A flip-book proof of spreads with a page map for swaps: back to the scale of a Chatbooks upload.
Left to right: a hand-made Chatbooks page (3 Sep), a v1 preview image and a v2 still (20 Sep), the v3 contact sheet used to review The Nearby Wild (22 Sep), and a page from the 5 × 5 proof reader (23 Sep).
What didn't work, honestly. The early print work produced real pages and taught the constraints (safe areas, page order, the gap between an attractive square on screen and a readable printed page), but the Sora Sketchbook never resolved into one finished printed edition. The archive was too broad, the first cuts too category-led, and even the best web reader still needed another round of selection and page-level composition. A 60-page plan (v2) is not an edited 60-page book; "logical pages" (v3) are not printer pages; and no sorter or manifest replaced looking at the images together.
How the books resolved it. Every Frame answered the broad archive the other way round: no editorial cut at all, every frame in date order, with permanent clip IDs and a way back to each video. All I Need Music applied the same system to a smaller, curated collection. The editorial readers remain what they were good at: telling a story on screen.
Every Frame, volumes 1–4: "Sora is my sketchbook", Oct 2025 – Mar 2026. Each cover is the volume's first frame, with a QR that plays that clip.
Vol 1 · the cover page: the first frame, the title and a QR to play the clip.
Vol 1 · pages 2–3: 12 × 7 frames per page, edge to edge, in date order, each numbered with its permanent clip ID.
Vol 1 · pages 16–17: a run of forest studies. Date order lets themes show up as colour bands.
Vol 2 · pages 30–31.
Vol 3 · pages 14–15.
Vol 4 · pages 40–41.
Vol 1 · pages 59–60: the last grid and the index, which maps clip numbers to pages.
Vol 4 · pages 59–60: the closing index.
1 / 8Flip through Every Frame: opening, grid spreads and the closing index
What carried forward into the rules below:
Proof at print size before export; page order is an editorial decision.
Separate picking from layout, and keep stable IDs so any image can be swapped.
Read in spreads, with deliberate single pages at the start and end.
A few strong images, pairs and grids beat pages of near-duplicates.
Keep source details backstage; write reader-facing text plainly.
Test every size, trim and page-count claim in Chatbooks' own preview.
How this playbook came about
How we make 5 × 5 in Chatbooks from our own collections, learned on two books in Sep 2026:
Every Frame (Sora clips, 4 volumes): /Users/briji/x sora jrb20 backup/sora video gallery/book/ (scripts/mosaic.mjs)
All I Need Music (234 albums, 1 volume): /Users/briji/vibe-coding/pet-projects/all-in-need-music/book/ (build_sample.mjs)
Both books are HTML pages rendered to PNG with Playwright. Content lives in data files, and layout lives in one script plus one stylesheet.
1. Chatbooks facts (measured, not guessed)
Chatbooks' own preview of an Every Frame page: the outer clip numbers (e.g. the "1" in the top-left corner) are cut, because Chatbooks trims about 2.9 mm per side.Chatbooks lays its own vertical date tab over the cover's left edge; the owner's screenshot showed it touching the title, so cover text moved to 88 px from the left.
Fact
Value
What we do about it
Book size
5 × 5 in, 60 images max per book
Plan every book as exactly 60 images
Image 1 and image 60
Single pages (right, then left); everything between pairs into spreads 2–3 … 58–59
Design images 2–59 as spreads; use 1 and 60 for single-page content (intro, back)
Edge trim
Keeps the central ~95.5%: about 34 px of 1500 (0.11 in, 2.9 mm) per side, even on all sides, zoom-to-fill
Add bleed, and keep all text ≥ 24 CSS px (0.25 in) inside the trim
Cover / first-page tab
Chatbooks lays its own vertical date tab over the left edge, about 44 CSS px wide
Keep cover text ≥ 88 CSS px from the left; right-hand vertical titles read bottom-to-top, matching the tab
How we measured the trim: fit the Chatbooks preview screenshot against our own PNG (best crop match: 95.5%, ±6 px). Redo this with a calibration page if a new product or size is used.
2. Page and file spec
Bleed study: the same page as Chatbooks shows it, without (left) and with (right) a 0.125 in bleed. With bleed, the corner clip number and the page tab survive.
Build each page at 480 × 480 CSS px (5 in at 96/in). A spread is 960 × 480.
Bleed: pad every edge by 36 px by repeating the edge pixels, giving 1572 × 1572 px. (Music book: add_bleed.py.) For true full-bleed art, build the extra area in HTML instead (Every Frame bleed study: book/review/bleed-study/).
Output: a single-page PNG per image, named 01.png … 60.png in upload order, plus hardcover.png if needed. No spread PNGs; Chatbooks takes pages.
Keep print files inside the project folder (e.g. project/book/print/) and list them as never-deploy in DEPLOY.md.
Each revision gets its own print folder (print-arr-rev1.0/, then rev2.0/). Never overwrite files that went to print.
Restamp before every upload. Chatbooks orders pages by file timestamp, not filename. A one-off re-export (say page 36) gets the newest time and jumps to the end of the book. As the last step, set the modified and created times in page order (hardcover, 01 … 60, 3 seconds apart), print the time-sorted list to check, then upload the whole folder fresh.
3. Workflow that worked
The layout lab for Every Frame: presets and column/row/gap/margin sliders over real frames, with live page, book and sharpness numbers. The owner picked 12 × 7, edge to edge, from this screen.The scrub tool: tap a frame to cross it out, tap a numbered frame to drop the whole clip. Picks save to the artifact's database; the counter shows pages left to fit 4 books.Every Frame, volume 1 sample: cover, index, grid spreads and closing spread, reviewed as spreads before any export.
Catalogue first. Give every item a permanent ID (Sora #0001–#2719 by date; music H-### / T-###). IDs get printed, so never renumber after printing. If the source must change, remap old → new IDs and spot-check.
Lab before layout. Build a tiny interactive lab (grid density, columns × rows, margins, trim %) with real images, and let the owner pick settings visually. Report the page and book count live.
Scrub or pick in an artifact with a database. Tap-to-cross-out (Every Frame scrub) or tap-to-pick (music feature picker). Picks save to the artifact's database and Claude reads them back, so no JSON goes back and forth. Show a live count against the target (e.g. "fits in 4 books", "54 / 54").
Sample first, then the whole book. Build 3–4 varied spreads, get feedback, then build all 60.
Preview as HTML on the home network (python3 -m http.server <port> --bind 0.0.0.0, then http://<mac-ip>:<port>/…). Show spreads as the printed book opens: image 1 alone on the right, pairs, image 60 alone on the left.
Export only after explicit approval. Re-export only the pages that changed.
Upload a few pages to Chatbooks and check its preview before ordering. Screenshots of the preview are the final truth.
4. Design system that held up
The music app's timeline view (Hindi above, Tamil below) that the owner wanted in the book; it became the 3-spread timeline with an orange spine across the fold.The owner's sketch over a draft cover: title and date in the top half, one image across the bottom, index moved off the cover.Index feedback: keep the H/T letter, the dash and the digits in their own lanes, and put the page number next to the name.The finished music book in Chatbooks' preview: feature spread with equal columns, the era line with page numbers at the outer edges, nothing lost to the trim.
Think in spreads, not pages. Timelines, era threads, index balance and headings are designed across 10 × 5 in, with a gap at the fold so nothing sits in the binding.
Captions, always in the same order:year · ID / title / composer or artist (+ tracklist on feature pages).
Mix densities: feature spreads (6 per spread, tall columns with tracklist and QR) plus dense spreads (12 per spread). Chronological order throughout; popularity or the owner's picks decide who gets a feature slot.
Grids: equal columns (dividers drawn in the gutter, not as padding) so covers line up exactly; one fixed QR size (flex:none); object-fit: cover squares.
Page numbers: the outer bottom corner. Every Frame used a black tab running to the outer edge; the music book puts the number at the end of an era line, with the years on its marker.
Index: alphabetical, dense, at the back. Row = name ····· page H-012, with the ID in fixed lanes (letter / dash / digits) and dotted leaders instead of row rules. Show the year for same-title rows.
Fonts: Newsreader (serif) + Work Sans (sans), stored locally. Type ≥ 6 pt for anything read in print.
5. QR codes and short links
Two ways to aim a QR code. Choose per book: — Our own short link (v1 music book, Sora books): the target can change without reprinting, but the book depends on our site staying up. — Straight to YouTube Music (A.R. Rahman book): playback works even if our site is gone. Use the official album playlist link (music.youtube.com/playlist?list=OLAK5uy_…), and an official YouTube jukebox when the album isn't on YouTube Music. Print the album ID beside it so it can still be looked up. A long URL makes a dense code, so give it about 0.6 in or more. — Sora gallery: briji-projects.pages.dev/?video=123, /v/123, finder at /v — All I Need Music: all-i-need-music.pages.dev/?album=T-053, /a/T-053, lookup at /a
Claim the URL early (a live shell page) so the printed format is fixed before print.
On Cloudflare Pages, _redirectscan't put placeholders into a query string. Use a 200 rewrite to a page that reads the path.
Each book's first and last pages carry a "find any item" QR code; the last page adds a pet-projects QR code for updates.
Deploys follow AGENTS.md / DEPLOY.md: explicit approval, a log row, AGENT-LOG.md, and the checkmarked report.
6. Mistakes to avoid (each one cost us a round)
Exporting before the owner approved the HTML, and exporting spreads nobody asked for.
Designing single pages when the reader sees spreads.
Letting a build script delete a whole output folder (it wiped exported PNGs). Only replace generated HTML.
Squares that aren't equal because of padding; QR codes shrinking next to long titles.
Vertical cover text too close to the edge (4 px) and shifted the wrong way: read the page the way the reader holds it.
New folders scattered around. Keep one project folder (project/book/, with print/ inside).
Popularity by raw views skews (Hindi over Tamil, kids'-channel uploads). Balance by share and let the owner pick.
Trusting crawled metadata. The A.R. Rahman audit found Hindi and Telugu dubs linked as originals, a "Jhankar" remix album, a different film with the same title (Fire), and soundtracks that were mostly other artists (Blinded by the Light, 127 Hours). Check every album's songs and language against the source (Wikipedia plus listening) before layout.
Faking bold: asking for weight 800 from a font that stops at 600 makes the browser smear it. Load the real weight or stay within the range.
Tall timeline spikes. Cap stack height and split a busy year over extra columns (5 → 3 + 2).
Stitching book data from three files. When the collection gets a single source (arr/albums.json), build from that only.
Personal names on public web pages. The print edition keeps the personal note heading and full credits; the web edition drops the name automatically (screenshots on public pages too).
7. Credits line (used on the intro and last page of the music book)
Curated by <agent> · Composed by <agent> · Steered by <owner> · <date>, set as small labelled blocks, centred. (Printed books only. Public web pages follow the public-attribution policy.)
8. Second book in the series: A.R. Rahman, The Complete Song Collection (Oct 2026)
Hardcover (album grid with the title running up a dark band) and the opening note page.
A whole-career book: 152 film soundtracks, 1,121 songs, 1992–2025, built on the same design system as the music book in about a day of back and forth. Grokbot gathered and verified the data; Claude composed the book; the owner steered.
Scope and math first. The book only works if the count fits 60 images, so every layout change started with the math:
Fixed pages: note (1), timeline (2 spreads), index (2 pages), back (1).
The rest: album spreads at 6 per spread (3 tall columns per page).
147 → 156 → 152 albums each changed the plan: 3 timeline spreads became 2, and when a spread ended half-empty, the spare page became a "My favourite A.R. Rahman songs" notes page with writing lines.
Collecting with a second agent.
Short, copy-paste prompts for Grokbot: what to collect, the ID rules, "flag, don't invent", and "don't touch the master files until the owner approves".
A staging folder (additions/arr/) and one source-of-truth file that both agents append to.
Claude audited every delivery: duplicates of albums already owned (blank composer fields), a list rebuilt from Wikipedia instead of the owner's, dubs, remixes and a wrong film.
Split the work by files: the site and data belong to the collecting agent; the book folder belongs to the composing agent.
IDs. The collection moved to plain numbers (Roja = 115), with the old T-036 kept as an alias so the printed v1 QR codes keep working. The new book prints the plain number.
The hardcover band, four rounds: "Complete Works" → "The Complete Song Collection" over three lines → two lines with "rev 1.0" → the final, centred block.
Title.
"All I Need" didn't fit a complete catalogue, and "Complete Works" over-claimed, so it became "A.R. Rahman: The Complete Song Collection" with "1992–2025 · 1,121 songs from 152 films".
Two lines only: one bold title line and one line with dots.
The edition is "rev 1.0 / Oct 2026", a tiny grey printer's mark instead of "Volume 1".
On the band, the title block is measured to be centred (35 px each side). The small rev mark sits apart, at the far end, lined up with line 2.
Timeline, four rounds (first spread of each): 3 orange spreads with small stacks → 2 spreads with tall spikes → stacks capped at 3 + 4 on a grey spine → final: covers fill the safe area and run continuously across the fold.
Timeline rules that came out of it.
Hindi and other languages above the spine, Tamil below. The spine is a dark grey that blends into the black page, not an accent colour.
The build searches for the biggest cover size that still fits 2 spreads with stacks of at most 4. A busy year is split evenly over extra columns.
Spare columns are shared out between years, so the strip fills the spread with no empty ends.
Continuity across the fold: columns run to 16 px from the fold on both pages, so the spread reads as one strip.
Covers run into the margin as far as the trim allows (22 px from the outer edge). Text stays inside the safe line.
Years are sorted numerically, because release-date order once put '10 before '09.
An album spread: cover, year and language, title, director, up to 11 songs, then one QR code straight to YouTube Music with the plain album number beside it.The notes page created by the half-empty last spread, and the back page: three equal QR codes (this collection, All I Need Music, Pet Projects) with "Rev 1 / Oct 2026" in the credits (web edition shown; the print edition carries the full credits).
Colour. Teal replaced v1's orange for the accents. It reads well on black and on paper, and gives the second book its own identity.
Chatbooks crop simulation on the exported 1572 px PNGs: cover, note, both timeline pages, first and last album spreads, notes, index and back. Nothing important is lost.
Export.
61 PNGs (hardcover + 01–60) at 1572 px with bleed, in a new folder per revision.
A crop simulation of key pages before upload.
Single-page fixes re-export only that page, then restamp all timestamps before uploading (see §2).
Seven editions from one build
All seven editions of the A.R. Rahman book side by side, at true relative size: 5 × 5 (printed), 5 × 7, 7 × 5, 5 × 7 liner cards, then 8 × 8, 8 × 8 record sleeves and 8 × 8 mixed.
The printed book is 5 × 5 in. The same data and design system then became six more editions, each asking what a different page size does to the same 152 albums:
Edition
What changes
Open it
5 × 5 (printed)
3 album columns per page; timeline on a spine, Hindi above, Tamil below
8 × 8 mixed: a feature spread for Roja, with the story of the album. Open ↗
8 × 8 mixed: a dense spread of album cards. Open ↗
1 / 16Flip through: two or three distinct spreads per edition, shown to scale (1 in = 80 px)
What the sizes taught us.
Show sizes to scale when comparing. On screen every edition fills the window, so a 5 × 5 and an 8 × 8 look the same. Drawn at one scale, the difference in reading distance and type size is obvious.
Don't scale a layout, re-set it. 8 × 8 scaled from 5 × 5 works for paper pages, but album pages needed more songs per album and larger type (zAlb, zPaper in build_arr.mjs).
Portrait and landscape change the timeline, not just the page: a vertical snake for 5 × 7, a horizontal road for 7 × 5.
The page count moves with the layout: 60 pages at 5 × 5, 86 at 5 × 7, 48 at 7 × 5, 160 for one-album-per-page sleeves. Check the 60-image Chatbooks limit before choosing a format to print.
The digital edition: the same pages in a spread viewer with side arrows, a page scrubber and tap-to-play QR codes.
Book preview: the digital edition
One source, two outputs: the same HTML pages become a web book at /arr/book/rev-1.0/, frozen per revision (/arr/book/ points to the latest). Print and web come from one build script (build_arr.mjs, with --web for the web copy).
A viewer per size, with buttons at the top to switch between them, plus a gallery of all editions at rev-1.0/. Covers are reduced to 400 px, and QR codes are tappable. It has side arrows, a scrubber, keyboard and swipe.
Deep links to a page: the address shows the page you are on and updates as you flip, e.g. 7x5/#page=5 opens the spread with page 5. Use #page=cover for the hardcover. — Page numbers belong to each edition: page 5 of the 7 × 5 is not page 5 of the 5 × 5. — So when you switch size, the viewer keeps your relative position (about halfway stays about halfway) and then shows that edition's page number. — Old links with #at=0.5 (a fraction of the book) still work.
Same passcode as the collection, plus "don't index".
For the next revision (rev 2).
A QR in the printed book that opens its digital edition. We noticed only after sending rev 1 to print; for now, a link on /arr bridges it.
Fix the Thug Life cover (it shows the Telugu edition).
Decide on Alli Arjuna.
9. Music cards – pilot (6 × 4 in fold cards, Oct 2026)
The printed books hold many albums per page. The cards try the opposite: one album per card, printed as an ordinary 6 × 4 in photo print and folded in half into a tiny record sleeve. The back holds the songs, credits and a YouTube Music QR; the front holds the album art, the title and the album number with a QR to its page. All three agents made a version from the same brief, which made it a good way to compare approaches.
Lagaan as a fold card by ChatGPT (Cardsmith, five layouts), Grok (three directions with generated artwork) and Claude (five layouts, then the two chosen for print).
ChatGPT · Cardsmith · immersive artists
ChatGPT · Cardsmith · poster detail
ChatGPT · Cardsmith · sleeve airy
ChatGPT · Cardsmith · editorial artists
ChatGPT · Cardsmith · immersive detail
Grok · direction a: generated artwork, cream back
Grok · direction b: dark back, artwork front
Grok · direction c: one painting across the fold
Claude · liner notes
Claude · poster
Claude · night record
Claude · spotlight
Claude · index card
Claude · rev 2 night record: the record takes the album's colour, numbered tracks, "Album 25" by the QR
Claude · rev 2 poster light: an inset cover on paper, so nothing at the top edge gets cut
1 / 15Flip through: the same album, every layout
How it went.
Brief: three directions, original artwork allowed, real album data, print specs, a naming rule (6x4_<agent>_<layout>_<album-id>_<slug>_v01.png), and "don't pick the final direction".
Explorations: each direction with original generated artwork and with the real album art. The real art won: people recognise an album by its cover.
A set of 20 (10 Ilaiyaraaja, 10 A.R. Rahman) in five layouts, reviewed as an HTML page on a neutral grey table (a black page hides the edges of dark cards).
Printed and scanned at a Walgreens photo counter, which gave the trim measurement below.
Rev 2: two favourites, Night record and Poster Light, with fixes from the print: round record grooves, numbered tracks, the record tinted with the album's own colour, "Album N" by the QR, and Poster Light's cover inset so the top 1.5 mm cut doesn't clip lettering.
The print run: one card per album with a random but balanced layout, skipping albums already printed by ChatGPT or Claude and any the owner marked "don't export". 254 cards at 600 ppi, with the measured trim compensated, plus a tally PDF of what was not printed.
Claude's early explorations for Roja: three directions, each with original generated artwork (top) and the real album art (bottom).The first 48 of the 254-card print run: Night record and Poster Light, alternating by a seeded random choice.
What we learned from the cards.
Skips must be album-level, not per layout. The review page first let you skip a layout of an album, which meant skipped albums still printed in the other layout.
Check for duplicates by content, not only by title. The same film appears under different names in different languages (Roja Hindi and Tamil, Yuva / Aayitha Ezhuthu, Raavan / Raavanan). They look unique in the data. A link between language versions belongs in the data itself.
Metadata gaps show up on a card first. Missing singers or a "?" in a name is easy to miss in a list and obvious on a printed card, so the gaps went back to Grok as a "P0 – metadata consistency" request.
Fold in half, no marks needed. Even with the uneven trim, the fold's centre moved only about 0.6 mm.
Walgreens 6 × 4 in trim, measured
Source PNG with the measured print window (red) next to a scan of the actual Walgreens print: the trim is small and slightly heavier on the left and top.
How it was measured: scan the print, crop to the card, then slide the source PNG over the scan at small scale steps and keep the scale and offset with the highest correlation. The card edges mapped back to source pixels give the trim on each side. Two cards agreed to within ±5 px.
Album fold cards printed as standard 4 × 6 photo prints at a Walgreens store (S Mary Ave, Sunnyvale, CA), Oct 2026. Measured by aligning the source PNG to a scan of the print (two cards, correlation 0.94):
Gentler than Chatbooks (95.5 % kept), but not centred: more is cut on the left and top. The fold's centre shifts only about 0.6 mm, so "fold in half" still works with no guide lines.
Rule: keep text, QR codes and logos at least 40–45 px (0.13–0.15 in) inside every edge at 300 ppi. Backgrounds should run to the edge (no white borders, which would show the uneven trim).
Full-bleed photos lose their top 1.5 mm, so logos and lettering at the very top of an album cover get clipped. Inset the cover from the top edge, or shift it down by the safe margin.
Export at 300 ppi (1800 × 1200) or 600 ppi (3600 × 2400) for crisper type; Walgreens accepted both.
10. Fav Songs Listening Guide: immersive 8 × 8 and 5 × 5 books (Oct 2026, in progress)
The music books list albums. This one is about songs: a lyric-led 8 × 8 in book where each spread feels like opening a 12-inch record sleeve. A still from the song's own video sets the mood, and the lyric, singers and a play QR sit on top of it. It is being explored as four books (Tamil, Hindi, Ilaiyaraaja, A.R. Rahman), each with about 40 spreads, then a v2 of each in 8 × 8 and 5 × 5. Lyrics are placeholder text for now; song, album and credit data are real.
Title page: "Fav Songs Listening Guide", with an endpaper on the left.
Scene grid → focus: an album as a contact sheet of its songs, then one frame full bleed with the lyric.
Album insert: liner notes written only from catalogue facts, credits, and a track list with runtimes and singers.
Lyric sheet: two columns labelled the way the songs are built (pallavi, anupallavi, charanam; mukhda and antara for Hindi).
Callouts: facts computed from the data, e.g. track position and how many songs a singer has in the guide.
Duotone poster: the frame in two inks, the title stacked large.
Letterbox: the film's black bars kept on purpose, the lyric set as a subtitle.
Cinema ticket on a white page, with the play QR on the stub.
Polaroids on linen, taped down.
Gatefold: one frame across both pages, the subject moved off the fold.
Big record with a tonearm, the album art as the label.
Radio dial tuned to the song's year.
Contact sheet with grease-pencil marks.
Cover poster: for songs with no usable video, the album art carries the spread.
Cassette J-card and tape, for the Ilaiyaraaja era.
The printer test page (calibration spread).
About this book: how it was made, and the books composed so far.
1 / 17Flip through: spreads from the v2 books (8 × 8 unless noted)
From idea to four books.
A layout lab first (lab): 20 spread types on 25 songs, each shown as two facing pages with a fold shadow and safe-area guides. Reviewing a whole vocabulary of layouts at once made it easy to see which ones felt like a record sleeve.
Then four books (v1): about 45 layout types, dark and white, assigned so that no layout repeats within 8 spreads and the tones alternate. Overlay graphics (tape, grease pencil, viewfinder marks, waveforms, record grooves) can be switched off for the whole book or per spread.
Then v2 (v2): each book in 8 × 8 and 5 × 5, with new text pages: title page, album inserts, lyric sheets, callouts, end credits, a printer test page and an about page.
How frames were chosen: an audio-only upload shows one poster throughout (skipped); a lyric video has text in its frames (skipped, and its third frame never fetched); a real song video gives clean scenes (kept, then checked by eye).
Finding mood frames without downloading video. YouTube keeps three stills from inside every video (maxres1–3, 1280 × 720), separate from the thumbnail.
For 2,322 song videos we fetched frames 1 and 2 first.
If both were the same, it was an audio-only upload with a static poster: 1,306 videos, skipped.
A text check removed lyric videos and title cards.
Only clean videos got their third frame.
Every frame actually used was then checked by eye on numbered contact sheets: the text check (Tesseract) reads English only, so Tamil and Hindi titles got through. The rule: if one frame of a video has burned-in text or a mid-frame watermark, the whole video goes.
About 575 videos survived. The Ilaiyaraaja book is thin on frames because most of his songs on YouTube are audio-only uploads, so it leans on album art: cassettes, sleeves, records and cover posters.
These stills are for prototyping layouts and mood. They are too soft to print full page; print-quality frames come from Grok's crawler.
The same album insert at 8 × 8 and 5 × 5, to scale. 5 × 5 is re-set rather than shrunk: fewer grid cells and lines, and no text under about 6.5 pt.
The printer test page. Every v2 book ends with a calibration spread, to be printed once per size:
Rulers in inches.
Trim ladders: numbers along the top and bottom edges, ½ mm apart. The first one you can read in full tells you how much was cut.
The safe area (¼ in), the measured 5 × 5 trim (2.9 mm), crop marks and a hatched fold band.
A 12-column grid, and circles that should stay round.
A grey ramp, colour patches including the book's accent, line weights from 0.25 to 2 pt, and type from 5 to 14 pt in English, Tamil and Hindi.
The 8 × 8 trim has not been measured yet; this page is how we will measure it.
Editing before export: asset labels name every image file, and the text toolbar sits above the selected lyric.
Editing and swapping before export. A local server (node edit-server.mjs) turns the books into a light editor:
Swap images by file name. Every image lives in one assets/ folder with an album-based name: 115_04_2.jpg is Roja, track 4, frame 2, and 115_cover.jpg is its cover. — An "Asset labels" toggle tags each image with its name. Hovering shows the album, song and the spreads that use it. — Replace the file and reload. Rebuilds never overwrite a file that is already there.
Edit text in place. An "Edit text" toggle lets you retype titles, lyrics, liner notes and track names, with buttons for size, 1–3 columns, alignment, hide and reset. — Edits save to edits.json (per book and size), keyed to each spread's content, so they survive rebuilds. — "Save version" snapshots the file so you can go back. The HTML is regenerated on every build, so the edits file and the assets folder are what to keep.
Export:node export-v2.mjs writes one PNG per page at 600 dpi with the 0.12 in edge-repeated bleed from the 5 × 5 books (8 × 8 → 4944 px, 5 × 5 → 3144 px). It applies the current edits and hides the editor and preview guides.
What we learned.
Build a layout vocabulary before a book. Twenty layouts on one page showed more than any single "final" proposal would.
White spreads need their own rules. Song details placed on a photo inside a light spread inherit dark text; the fix is to set text colour by what's behind it, not by the spread's tone.
Full-spread frames put faces in the fold. Subjects are usually centred in a video frame, so frames that cross both pages are shifted to put the subject on one page.
Compute facts, don't invent them. Liner notes and callouts are assembled only from catalogue fields (year, director, cast, label, runtimes, singers), so every sentence can be traced back to the data.
Match albums by title, year and language. Two Rojas (1992, Hindi and Tamil) and two Ghajinis (2005 Tamil, 2008 Hindi) were being merged until the match used all three.