Deft
Ask AI

Search

Search skills, authors and topics

remotion-dev / skills

remotion-markup

Structure Remotion scenes with markup patterns for layout, typography, and reusable video UI.

View sourceVideoRemotion

Install

npx skills add https://github.com/remotion-dev/skills --skill remotion-markup
metadata
tags: 3d, three, threejs

Using Three.js and React Three Fiber in Remotion

Follow React Three Fiber and Three.js best practices.
Only the following Remotion-specific rules need to be followed:

Prerequisites

First, the @remotion/three package needs to be installed.
If it is not, use the following command:

bash
npx remotion add @remotion/three # If project uses npmbunx remotion add @remotion/three # If project uses bunyarn remotion add @remotion/three # If project uses yarnpnpm exec remotion add @remotion/three # If project uses pnpm

Using ThreeCanvas

You MUST wrap 3D content in <ThreeCanvas> and include proper lighting.
<ThreeCanvas> MUST have a width and height prop.

tsx
import { ThreeCanvas } from "@remotion/three";import { useVideoConfig } from "remotion";
const { width, height } = useVideoConfig();
<ThreeCanvas width={width} height={height}>  <ambientLight intensity={0.4} />  <directionalLight position={[5, 5, 5]} intensity={0.8} />  <mesh>    <sphereGeometry args={[1, 32, 32]} />    <meshStandardMaterial color="red" />  </mesh></ThreeCanvas>;

No animations not driven by useCurrentFrame()

Shaders, models etc MUST NOT animate by themselves.
No animations are allowed unless they are driven by useCurrentFrame().
Otherwise, it will cause flickering during rendering.

Using useFrame() from @react-three/fiber is forbidden.

Animate using useCurrentFrame()

Use useCurrentFrame() to perform animations.

tsx
const frame = useCurrentFrame();const rotationY = frame * 0.02;
<mesh rotation={[0, rotationY, 0]}>  <boxGeometry args={[2, 2, 2]} />  <meshStandardMaterial color="#4a9eff" /></mesh>;

Using <Sequence> inside <ThreeCanvas>

The layout prop of any <Sequence> inside a <ThreeCanvas> must be set to none.

tsx
import { Sequence } from "remotion";import { ThreeCanvas } from "@remotion/three";
const { width, height } = useVideoConfig();
<ThreeCanvas width={width} height={height}>  <Sequence layout="none">    <mesh>      <boxGeometry args={[2, 2, 2]} />      <meshStandardMaterial color="#4a9eff" />    </mesh>  </Sequence></ThreeCanvas>;