Skip to main content

Contribute your own presentation

Make your custom presentation accessible for others in the @remotion/transitions package.

Setup the Remotion project​

If this is your first contribution, see the main instructions first.

How to proceed​

Create a custom transition. Look at the custom presentation docs to see how it's done.
2
Add your presentation to the remotion monorepo under packages/transitions/src/presentations.
3
 In the bundle.ts, add your presentation to the presentations array.

const presentations = ['slide', 'flip', 'wipe', 'fade', ..., 'yourPresentation'];

Add your presentation to the exports of the package.json at packages/transitions/package.json as well as to the typesVersions, so it can be correctly imported in other remotion projects.

"exports": {
  "./yourPresentation": {
    "types": "./dist/presentations/yourPresentation.d.ts",
    "module": "./dist/presentations/yourPresentation.js",
    "import": "./dist/presentations/yourPresentation.js",
    "require": "./dist/cjs/presentations/yourPresentation.js"
    },
  },
"typesVersions": {
  ">=1.0": {
    "yourPresentation": [
      "dist/presentations/yourPresentation.d.ts"
      ],
    },
  }

Make sure to pnpm build in remotion/packages/transitions so your transition gets usable in your remotion repository.

Write a documentation for your presentation. Have a look at the presentations linked in the presentation docs for reference. The documentation should consist of the following parts:

  • A short description of what your presentation does.
  • A demo of your presentation. For instructions, have a look at the demo paragraph in the contributing to the documentation page, or have a look at the source code of other presentation documentations ([presentationType].mdx files).
  • An example code snippet showing how to use your presentation . See the type safe snippets docs for instructions on typesafe code snippets.
  • The API of your presentation

     For more help on how to write a documentation, see the contributing to the documentation page.

Add your presentation to the table of contents at docs/transitions/presentations by creating a <TOCItem> containing a link to your documentation, a <PresentationPreview displaying your presentation and a one-liner describing what your presentation does.

Example TOCItem
<TOCItem link="/docs/transitions/presentations/yourPresentation">
  <div style={row}>
    <PresentationPreview durationRestThreshold={0.001} effect={yourPresentation()} />
    <div style={{flex: 1, marginLeft: 10}}>
      <strong>
        <code>{'yourPresentation()'}</code>
      </strong>
      <div>Insert one-liner describing your presentation</div>
    </div>
  </div>
</TOCItem>

An pull request for reference containing all required steps and filechanges can be found here.

HTML-in-canvas presentations​

Some effects need to blend the entering and exiting scenes pixel-by-pixel through a fragment shader (zoom blur, dissolves, displacement, page curl, etc.). For these, use the HTML-in-canvas path instead of a CSS-only custom presentation.

The full API is documented at Custom HTML-in-canvas presentations. A few extra contributing-side notes:

Author the shader using makeHtmlInCanvasPresentation() and the HtmlInCanvasShader<Props> type. See zoom-blur.tsx as a reference.
2
 gl-transitions.com is a great source of MIT-licensed fragment shaders that can be ported. Always credit the original author and the MIT license in a comment above the shader source. zoom-in-out.tsx is an example of a port.
3
 Mind the time convention: in our shaders u_time = 0 outputs the entering scene and u_time = 1 outputs the exiting scene. When porting from gl-transitions, set float progress = 1.0 - u_time; at the top of main().
4
 Handle the boundary cases inside the JS draw() function: when prevImage is null, force time = 0; when nextImage is null, force time = 1.
5
 Set serverSideRendering, nodejs, bun and serverlessFunctions to true in the <CompatibilityTable /> on your docs page — Remotion's bundled Chromium for Lambda already includes the required APIs. Set firefox and safari to false.
6
 Live <Demo> and table-of-contents previews would crash for readers who do not have HTML-in-canvas enabled. Branch on HtmlInCanvas.isHtmlInCanvasSupported() via the useHtmlInCanvasDocsDemoBranch() hook and fall back to a pre-rendered video. See ZoomBlurDemo.tsx and zoom-blur-toc-preview.tsx for the pattern.
7
 Render the fallback videos from a composition under packages/example/src/HtmlInCanvas/ using npx remotion render <id> --browser-executable=<path-to-Chrome-Canary> --allow-html-in-canvas. Drop a high-res 1920×1080 file at packages/docs/static/img/<name>.mp4 for the docs page and a low-res 540×280 file at <name>-thumb.mp4 for the TOC tile.
8
 Add an <HtmlInCanvasLabel /> next to the presentation name in the table-of-contents tile to flag the requirement.

See also​