Docs: Add Element Studio previews and asset rendering

packages/docs/.gitignore

@@ -7,6 +7,7 @@
 # Generated files
 .docusaurus
 .cache-loader
+.element-previews
 static/_raw
 
 # Twoslash prewarm temp files

packages/docs/elements-template/index.mdx

@@ -6,6 +6,23 @@ description: One sentence describing what this element shows.
 import {ElementPage} from '@site/src/components/Elements/ElementPage';
 import {ElementComponent} from './element';
 
+export const elementDefinition = {
+  category: 'category',
+  component: ElementComponent,
+  contributors: [],
+  description: 'One short sentence explaining what this Element demonstrates and when to use it.',
+  displayName: 'Element title',
+  durationInFrames: 120,
+  elementHeight: null,
+  elementWidth: null,
+  fps: 30,
+  height: 1080,
+  posterFrame: 60,
+  previewPadding: 0,
+  slug: 'category/element-title',
+  width: 1920,
+};
+
 # Element title
 
-<ElementPage component={ElementComponent} description="One short sentence explaining what this element demonstrates and when to use it." sourceFile="./element.tsx" />
+<ElementPage definition={elementDefinition} sourceFile="./element.tsx" />

packages/docs/elements/backgrounds/paper-texture/index.mdx

@@ -4,8 +4,8 @@ description: A white animated paper texture background.
 ---
 
 import {ElementPage} from '@site/src/components/Elements/ElementPage';
-import {PaperTexture} from './paper-texture';
+import {elementDefinitions} from '@site/src/components/Elements/element-definitions';
 
 # Paper Texture
 
-<ElementPage component={PaperTexture} description="A white paper texture background with a slowly changing posterized seed." displayName="Paper Texture" slug="backgrounds/paper-texture" sourceFile="./paper-texture.tsx" />
+<ElementPage definition={elementDefinitions['backgrounds/paper-texture']} sourceFile="./paper-texture.tsx" />

packages/docs/elements/backgrounds/rotating-starburst/index.mdx

@@ -4,15 +4,8 @@ description: A Solid background with a slowly rotating starburst effect.
 ---
 
 import {ElementPage} from '@site/src/components/Elements/ElementPage';
-import {RotatingStarburst} from './rotating-starburst';
+import {elementDefinitions} from '@site/src/components/Elements/element-definitions';
 
 # Rotating Starburst
 
-<ElementPage
-  component={RotatingStarburst}
-  description="A Solid background with a slowly rotating starburst effect."
-  displayName="Rotating Starburst"
-  durationInFrames={240}
-  slug="backgrounds/rotating-starburst"
-  sourceFile="./rotating-starburst.tsx"
-/>
+<ElementPage definition={elementDefinitions['backgrounds/rotating-starburst']} sourceFile="./rotating-starburst.tsx" />

packages/docs/elements/data/number-counter/index.mdx

@@ -4,23 +4,8 @@ description: A simple animated counter that counts up from a start value to an e
 ---
 
 import {ElementPage} from '@site/src/components/Elements/ElementPage';
-import {NumberCounter} from './number-counter';
+import {elementDefinitions} from '@site/src/components/Elements/element-definitions';
 
 # Number Counter
 
-<ElementPage
-  component={NumberCounter}
-  contributors={[
-    {
-      username: 'KapishDima',
-      contribution: 'Author',
-    },
-  ]}
-  description="A simple animated counter that smoothly counts from a start value to an end value."
-  displayName="Number Counter"
-  elementHeight={200}
-  elementWidth={640}
-  previewPadding={120}
-  slug="data/number-counter"
-  sourceFile="./number-counter.tsx"
-/>
+<ElementPage definition={elementDefinitions['data/number-counter']} sourceFile="./number-counter.tsx" />

packages/docs/elements/overlays/lower-third/index.mdx

@@ -4,8 +4,8 @@ description: A clean animated lower third for names and titles.
 ---
 
 import {ElementPage} from '@site/src/components/Elements/ElementPage';
-import {LowerThird} from './lower-third';
+import {elementDefinitions} from '@site/src/components/Elements/element-definitions';
 
 # Lower Third
 
-<ElementPage component={LowerThird} description="A clean animated lower third for introducing a speaker, guest, or section." displayName="Lower Third" elementHeight={138} elementWidth={680} previewPadding={300} slug="overlays/lower-third" sourceFile="./lower-third.tsx" />
+<ElementPage definition={elementDefinitions['overlays/lower-third']} sourceFile="./lower-third.tsx" />

packages/docs/elements/submit-an-element.mdx

@@ -33,6 +33,7 @@ Add:
 - An Element folder in `packages/docs/elements/<category>/<slug>/`
 - An `index.mdx` page
 - One self-contained TSX source file exporting a React component
+- An entry in `packages/docs/src/components/Elements/element-definitions.ts`
 
 For example:
 
@@ -53,14 +54,19 @@ The source file should work when dragged or copied into a project.
 
 ## 4. Define size
 
-To give an Element a fixed size, set `elementWidth` and `elementHeight` on the `ElementPage` in `index.mdx`:
-
-```tsx title="index.mdx"
-<ElementPage
-  component={MyElement}
-  elementWidth={900}
-  elementHeight={260}
->
+To give an Element a fixed size, set `elementWidth` and `elementHeight` in its definition entry. Use `null` for both values if the Element should inherit the full composition dimensions.
+
+```tsx title="element-definitions.ts"
+export const elementDefinitions = {
+  // The object key must match the slug.
+  'overlays/my-element': {
+    // Other metadata...
+    slug: 'overlays/my-element',
+    elementWidth: 900,
+    elementHeight: 260,
+    previewPadding: 120,
+  },
+};
 ```
 
 Then make the Element fill that area in its source file:
@@ -75,7 +81,7 @@ export const MyElement = () => {
 
 Size the Element to the smallest useful bounding box.
 
-Use `previewPadding` on the `ElementPage` if the docs preview needs more breathing room without changing the Element's drag dimensions or adding source padding.
+Use `previewPadding` in the definition entry if the docs preview needs more breathing room without changing the Element's drag dimensions or adding source padding.
 
 Do not put the wrapper [`<Sequence>`](/docs/sequence) into the Element source file.
 
@@ -179,13 +185,26 @@ export const Badge = () => {
 };
 ```
 
-## 7. Open the pull request
+## 7. Check the preview assets
+
+Set an intentional `posterFrame` in the definition entry. It should show the Element in a representative, visible state.
+
+Render the PNG and MP4 locally:
+
+```bash
+cd packages/docs
+bun run render-element-previews
+```
+
+Inspect both files under `.element-previews/`. The MP4 should cover the Element's full configured duration. Production uploads require maintainer R2 credentials.
+
+## 8. Open the pull request
 
 When submitting an Element as a pull request, include:
 
-- The Element folder
+- The Element folder and definition entry
 - What makes it useful
-- A rendered preview, if available
+- The rendered preview
 - Links to inspiration, if any
 
 [Open a pull request on GitHub](https://github.com/remotion-dev/remotion/compare)

packages/docs/elements/text/circle-marker/index.mdx

@@ -3,9 +3,9 @@ title: Circle Marker
 description: An animated hand-drawn circle around text.
 ---
 
+import {elementDefinitions} from '@site/src/components/Elements/element-definitions';
 import {ElementPage} from '@site/src/components/Elements/ElementPage';
-import {CircleMarker} from './circle-marker';
 
 # Circle Marker
 
-<ElementPage component={CircleMarker} description="An animated hand-drawn circle with posterized drawing progress and shape changes." displayName="Circle Marker" elementHeight={220} elementWidth={900} previewPadding={120} slug="text/circle-marker" sourceFile="./circle-marker.tsx" />
+<ElementPage definition={elementDefinitions['text/circle-marker']} sourceFile="./circle-marker.tsx" />

packages/docs/elements/text/crossed-off/index.mdx

@@ -3,9 +3,9 @@ title: Crossed Off
 description: Animated hand-drawn crossed-off text.
 ---
 
+import {elementDefinitions} from '@site/src/components/Elements/element-definitions';
 import {ElementPage} from '@site/src/components/Elements/ElementPage';
-import {CrossedOffText} from './crossed-off';
 
 # Crossed Off
 
-<ElementPage component={CrossedOffText} description="An animated hand-drawn cross for removing a word or phrase with emphasis." displayName="Crossed Off" elementHeight={220} elementWidth={900} previewPadding={120} slug="text/crossed-off" sourceFile="./crossed-off.tsx" />
+<ElementPage definition={elementDefinitions['text/crossed-off']} sourceFile="./crossed-off.tsx" />

packages/docs/elements/text/strike-through/index.mdx

@@ -3,9 +3,9 @@ title: Strike Through
 description: Animated hand-drawn strike-through text.
 ---
 
+import {elementDefinitions} from '@site/src/components/Elements/element-definitions';
 import {ElementPage} from '@site/src/components/Elements/ElementPage';
-import {StrikeThroughText} from './strike-through';
 
 # Strike Through
 
-<ElementPage component={StrikeThroughText} description="An animated hand-drawn line for striking through a word or phrase." displayName="Strike Through" elementHeight={220} elementWidth={900} previewPadding={120} slug="text/strike-through" sourceFile="./strike-through.tsx" />
+<ElementPage definition={elementDefinitions['text/strike-through']} sourceFile="./strike-through.tsx" />

packages/docs/elements/text/text-marker/index.mdx

@@ -3,9 +3,9 @@ title: Text Marker
 description: A hand-drawn animated text highlight.
 ---
 
+import {elementDefinitions} from '@site/src/components/Elements/element-definitions';
 import {ElementPage} from '@site/src/components/Elements/ElementPage';
-import {TextMarker} from './text-marker';
 
 # Text Marker
 
-<ElementPage component={TextMarker} description="A hand-drawn animated text marker for calling attention to one phrase." displayName="Text Marker" elementHeight={220} elementWidth={900} previewPadding={120} slug="text/text-marker" sourceFile="./text-marker.tsx" />
+<ElementPage definition={elementDefinitions['text/text-marker']} sourceFile="./text-marker.tsx" />

packages/docs/package.json

@@ -18,7 +18,8 @@
 		"lint": "eslint src components",
 		"test": "bun test src",
 		"remotion": "remotion studio src/remotion/entry.ts",
-		"render-cards": "bun run render-cards.ts"
+		"render-cards": "bun run render-cards.ts",
+		"render-element-previews": "bun run render-element-previews.ts"
 	},
 	"dependencies": {
 		"@aws-sdk/s3-request-presigner": "catalog:",