remotion-markup

Files (66)

• 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 6 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

Inside a composition or scene component, get `fps` from `useVideoConfig()` for
all seconds-to-frames calculations, including timing props such as `from`,
`trimBefore`, `durationInFrames`, and `premountFor`. 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.

Structure your markup according to Remotion Interactivity Best Practices.
Prefer `Interactive.withSchema({wrapInSequence: true, layout: 'absolute-fill'})`
for scenes with editable props. Their inner markup can return a fragment; the
wrapper handles layout and instance styles. Sized elements such as lower thirds
can keep the default layout and forward `style` to their own root. Register
reusable scenes as connected compositions.
Put timing directly on components that support it; avoid redundant `<Sequence>` wrappers.
Give every timed component that supports `premountFor` one second of premounting:
`premountFor={fps}`, where `fps` comes from `useVideoConfig()`. Apply this to
media, interactive components, `<Sequence>`, `<TransitionSeries.Sequence>`,
and `<TransitionSeries.Overlay>`, including timed components nested inside scenes. Premount the parent timeline item too
when a nested item needs to mount before the parent starts. A component without
`premountFor`, such as `<TransitionSeries.Transition>`, needs no substitute.

The Studio edits the JSX source node that created an item. Author every composition registration, clip, scene, layer and sequence that should be editable independently as its own JSX node, with its editable props inline.
Programmatic loops are suitable when the generated instances are intentionally controlled as one source template, not when users need to edit the instances
separately.

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

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

  return (
    <Interactive.Div
      name="Title"
      premountFor={fps}
      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, useVideoConfig } from "remotion";

export const MyComposition = () => {
  const {fps} = useVideoConfig();

  return (
    <>

From iqbalhasandev/claude-code-config, MIT.

More from iqbalhasandev/claude-code-config