packages/docs/docs/contributing/presentation.mdx
Make your custom presentation accessible for others in the @remotion/transitions package.
If this is your first contribution, see the main instructions first.
<Step>1</Step> Create a custom transition. Look at the <a href="/docs/transitions/presentations/custom">custom presentation</a> docs to see how it's done.
<Step>2</Step>Add your presentation to the remotion monorepo under <a href="https://github.com/remotion-dev/remotion/tree/main/packages/transitions/src/presentations"><code>packages/transitions/src/presentations</code></a>.
<Step>3</Step> In the <code>bundle.ts</code>, add your presentation to the <code>presentations array</code>.
const presentations = ['slide', 'flip', 'wipe', 'fade', ..., 'yourPresentation'];
<Step>4</Step> Add your presentation to the <code>exports</code> of the <code>package.json</code> at <a href="https://github.com/remotion-dev/remotion/blob/main/packages/transitions/package.json"><code>packages/transitions/package.json</code></a> as well as to the <code>typesVersions</code>, 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.
<Step>5</Step> Write a documentation for your presentation. Have a look at the presentations linked in the <a href="/docs/transitions/presentations">presentation</a> docs for reference. The documentation should consist of the following parts:
short description of what your presentation does.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).example code snippet showing how to use your presentation . See the type safe snippets docs for instructions on typesafe code snippets.For more help on how to write a documentation, see the contributing to the documentation page.
<Step>6</Step> Add your presentation to the table of contents at <a href="/docs/transitions/presentations">docs/transitions/presentations</a> by creating a <code><TOCItem></code> containing a link to your documentation, a <code><PresentationPreview</code> displaying your presentation and a one-liner describing what your presentation does.
<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 <a href="https://github.com/remotion-dev/remotion/pull/3199/files">here</a>.
Some effects need to blend the entering and exiting scenes pixel-by-pixel.
See Custom HTML-in-canvas presentations how to create a HTML-in-canvas presentation.
If you want to contribute the presentations back into the @remotion/transitions package:
<Step>1</Step> Author the shader using <a href="/docs/transitions/make-html-in-canvas-presentation"><code>makeHtmlInCanvasPresentation()</code></a> and the <a href="/docs/transitions/make-html-in-canvas-presentation#htmlincanvasshader"><code>HtmlInCanvasShader<Props></code></a> type. See <a href="https://github.com/remotion-dev/remotion/blob/main/packages/transitions/src/presentations/zoom-blur.tsx"><code>zoom-blur.tsx</code></a> as a reference.
<Step>2</Step> 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. <a href="https://github.com/remotion-dev/remotion/blob/main/packages/transitions/src/presentations/zoom-in-out.tsx"><code>zoom-in-out.tsx</code></a> is an example of a port.
<Step>3</Step> Mind the time convention: in our shaders <code>u_time = 0</code> outputs the entering scene and <code>u_time = 1</code> outputs the exiting scene. When porting from gl-transitions, set <code>float progress = 1.0 - u_time;</code> at the top of <code>main()</code>.
<Step>4</Step> Handle the boundary cases inside the JS <code>draw()</code> function: when <code>prevImage</code> is <code>null</code>, force <code>time = 0</code>; when <code>nextImage</code> is <code>null</code>, force <code>time = 1</code>.
<Step>5</Step> Set <code>serverSideRendering</code>, <code>nodejs</code>, <code>bun</code> and <code>serverlessFunctions</code> to <code>true</code> in the <code><CompatibilityTable /></code> on your docs page — Remotion's bundled Chromium for Lambda already includes the required APIs. Set <code>firefox</code> and <code>safari</code> to <code>false</code>.
<Step>6</Step> The table-of-contents preview should always render the pre-rendered fallback video — the live <code><Player></code> would crash for readers without HTML-in-canvas enabled, and a tiny TOC tile gains nothing from running the real shader. See <a href="https://github.com/remotion-dev/remotion/blob/main/packages/docs/components/transitions/zoom-blur-toc-preview.tsx"><code>zoom-blur-toc-preview.tsx</code></a> for the pattern. For the in-page <code><Demo></code>, branch on <code>HtmlInCanvas.isSupported()</code> via the <code>useHtmlInCanvasDocsDemoBranch()</code> hook so supporting browsers see the real shader and others fall back to the video — see <a href="https://github.com/remotion-dev/remotion/blob/main/packages/docs/components/demos/ZoomBlurDemo.tsx"><code>ZoomBlurDemo.tsx</code></a>.
<Step>7</Step> Render the fallback videos from a composition under <code>packages/example/src/HtmlInCanvas/</code> using <code>npx remotion render <id> --browser-executable=<path-to-Chrome-Canary> --allow-html-in-canvas</code>. Drop a high-res 1920×1080 file at <code>packages/docs/static/img/<name>.mp4</code> for the docs page and a low-res 540×280 file at <code><name>-thumb.mp4</code> for the TOC tile.
<Step>8</Step> Add an <code><HtmlInCanvasLabel /></code> next to the presentation name in the table-of-contents tile to flag the requirement.