https://github.com/JonnyBurger/website-scroller

https://github.com/JonnyBurger/website-scroller

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/JonnyBurger/website-scroller
• Owner: JonnyBurger
• Created: 2024-01-30T13:08:31.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-02-02T14:14:37.000Z (8 months ago)
• Last Synced: 2024-05-16T11:55:16.376Z (4 months ago)
• Language: TypeScript
• Homepage: https://website-scroller.vercel.app
• Size: 134 KB
• Stars: 34
• Watchers: 2
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Remotion video

Turn a URL into a video that scrolls the website to the top and gives a video. Inspired by [this tweet](https://twitter.com/t3dotgg/status/1752314479482945845)

This is how you could turn ping.gg into a video:

```bash

set -e

sudo npm i -g puppeteer-screenshot-cli

puppeteer-screenshot --width 1920 --fullPage 'https://ping.gg/' > screenshot.jpg

export SCREENSHOT=$(curl --upload-file ./screenshot.jpg https://transfer.sh/screenshot.jpg)

rm screenshot.jpg

sudo npm i -g @remotion/[email protected]

remotion render https://website-scroller.vercel.app/ --codec=prores --props="{\"url\": \"$SCREENSHOT\", \"duration\": 5}" website.mov

```

## Customize

Fork and customize the `Composition.tsx` file. [Deploy the Remotion Studio](https://www.remotion.dev/docs/studio/deploy-static) for example to Vercel. Replace the URL in the `render` command.

## Commands

**Install Dependencies**

```console

bun i

```

**Start Preview**

```console

bun start

```

**Render video**

```console

bun run build

```

**Upgrade Remotion**

```console

npm run upgrade

```

## Docs

Get started with Remotion by reading the [fundamentals page](https://www.remotion.dev/docs/the-fundamentals).

## Help

We provide help on our [Discord server](https://discord.gg/6VzzNDwUwV).

## Issues

Found an issue with Remotion? [File an issue here](https://github.com/remotion-dev/remotion/issues/new).

## License

Note that for some entities a company license is needed. [Read the terms here](https://github.com/remotion-dev/remotion/blob/main/LICENSE.md).