explaingit

ken-rl/website_recorder

Analysis updated 2026-05-18

1TypeScriptAudience · vibe coderComplexity · 2/5LicenseSetup · moderate

TLDR

A tool that turns any website URL into a polished, smoothly scrolling MP4 demo video, with framing, motion controls, and comparison exports.

Mindmap

mindmap
  root((repo))
    What it does
      Records smooth scroll videos
      Exports framed MP4
      Compares two pages
    Tech stack
      TypeScript
      Playwright
      ffmpeg
    Use cases
      Product demo videos
      Launch post visuals
      Responsive device comparisons
    Audience
      Developers
      Marketers
    Setup
      Run npx deio-scroll
      Requires ffmpeg and Node.js

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Turn a website URL into a polished scrolling demo video for a product page or launch post.

USE CASE 2

Create a side by side comparison video of two landing pages with matched timing.

USE CASE 3

Capture a responsive demo showing the same page across desktop and mobile breakpoints.

USE CASE 4

Automate video recording of a local project through the CLI or HTTP API.

What is it built with?

TypeScriptPlaywrightffmpegSQLite

How does it compare?

ken-rl/website_recorder0xkinno/neuralvault0xmayurrr/ai-contractauditor
Stars111
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderatehardeasy
Complexity2/54/52/5
Audiencevibe coderdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 5min

Requires Node.js 20+, pnpm, and ffmpeg on your PATH, Chromium installs automatically on first run.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

Deio Scroll, the project behind this repository, turns any website URL into a polished scrolling video. You paste in a link, and it loads the page with Playwright, waits for lazy loaded content to appear, scrolls through the page smoothly using an eased motion or a virtual wheel, and exports the result as an H.264 MP4 file, optionally framed with a background, drop shadow, and rounded corners for use in product pages or launch posts. The tool supports a range of controls beyond a basic scroll. Users can choose motion curves and speed, hold on a hero section, or set pause triggers that stop the scroll when a specific part of the page first comes into view. It can capture interactive moments such as hovers, clicks, and cursor movement toward specific elements, and offers three quality tiers, Draft, Standard, and Cinematic, for iterating before a final export. Cookie banners, modals, and other popups are removed automatically by default. Beyond single page recordings, Deio Scroll can create side by side comparison videos of two URLs with matched timing, and can capture the same page across paired device breakpoints, such as desktop and mobile, to produce a responsive demo film. Recording jobs are durable, meaning progress is tracked and jobs can be cancelled, retried, or resumed after a page refresh, with a local library of past recordings. The tool can be used three ways: through a web interface where you paste a URL and click Start capture, through a command line interface for scripted recordings, or through an HTTP API that returns a job id and a link to the finished video. There is also an MCP integration so tools like Codex can direct the recorder programmatically. Running it requires Node.js 20 or newer, the pnpm package manager, ffmpeg on your system path, and Playwright's Chromium browser, which installs automatically on first use. It is released under the MIT license.

Copy-paste prompts

Prompt 1
Help me run npx deio-scroll on my website URL and choose a scroll curve and quality preset.
Prompt 2
Walk me through setting up the repository locally with pnpm and Playwright for development.
Prompt 3
Explain how to use the Compare feature to create a side by side video of two landing pages.
Prompt 4
Show me how to call the POST /record API endpoint to capture a page with custom animation settings.

Frequently asked questions

What is website_recorder?

A tool that turns any website URL into a polished, smoothly scrolling MP4 demo video, with framing, motion controls, and comparison exports.

What language is website_recorder written in?

Mainly TypeScript. The stack also includes TypeScript, Playwright, ffmpeg.

What license does website_recorder use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is website_recorder to set up?

Setup difficulty is rated moderate, with roughly 5min to a first successful run.

Who is website_recorder for?

Mainly vibe coder.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.