remotion-markup

Files (65)

• 3d.md
• SKILL.md
• openai.yaml · agents/
• remotion-icon.svg · assets/
• audio-visualization.md
• audio.md
• calculate-metadata.md
• compositions.md
• connected-compositions.md
• cropping.md
• effects.md
• embedding-videos.md
• ffmpeg.md
• gifs.md
• google-fonts.md
• html-in-canvas.md
• images.md
• light-leaks.md
• local-fonts.md
• lottie.md
• measuring-dom-nodes.md
• measuring-text.md
• motion-blur.md
• multi-scene-video.md
• parameters.md
• REFERENCE.md · remotion-maps/
• openai.yaml · remotion-maps/agents/
• remotion-icon.svg · remotion-maps/assets/
• TECHNIQUE.md · remotion-maps/techniques/cesium/
• CesiumFlythrough.tsx · remotion-maps/techniques/cesium/assets/
• cesium-path.json · remotion-maps/techniques/cesium/assets/
• city-path.json · remotion-maps/techniques/cesium/assets/
• example-Root.tsx · remotion-maps/techniques/cesium/assets/
• flight-path.ts · remotion-maps/techniques/cesium/assets/
• sample-river.geojson · remotion-maps/techniques/cesium/assets/
• 3d-data-sources.md · remotion-maps/techniques/cesium/references/
• 3d-flyover-architecture.md · remotion-maps/techniques/cesium/references/
• 3d-troubleshooting.md · remotion-maps/techniques/cesium/references/
• prep-cesium-path.mjs · remotion-maps/techniques/cesium/scripts/
• TECHNIQUE.md · remotion-maps/techniques/mapbox/
• render-stability.md · remotion-maps/techniques/mapbox/references/
• TECHNIQUE.md · remotion-maps/techniques/maplibre/
• render-stability.md · remotion-maps/techniques/maplibre/references/
• TECHNIQUE.md · remotion-maps/techniques/maptiler/
• CountryLabel.tsx · remotion-maps/techniques/maptiler/assets/
• MapTilerVectorElement.ts · remotion-maps/techniques/maptiler/assets/
• RiverReveal.tsx · remotion-maps/techniques/maptiler/assets/
• example-Root.tsx · remotion-maps/techniques/maptiler/assets/
• country-meta.json · remotion-maps/techniques/maptiler/assets/sample-data/
• yarlung-flow.json · remotion-maps/techniques/maptiler/assets/sample-data/
• tokens.ts · remotion-maps/techniques/maptiler/assets/
• map-data-sources.md · remotion-maps/techniques/maptiler/references/
• map-explainer-architecture.md · remotion-maps/techniques/maptiler/references/
• map-geo-prep.md · remotion-maps/techniques/maptiler/references/
• render-stability.md · remotion-maps/techniques/maptiler/references/
• prep-geo.mjs · remotion-maps/techniques/maptiler/scripts/
• TECHNIQUE.md · remotion-maps/techniques/static-map/
• sequencing.md
• sfx.md
• silence-detection.md
• …and 5 more

SKILL.md (first lines)

## DSH package context

This skill is bundled with dsh-remotion. DSH plugin management owns updates to these skill files; do not run standalone `skills add`, `skills update`, or `remotion skills` commands to replace this bundle. Project dependencies and lockfiles are separate: preserve existing projects, and only upgrade their Remotion dependencies when the user requests it, then verify the project. Run commands in the user project, never in this installed plugin directory. The official instructions below apply within these package boundaries.


This is guidance for writing Remotion React Markup.
If this is not relevant, load Remotion Best Practices instead.

## Preserve user changes

Users may make edits in the code outside of the conversation.

If you detect a surprising change made in the meanwhile, don't overwrite it, assume it was intentional or ask for confirmation.

## General rules

Keep `useCurrentFrame()` in the smallest component that needs it. Extract
frame-dependent audio volume, titles, and overlays into their own components
instead of subscribing the whole composition or scene; otherwise unrelated
descendants re-render on every frame. Preserve the existing frame coordinates
when extracting across timing boundaries, and keep editable interpolations
inline on the item's props.

Inside a composition or scene component, get `fps` from `useVideoConfig()` for
all seconds-to-frames calculations, including timing props such as `from`,
`trimBefore` and `durationInFrames`. Keeping the expression on
the JSX node, such as `trimBefore={4 * fps}`, lets Studio edit the timing and
keeps it correct if the composition frame rate changes.

Drive animations using `useCurrentFrame()` and `interpolate()`.  
CSS `transition` or `animation` will not render correctly, they need to refactored.  
Tailwind animation class will not render correctly, they need to be refactored.

Use `Easing.bezier()` and `Easing.spring()` to customize timing.

Before choosing the markup hierarchy, read
editable timeline structure.
Choose editing units first, then the tracks or shared timing boundaries they
need. It includes a complete example with interactive components and their
registrations. For source-editable styles, schemas, and keyframes, see
Remotion Interactivity.

```tsx
import { useCurrentFrame, useVideoConfig, Easing, interpolate, Interactive } from "remotion";

export const FadeIn = () => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();

  return (
    <Interactive.Div
      name="Title"
      style={{
        opacity: interpolate(frame, [0, 2 * fps], [0, 1], {
          extrapolateRight: "clamp",
          extrapolateLeft: "clamp",
          easing: Easing.bezier(0.16, 1, 0.3, 1),
        }),
      }}
    >
      Hello World!
    </Interactive.Div>
  );
};
```

Keep the `interpolate()` call inline in the `style` prop.
Use `scale`, `translate`, `rotate` CSS properties over `transform`.

```tsx
// 👍 Inline editable keyframes and transform shorthands
style={{
  scale: interpolate(frame, [0, 100], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Easing.spring({damping: 200}),
    output: 'perceptual-scale' // For `scale` animations, use "output: 'perceptual-scale'"
  }),
  translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Easing.spring({damping: 200}),
  }),
  rotate: interpolate(frame, [0, 100], ["20deg", "90deg"], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Easing.spring({damping: 200}),
  }),
}}

// 👎 Non-inline values and transform strings become harder to edit in Studio
const scale = interpolate(frame, [0, 100], [0, 1]);

style={{
  transform: `scale(${scale})`,
}}
```

## Assets

Place assets in the `public/` folder at your project root.
Use `staticFile()` to reference files from the `public/` folder.

## Media components

Add video and audio using `<Video>` and `<Audio>` from `@remotion/media`.  
Add images using the `<CanvasImage>` component.
Add animated GIFs, APNG, WebP or AVIF images using `<AnimatedImage>`, use `@remotion/gif` if not using Chrome.
Use `staticFile()` for files in `public/` or pass a remote URL directly:

```tsx
import { Audio, Video } from "@remotion/media";
import { staticFile, CanvasImage, AnimatedImage } from "remotion";

export const MyComposition = () => {
  return (
    <>
      <Video src={staticFile("video.mp4")} style={{ opacity: 0.5 }} />
      <Audio src={staticFile("audio.mp3")} />

From STARDUSTLC666/dsh-remotion, MIT.

More from STARDUSTLC666/dsh-remotion