remotion-markup

Files (74)

• 3d.md
• SKILL.md
• openai.yaml · agents/
• arabic-text.md
• remotion-icon.png · assets/
• remotion-icon.svg · assets/
• audio-visualization.md
• audio.md
• calculate-metadata.md
• color-correction.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
• map.md
• mapbox.md
• maplibre.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.png · remotion-maps/assets/
• 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/
• …and 14 more

SKILL.md (first lines)

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")} />
      <CanvasImage
        src={staticFile("logo.png")}
        style={{ width: 100, height: 100 }}
      />
      <Video src="https://remotion.media/video.mp4" />

From guanyang/open-agent-hub, MIT.

More from guanyang/open-agent-hub