Code Monkey home page Code Monkey logo

rewind-table's Introduction

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:

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

Deploy with Vercel

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.

rewind-table's People

Contributors

gregonarash avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.