Create a timelapse of your web development

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

Uses pageres-cli for creating screenshots.

• gif PentaCode
• gif moongift.jp

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

npm install -g tlapse

tlapse -- localhost:3000

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

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

You can also pass any pageres-cli options after --

tlapse -- localhost:3000 1366x768 --selector='.page-header'

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"
  }
}

MIT - Typicode 🌵