tlapse

Create a timelapse of your web development

A tiny utility that takes periodic screenshots of your site while you develop.

Uses puppeteer for creating screenshots.

Examples

From CSS-Tricks - Front-End Tools: My Favorite Finds of 2017 gif

See also:

• PentaCode - How to Automatically Take Screenshots Of Your Site With TLapse gif
• Moongift.jp - 指定したURLに定期的にアクセスしてスクリーンショットを保存 gif

Examples are welcome. Ping me @typicode or make a PR if you've created something using tlapse ;)

Install

npm install -g tlapse

Usage

tlapse localhost:3000

Options

To change interval and directory where screenshots are saved, use the following options

tlapse --every 5m --directory ./screens localhost:3000

Tip

If you want to start your server and tlapse at the same time, add tlapse to your package.json scripts and use npm-run-all to start them in parallel.

{
  "scripts": {
    "start": "run-p server tlapse",
    "server": "node server",
    "tlapse": "tlapse localhost:3000"
  }
}

License

MIT - Typicode 🌵