FPS converter

This snippet is useful if you have designed your video with a different frame rate than you want to render in the end. Wrap your markup in the <FpsConverter> component override the time of it's children to achieve a different FPS.

FpsConverter.tsx
tsx
import React, { useContext, useMemo } from "react";
import { Internals, TimelineContextValue } from "remotion";
 
export const FpsConverter: React.FC<{
  originalFps: number;
  newFps: number;
  children: React.ReactNode;
}> = ({ originalFps, newFps, children }) => {
  const context = useContext(Internals.Timeline.TimelineContext);
  const ratio = originalFps / newFps;
 
  const value: TimelineContextValue = useMemo(() => {
    return {
      ...context,
      frame: context.frame * ratio,
    };
  }, [context, ratio]);
 
  return (
    <Internals.Timeline.TimelineContext.Provider value={value}>
      {children}
    </Internals.Timeline.TimelineContext.Provider>
  );
};

FpsConverter.tsx
tsx
import React, { useContext, useMemo } from "react";
import { Internals, TimelineContextValue } from "remotion";
 
export const FpsConverter: React.FC<{
  originalFps: number;
  newFps: number;
  children: React.ReactNode;
}> = ({ originalFps, newFps, children }) => {
  const context = useContext(Internals.Timeline.TimelineContext);
  const ratio = originalFps / newFps;
 
  const value: TimelineContextValue = useMemo(() => {
    return {
      ...context,
      frame: context.frame * ratio,
    };
  }, [context, ratio]);
 
  return (
    <Internals.Timeline.TimelineContext.Provider value={value}>
      {children}
    </Internals.Timeline.TimelineContext.Provider>
  );
};

Usage
tsx
export const Converted: React.FC = () => {
  return (
    <FpsConverter newFps={29.97} originalFps={60}>
      <MyComp></MyComp>
    </FpsConverter>
  );
};

Usage
tsx
export const Converted: React.FC = () => {
  return (
    <FpsConverter newFps={29.97} originalFps={60}>
      <MyComp></MyComp>
    </FpsConverter>
  );
};