PrimitivePrimitives

rotate-in30fps · 960×540

Three layers in your repo

Motion primitives you can edit

Scenes for hooks, charts, and captions

Three layers in your repo

Motion primitives you can edit

Scenes for hooks, charts, and captions

Install

$ npx remotion-ui@latest add rotate-in

Rotates from degrees to 0 while fading opacity from 0 to 1.

Agent notes

Install first, then import the copied source component locally. AI guide →

Import

@/remotion/primitives/rotate-in

Use when: frame-level motion primitives and reusable animation wrappers.
Customize: durationInFrames, delayInFrames, degrees, plus copied source for timing, layout, colors, and typography.
Rule: do not import this component from the remotion-ui npm package; it is copied into your project.

Usage

Example

import { RotateIn } from "@/remotion/primitives/rotate-in";

<RotateIn degrees={-12} durationInFrames={30}>
  <div>Rotate in</div>
</RotateIn>

Prop	Type	Default	Description
children*	ReactNode	-	Content to animate.
durationInFrames	number	30	Length of the enter animation in frames.
delayInFrames	number	0	Frames to wait before the animation starts.
degrees	number	-10	Starting rotation in degrees.