Rotate In
Swing into place in plane, or hinged in depth on the x or y axis.
PrimitivePrimitives
rotate-in30fps · 960×540
Install
$ npx remotion-ui@latest add rotate-inRotates from degrees to 0 while a small scale change ties the two into one gesture.
axis="x" and axis="y" hinge in depth under perspective, which is how a card or a panel should arrive; z is the in-plane spin for badges and marks.
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, spring, exit, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { RotateIn } from "@/remotion/primitives/rotate-in";
<RotateIn axis="x" degrees={-24} origin="bottom">
<div>Hinge into place</div>
</RotateIn>API Reference
| 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. |
| spring | "smooth" | "snappy" | "bouncy" | Partial<SpringConfig> | boolean | - | Drive the entrance with a spring instead of the ease-out curve. |
| exit | boolean | false | Animate back out, landing on the last frame of the surrounding Sequence. |
| exitInFrames | number | 70% of durationInFrames | Length of the exit. Exits are shorter than entrances. |
| exitAtInFrames | number | - | Frame the exit starts on, overriding the end-of-window timing. |
| exitTravel | number | 0.6 | Share of the enter distance the exit travels. |
| exitDirection | "reverse" | "continue" | "reverse" | reverse leaves the way it came in, continue carries on through. |
| block | boolean | false | Fill the parent's width instead of shrink-wrapping the child. |
| style | CSSProperties | - | Styles merged onto the wrapper. |
| degrees | number | -12 | Angle it starts at. Negative tilts anticlockwise. |
| axis | "z" | "x" | "y" | "z" | z spins in plane; x and y hinge in depth. |
| perspective | number | 1200 | Depth of the 3D projection for the x and y axes. |
| scaleFrom | number | 0.96 | Scale at the start — a rotation that also grows reads as one gesture. |
| origin | TransformOrigin | "center" | Point the rotation pivots around. |