What is Rewind Table?

A rewind bench or rewind table is a workspace for rewinding, inspecting, and repairing film.

Rewind Table is a tool that allows to easily create video content from Airtable data at scale. It is built with Remotion and contains connectors to easily plug into relevant base and fields on Airtable. It is a great tool for creating video content for social media, product websites, and more.

Data is fetched from Airtable and then displayed in a video player using Remotion Player component. Video can be rendered locally using Remotion CLI.

The way frames are displayed inside the video player / video is controlled with use of:

Tailwind CSS classes
Remotion Animated a composable animation library for Remotion

This allows to easily customize the look and feel of the video and repeatably apply the same styles to multiple videos.

Airtable

Flexible no-code database Airtable frequently used for managing social media content production workflows and e-commerce product catalogs.

Remotion

Remotion is a framework for creating videos programmatically, in React. It renders videos using the power of your CPU or can make use of cloud with Lambda functions. See great overview here. Remotion has a generous free license but also offers a paid license for commercial use, details here.

Deploy your own

Deploy the example using Vercel or preview live with StackBlitz

How to use

Clone the repository and install dependencies:

git clone https://github.com/gregonarash/rewind-table.git
cd rewind-table
yarn

Local development

Start the development server to access Airtable and player at localhost:3000 :

yarn dev

Start the Remotion preview server to access the Remotion preview player at localhost:3001 :

yarn video

Render video

At the moment to render video locally you will have to temporary hard code the 'hash' value of the video you want to render in remotion/Root.tsx file.

Change the following line:

  const [hash, setHash] = useState<string | null>(
    window.location.hash.slice(1)
  );

To the following:

  const [hash, setHash] = useState<string | null>(
    "#dngrebebjreg(base64 encoded hash with mapping to airtable)".slice(1)
  );

And run:

npx remotion render MainVideo out/video.mp4

License

Remotion License is NOT MIT and has paid tiers. All Remotion packages included and derivate code in /remotion should not be considered MIT.

Remaining content is under the MIT License - see the LICENSE.md file for details.

DharmikJagodana/rewind-table