Homepage: two-sided pitch (learners, teachers), readings on one screen, smooth hero video

[EliezerIsrael]

Summary

Follow-up to #10, which merged before this commit landed.

• Hero leads with the learner value: "The pull of video, at the learner's pace."
• For learners: engaging like video but paced like reading; every branch is a complete lesson; you can't get lost (breadcrumb, pinned text, Back).
• For teachers: "The teacher brings the Torah. We make it compelling." AI builds the readings in minutes (about half an hour for Nechama's dense material), the teacher's words stay intact (Bereshit's quotes are verbatim and cited), and teachers reach students in a new medium.
• The readings become compact tiles tagged by what each one shows (per-reading tag in index.json: Branching paths, One Year, Straight, From a source sheet, One Midrash, Pirkei Avot, Talmud). There are eight now, with Noach and The Sinai Opt-In from main, in a 4-column grid that fits one desktop screen (checked at 1440×900 and 1280×800). Every "shows" line is shortened, including those two.
• Smoother hero video: scripts/record_hero.py now renders frame by frame with a steady, wheel-like scroll instead of screen-recording in real time, which dropped frames and juddered. The page's CSS and GSAP animations are slowed to match capture, so highlights and manuscript zooms still play at normal speed.

Copy to check

• "Readings like these used to need a designer and a developer for every highlight, transition and branch" is a framing claim, not something the repo backs. Edit it if you'd rather not make it.

Test plan

• tests/test_data.py and the homepage render test pass
• Checked by hand: the readings fit one screen at 1440×900 and 1280×800; no horizontal scroll at 390px
• Video checked frame by frame: scrolling is even and the zooms animate

🤖 Generated with Claude Code

[gitvelocity-reviewer]

📊 Code Quality Score: 37/100

Base 37 (S11 + A5 + I11 + R5 + Q4 + P1) x ESF 1.0 (831 effective lines, Extra Large; 8 files, Small tier, no breadth bump) = 37

Category	Score	Factors
🔭 Scope	11/20	Eight counted files in three groups: the homepage (js/home.js, css/close-read.css, index.html, data/index.json), the recorder scripts/record_hero.py with three regenerated files in assets/hero/, and the agent documentation (.agents/skills/close-read-sheet/SKILL.md, .agents/skills/nechama-parsha/SKILL.md, AGENTS.md). The engine in js/engine.js is not touched.
🏗️ Architecture	5/20	js/home.js drops the per-category sections and the HOME_PROOF block. HOME_CATEGORIES becomes a tag lookup, and renderReadings sorts all sheets into one .home-card-grid. record_hero.py replaces the free functions glide_to and choose and the in-page CURSOR_JS and GLIDE_JS with a Recorder class that captures each frame through a CDP Page.captureScreenshot call. The two skills split along an input boundary, with nechama-parsha deferring engine rules to close-read-sheet/references/hard-rules.md.
⚙️ Implementation	11/20	Recorder.snap sleeps until t0 + n/FPS*SLOWDOWN before each screenshot. SETUP_JS sets gsap.globalTimeline.timeScale(1/slow) and divides the playbackRate of every new entry from document.getAnimations() inside a requestAnimationFrame loop. glide_to computes a trapezoid velocity profile from SPEED and RAMP, and choose drives a synthetic cursor with press and release states. On the homepage, buildReadingCard reads category to pick a tag and renderReadings sorts by a category rank.
⚠️ Risk	5/20	The homepage is the landing route, so a CSS or home.js fault shows to every visitor, and the 1100, 900 and 600 px breakpoints are rewritten. buildReadingCard no longer renders title.he. The skills sit under .agents/skills/, so whether the agent loads them depends on how that directory is wired. The regenerated hero binaries replace the old media in place.
✅ Quality	4/15	No test file changes; tests/test_render.py and tests/test_data.py are untouched and nothing loads the homepage. AGENTS.md documents tests, layout and the index.json category and shows fields, and the record_hero.py docstring explains the frame-by-frame approach. The two SKILL.md files link to reference files that are not in this diff and contain no worked example. Neither declares allowed-tools for the MCP and preview tools its body names.
🔒 Perf / Security	1/5	record_hero.py slows page animations by SLOWDOWN so frames are not dropped during capture. Both skills specify the Sefaria/close-read User-Agent and the trailing slash on the /api/sheets/user/54380/ URL. buildReadingCard interpolates data/index.json fields into innerHTML without escaping; the data is first-party. No new validation or permission checks.

Was this score accurate? 👍 Yes · 👎 No

How this was scored →

_{Scored by GitVelocity · How are scores calculated?}

[gitvelocity-reviewer]

📊 Code Quality Score: 38/100

Base Score 38 (S11 + A6 + I12 + R4 + Q5 + P0) × ESF 1.0 (831 effective lines, Extra Large; 8 files, no bump) = 38

Category	Score	Factors
🔭 Scope	11/20	Touches 8 files across the homepage (js/home.js, css/close-read.css, index.html, data/index.json), the hero recorder (scripts/record_hero.py and three regenerated files under assets/hero/), and three agent-instruction files (close-read-sheet/SKILL.md, nechama-parsha/SKILL.md, AGENTS.md). No engine file (engine.js, text-effects.js) changes.
🏗️ Architecture	6/20	renderReadings in js/home.js drops the per-category sections and renders one grid, sorted by a rank derived from HOME_CATEGORIES, with the category shown as a tag on each card. record_hero.py moves from Playwright's record_video_dir to a Recorder class that writes JPEG frames and encodes them with ffmpeg. The two skills reference the repo's docs and research scripts but add no code dependency.
⚙️ Implementation	12/20	Recorder.glide_to computes scroll position from a trapezoid velocity profile (ramp, cruise, ramp) and takes one screenshot per frame. Recorder.snap waits until t0 + n/FPS*SLOWDOWN before each capture. SETUP_JS slows page animations by calling gsap.globalTimeline.timeScale(1/slow) and rewriting playbackRate on every new entry from document.getAnimations() each animation frame. choose drives a drawn cursor through move, press and release. The homepage code is template-string rendering with a sort.
⚠️ Risk	4/20	The homepage is static and a bad render affects the landing page only. A reader who followed old hero or card styling sees the new layout, and the removed .home-card-title-he, .home-proof-* and .home-category-* rules no longer exist. The skills only act when an agent is asked to use them. The hero assets are regenerable by running the script again.
✅ Quality	5/15	No test changes: tests/test_render.py and tests/test_data.py are untouched, and nothing exercises the new home.js structure or Recorder. AGENTS.md documents the test layers, run commands and design decisions. Both SKILL.md files give staged workflows and a description that lists trigger phrases, but contain no worked input-to-output example and no anti-patterns section.
🔒 Perf / Security	0/5	No performance or security work is added. The hero recorder is slower than real time by design (SLOWDOWN = 5). Both skills specify the Sefaria/close-read User-Agent for API calls and the trailing-slash form of the sheets endpoint.

Was this score accurate? 👍 Yes · 👎 No

How this was scored →

_{Scored by GitVelocity · How are scores calculated?}