[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-80195":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":8,"htmlUrl":8,"language":9,"languages":8,"totalLinesOfCode":8,"stars":10,"forks":11,"watchers":12,"openIssues":13,"contributorsCount":13,"subscribersCount":13,"size":13,"stars1d":13,"stars7d":13,"stars30d":13,"stars90d":13,"forks30d":13,"starsTrendScore":13,"compositeScore":14,"rankGlobal":8,"rankLanguage":8,"license":15,"archived":16,"fork":16,"defaultBranch":17,"hasWiki":18,"hasPages":18,"topics":19,"createdAt":8,"pushedAt":8,"updatedAt":20,"readmeContent":21,"aiSummary":22,"trendingCount":13,"starSnapshotCount":13,"syncStatus":23,"lastSyncTime":24,"discoverSource":25},80195,"web-scroll-video","upenn\u002Fweb-scroll-video","upenn",null,"JavaScript",77,3,1,0,1.81,"MIT License",false,"main",true,[],"2026-06-12 02:03:59","# Web Scroller Tool\n\nCreate an MP4 video of a web page scrolling at a steady speed. The tool opens the URL in headless Chrome, captures viewport screenshots at fixed scroll offsets, and streams those frames into `ffmpeg`.\n\nThe default output is 1080p: `1920x1080`, `30 fps`, H.264 MP4.\n\n## Demo\n\nThis included cue sheet renders a 1080p, 60 fps MP4, shown on a GitHub Pages player so the original video quality is preserved:\n\n[![Wharton faculty directory demo video preview](examples\u002Fwharton-faculty-demo.jpg)](https:\u002F\u002Fupenn.github.io\u002Fweb-scroll-video\u002Fdemo\u002F)\n\n[Watch the demo](https:\u002F\u002Fupenn.github.io\u002Fweb-scroll-video\u002Fdemo\u002F) or [open the MP4](examples\u002Fwharton-faculty-demo.mp4).\n\n## Getting Started With Codex\n\nOpen Codex and ask it to install the skill:\n\n```text\nInstall the web scroll video skill from https:\u002F\u002Fgithub.com\u002Fupenn\u002Fweb-scroll-video\n```\n\nRestart Codex after the install finishes. Then ask Codex to check your computer:\n\n```text\nCheck the web scroll video dependencies and install anything missing.\n```\n\nThen describe the video you want in plain English:\n\n```text\nMake a 60 fps 1080p video of https:\u002F\u002Fzamechek.com. Pause 1 second, click Blog, scroll slowly to the bottom and back to the top, click the first Keynot post, then scroll slowly to the bottom. Show the cursor.\n```\n\nCodex will create a cue sheet, render the MP4, and keep the cue sheet and video together so revisions are easy. To revise, ask for changes the same way you would give notes to an editor, such as “make the first scroll slower,” “hide the cursor,” or “add a two second pause before the click.”\n\n## Requirements\n\n- Node.js 22 or newer\n- Google Chrome, Chromium, or Microsoft Edge\n- `ffmpeg`\n\nNo npm packages are required for this tool. Codex can check and help install these dependencies. `npm` is only needed if you are installing the Codex CLI itself or managing Node.js on a command-line machine.\n\n## Manual Install Reference\n\nManual install:\n\n```bash\nmkdir -p \"${CODEX_HOME:-$HOME\u002F.codex}\u002Fskills\"\ngit clone https:\u002F\u002Fgithub.com\u002Fupenn\u002Fweb-scroll-video.git \\\n  \"${CODEX_HOME:-$HOME\u002F.codex}\u002Fskills\u002Fweb-scroll-video\"\n```\n\nIf using the Codex skill installer helper directly:\n\n```bash\npython3 \"${CODEX_HOME:-$HOME\u002F.codex}\u002Fskills\u002F.system\u002Fskill-installer\u002Fscripts\u002Finstall-skill-from-github.py\" \\\n  --repo upenn\u002Fweb-scroll-video \\\n  --path . \\\n  --name web-scroll-video\n```\n\nRestart Codex after installing so the skill is discovered.\n\nOn macOS with Homebrew, missing dependencies can usually be installed with:\n\n```bash\nbrew install node ffmpeg\nbrew install --cask google-chrome\n```\n\nOn a fresh Debian or Ubuntu VM, Codex can install the browser and video tools with commands like:\n\n```bash\nsudo apt-get update\nsudo apt-get install -y chromium chromium-sandbox ffmpeg git ca-certificates fonts-liberation\n```\n\nIf you are testing from the command line on a Linux VM and need to install Codex first, install Node.js 22 or newer, then run:\n\n```bash\nsudo npm install -g @openai\u002Fcodex\ncodex login\n```\n\nIf Chrome is already installed somewhere nonstandard, pass its path with `--chrome-path` or set `CHROME_PATH`.\n\n## Command Line Quick Start\n\nCapture the Wharton home page from this repository:\n\n```bash\nnpm run capture:wharton\n```\n\nThis writes:\n\n```text\nwharton-scroll.mp4\n```\n\nCapture any other URL:\n\n```bash\nnpm run capture -- https:\u002F\u002Fexample.com --out example-scroll.mp4\n```\n\nRun the CLI directly:\n\n```bash\nnode src\u002Fscroll-video.mjs https:\u002F\u002Fwww.wharton.upenn.edu\u002F --out wharton-scroll.mp4\n```\n\n## Cue Sheets\n\nUse a cue sheet when a video needs pauses, clicks, typing, zooms, or highlights. Cue sheets are sequence-style: each line happens after the previous one.\n\n```text\nout: wharton-demo.mp4\nwidth: 1920\nheight: 1080\nfps: 60\ncursor: off\n\ngo https:\u002F\u002Fwww.wharton.upenn.edu\u002Ffaculty-directory\u002F\npause 1\nhighlight \"Faculty Directory\" for 1\nscroll to 1800 over 4\npause 0.75\nclick \"Departments\"\npause 1\ntype \"finance\" into \"Search\"\npause 1\nzoom to 1.2 over 1\nscroll to bottom over 5\n```\n\nRender it with:\n\n```bash\nnode src\u002Fscroll-video.mjs --script wharton-demo.cue\n```\n\nIn script mode, relative `out:` paths are resolved next to the cue sheet. If no `out:` is provided, the MP4 uses the cue filename with `.mp4`.\n\nOr run the included example:\n\n```bash\nnpm run capture:wharton-demo\n```\n\nSupported cue actions:\n\n```text\ngo https:\u002F\u002Fexample.com\npause 1.5\nscroll to bottom over 5\nscroll to 1800 over 4\nscroll to \"Visible text\" over 4\nscroll by 800 over 2\nclick \"Visible text\"\nclick selector \".button-class\"\ntype \"search terms\" into \"Search\"\npress Enter\nwait text \"Results\" timeout 10\nzoom to 1.2 over 1\nhighlight \"Important text\" for 1.5\n```\n\nNotes:\n\n- `cursor: off` is the default. Use `cursor: on` in the cue sheet or pass `--cursor` to show a rendered cursor.\n- Keep cue-driven outputs beside their cue files. For `cues\u002Fdemo.cue`, `out: demo.mp4` writes `cues\u002Fdemo.mp4`; omitting `out:` also writes `cues\u002Fdemo.mp4`.\n- Pauses capture live frames, so page animations continue during the pause.\n- Highlights are temporary overlays around visible text, labels, or CSS selectors.\n- `scroll to \"Visible text\" over 4` scrolls until that text is centered in the viewport.\n- If a click, type target, wait, or highlight fails, the tool writes an error report and screenshot next to the output file.\n- Cue sheets may also be written as JSON for generated workflows, but `.cue` text files are easier to edit by hand.\n\n## Options\n\n```text\n--script \u003Cpath>        Run a sequence-style cue sheet (.cue, .txt, or .json).\n--out \u003Cpath>           Output MP4 path. Default: scroll-video.mp4, or \u003Cscript>.mp4 in script mode.\n--width \u003Cpx>           Viewport width. Default: 1920\n--height \u003Cpx>          Viewport height. Default: 1080\n--fps \u003Cnumber>         Video frames per second. Default: 30\n--speed \u003Cpx\u002Fsec>       Scroll speed in CSS pixels per second. Default: 480\n--duration \u003Cseconds>   Override speed and fit full scroll into this duration.\n--delay \u003Cms>           Extra wait after page load. Default: 1500\n--warmup-step \u003Cpx>     Lazy-load warmup scroll step. Default: viewport height\n--chrome-path \u003Cpath>   Chrome\u002FChromium\u002FEdge executable path.\n--ffmpeg-path \u003Cpath>   ffmpeg executable path. Default: ffmpeg\n--crf \u003Cnumber>         H.264 quality, lower is better. Default: 18\n--cursor               Show a rendered cursor overlay in script mode.\n--storyboard \u003Cdir>     Save one PNG screenshot after each script step.\n--keep-browser         Leave the temporary Chrome profile directory in place.\n--help                 Show CLI help.\n```\n\n## Examples\n\nRender a 20 second scroll:\n\n```bash\nnode src\u002Fscroll-video.mjs https:\u002F\u002Fwww.wharton.upenn.edu\u002F \\\n  --out wharton-20s.mp4 \\\n  --duration 20\n```\n\nRender at a faster steady scroll speed:\n\n```bash\nnode src\u002Fscroll-video.mjs https:\u002F\u002Fwww.wharton.upenn.edu\u002F \\\n  --out wharton-fast.mp4 \\\n  --speed 900\n```\n\nRender a mobile-shaped viewport:\n\n```bash\nnode src\u002Fscroll-video.mjs https:\u002F\u002Fwww.wharton.upenn.edu\u002F \\\n  --out wharton-mobile.mp4 \\\n  --width 1080 \\\n  --height 1920\n```\n\nUse explicit binary paths:\n\n```bash\nnode src\u002Fscroll-video.mjs https:\u002F\u002Fwww.wharton.upenn.edu\u002F \\\n  --out wharton-scroll.mp4 \\\n  --chrome-path \"\u002FApplications\u002FGoogle Chrome.app\u002FContents\u002FMacOS\u002FGoogle Chrome\" \\\n  --ffmpeg-path \u002Fopt\u002Fhomebrew\u002Fbin\u002Fffmpeg\n```\n\n## How It Works\n\n1. Launch a temporary headless Chrome profile with DevTools enabled.\n2. Open the URL and wait for page load.\n3. In one-shot mode, scroll through the page once to trigger lazy-loaded content.\n4. In cue-sheet mode, run the sequence of pauses, scrolls, clicks, typing, zooms, and highlights.\n5. Capture PNG frames and pipe them into `ffmpeg` to produce an H.264 MP4.\n\nOne-shot scroll mode renders deterministic scroll positions, so the final video scrolls at a steady speed even if individual screenshots take different amounts of time to capture. Cue-sheet mode captures timed actions so page animations can continue during pauses and interactions.\n\n## Validation\n\nRun the Docker smoke test:\n\n```bash\nnpm test\n```\n\nThis creates `docker-output\u002Fsmoke.mp4` from the current checkout in a clean Linux container. To test the public GitHub install path instead, run:\n\n```bash\nnpm run test:docker:github\n```\n\nThe Docker smoke test does not run or authenticate Codex. It validates the renderer with clean Linux installs of Chromium and `ffmpeg`; test Codex login separately on a VM or desktop with `codex login`.\n\nCheck the generated video metadata:\n\n```bash\nffprobe -v error \\\n  -select_streams v:0 \\\n  -show_entries stream=width,height,r_frame_rate,duration,codec_name \\\n  -of default=noprint_wrappers=1 \\\n  wharton-scroll.mp4\n```\n\nExpected defaults include:\n\n```text\ncodec_name=h264\nwidth=1920\nheight=1080\nr_frame_rate=30\u002F1\n```\n\n## Troubleshooting\n\nIf Chrome is not found, pass `--chrome-path` or set `CHROME_PATH`.\n\nIf `ffmpeg` is not found, pass `--ffmpeg-path` or set `FFMPEG_PATH`.\n\nIf a page loads content slowly, increase `--delay`:\n\n```bash\nnode src\u002Fscroll-video.mjs https:\u002F\u002Fexample.com --delay 4000\n```\n\nIf a page lazy-loads content only after smaller scroll increments, reduce `--warmup-step`:\n\n```bash\nnode src\u002Fscroll-video.mjs https:\u002F\u002Fexample.com --warmup-step 400\n```\n\nIf the capture runs in a sandboxed environment, it may need permission to access the target URL and open a local DevTools port on `127.0.0.1`.\n\nIf Chromium fails inside Docker with a namespace or sandbox error, test in a normal VM or use a Docker-only Chrome wrapper that launches Chromium with `--no-sandbox`. That flag is normally a container workaround, not the recommended desktop or VM path.\n\nIf a cue step fails, inspect the generated files:\n\n```text\n\u003Coutput-name>.error.json\n\u003Coutput-name>.error.png\n```\n\nThe JSON report includes the failure message, current URL, intended output path, and screenshot path.\n\n## License\n\nMIT. See [LICENSE](LICENSE).\n","该项目用于生成网页滚动的MP4视频。它通过在无头Chrome中打开指定URL，以固定间隔截取屏幕截图，并使用`ffmpeg`将这些帧合并成视频。默认输出为1080p分辨率、30fps的H.264编码MP4文件。项目支持自定义视频参数如帧率和分辨率，同时可以控制页面中的点击、滚动等交互动作以及鼠标指针显示。适用于需要展示网站或应用界面动态效果的场景，比如产品演示、教程制作或是设计评审时提供直观的视觉反馈。安装与使用需Node.js 22及以上版本、Google Chrome\u002FChromium\u002FMicrosoft Edge浏览器及`ffmpeg`工具的支持。",2,"2026-06-11 03:59:37","CREATED_QUERY"]