Funnyhust/POC_Kaenx_Creator

Remotion

Remotion allows you to create videos programmatically using React.

When to Use This Skill

• Creating videos with React components
• Animating elements using frame-based timing
• Managing audio and video assets in a timeline
• Generating dynamic video content based on data
• Configuring video compositions and rendering

How to Use

The knowledge in this skill is organized into specific resources:

Core Concepts

• Compositions - Defining compositions, stills, and folder structures
• Sequencing - Managing timeline with delays, trims, and sequences
• Timing - Interpolation, easing, and spring animations
• Transitions - Scene transitions and patterns

Working with Assets

• Assets - Importing images, videos, audio, and fonts
• Audio - Handling audio tracks, volume, and trimming
• Videos - Embedding and manipulating video files
• Images - Using the Img component for images
• GIFs - Using GIFs in your timeline
• Lottie - Embedding Lottie animations
• Fonts - Loading custom and Google fonts

Animation & visual Effects

• Animations - Fundamental animation patterns
• Text Animations - Typography effects
• 3D - Using Three.js and React Three Fiber
• Charts - Data visualization and charts
• Tailwind - Styling with Tailwind CSS

Captions & Metadata

• Display Captions - Rendering captions on screen
• Import SRT - Using subtitle files
• Transcribe - Transcribing audio to text
• Metadata - Dynamic composition properties

Utilities

• Get Video Duration - Measuring video length
• Get Audio Duration - Measuring audio length
• Get Video Dimensions - Checking video size
• Extract Frames - Getting frames from video
• Can Decode - Browser codec support check
• Measure Text - Calculating text size
• Measure DOM - Measuring elements

Best Practices

• Use useCurrentFrame() and interpolate() for smooth seekable animations.
• Prefer Sequence for arranging components in time over conditional rendering.
• separate logic from presentation components.
• Use staticFile() for referencing assets in the public folder.

Examples

Basic composition

import {Composition} from 'remotion';
import {MyVideo} from './MyVideo';

export const RemotionVideo: React.FC = () => {
  return (
    <Composition
      id="MyVideo"
      component={MyVideo}
      durationInFrames={150}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

Simple Animation

import {spring, useCurrentFrame, useVideoConfig} from 'remotion';

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

  const scale = spring({
    frame,
    fps,
  });

  return <div style={{transform: \`scale(\${scale})\`}}>Hello Remotion</div>;
};