Element Guidelines

A Remotion Element should be a focused, reusable video building block that can be copied into a project and remixed.

Use these guidelines when designing and reviewing an Element.

Use real videos as references

Start with a visual technique observed in a published video, such as a YouTube video, TikTok, or Instagram Reel. Save a link and timestamp, and identify precisely what is worth turning into an Element.

Do not use web components, other Remotion libraries, or AI-generated ideas as the source of the concept. They may help with implementation, but they do not demonstrate that a visual idea works in a real video.

Treat references as evidence of a useful video-making need, not as designs to reproduce. Identify the role the technique plays—for example, emphasizing a phrase or introducing a speaker—then design an original Element for that role. Do not copy the source's visual treatment, branding, footage, or proprietary assets.

Keep it focused

An Element should demonstrate one visual idea, technique, or workflow. It should be useful in more than one Remotion project without becoming a complete, highly specific composition.

If two variants are worth showing, prefer two separate Elements over a variant prop.

The Elements gallery provides the preview dimensions, frame rate, and duration. The Element itself should remain a building block.

Make it portable

An Element should work when it is dragged or copied into another project.

• Keep the implementation self-contained.
• Prefer HTML, CSS, and React.
• Avoid unexpected global styles and layout side effects.
• Avoid fullscreen assumptions unless the Element is a background.
• Use stable remote URLs for assets and Google Fonts for non-websafe fonts.
• Avoid project-specific branding or footage, and make colors easy to change.
• Avoid dependencies where possible. Remotion Effects are an acceptable exception.

Design it for composition

An Element should be safe to combine with other content using normal Studio layering.

Size it to the smallest useful bounding box. Let the surrounding <Sequence> control its placement and how long it appears in the video.

Do not add internal padding solely to improve the gallery preview. Preview spacing should not change the bounds of the Element when it is dragged into a project.

Make animations complete

If an Element has an entrance animation, it must also have an exit animation.

Animate values within the Element, such as translation, scale, and opacity. Placement in the video belongs to the surrounding <Sequence>.

Expose useful Studio controls

Only expose controls that make the Element meaningfully editable. Give each interactive object a descriptive name and avoid redundant nested controls for the same visual object.

The main editable object should usually have a generic name such as Container. Add named child controls only when the child represents a separately useful editing target.

Follow the interactivity best practices when making an Element editable in Studio.

Choose a representative preview

Choose a poster frame that shows the Element in a visible, representative state. The video preview should cover the complete configured duration, including entrance and exit animations.

When the Element satisfies these guidelines, see Submit an Element.