ContextQMD
Back to Remotion

Motion Design Systems

packages/docs/docs/design-systems.mdx

4.0.5012.3 KB
Original Source

Remotion is an excellent tool for collecting your organization's animated design resources. You can:

  • Create static and animated assets
  • Organize them as compositions and folders in the Remotion Studio
  • Use HTML and CSS, as well as shaders and effects
  • Allow parameterization
  • Export assets using server-side or client-side rendering

Remotion's Design System

Remotion's design system is hosted at remotion.dev/brand, and its source is available in the Remotion monorepo.

Use it as inspiration for your own motion design system.

Hosting the design system

The Remotion Studio can be hosted as a static deployment on many hosts, such as Vercel, Netlify, or Cloudflare.

Parameterization

You can display a form in the deployed Studio, allowing users to parameterize your assets.

Rendering

When deployed as a static site, you can render assets using client-side rendering. Exporting assets as transparent ProRes, suitable for elements such as lower thirds, is not yet possible client-side.

In that case, you have two options:

  • Use the Copy CLI command button in the render dialog to get a command that renders the asset in any terminal.
  • Deploy the Studio on a VPS to retain the ability to render from the Studio.

License

Remotion is free for organizations of up to three people. Companies with more employees need to obtain a Company License.

If renders are triggered manually on demand, this use case falls under Remotion for Creators. If any automation is connected to it, it falls under Remotion for Automators.

See also