rotate-in

1import { interpolate } from "remotion";
2import {
3  resolveOrigin,
4  useEnterExit,
5  type MotionPrimitiveProps,
6  type TransformOrigin,
7} from "@/remotion/lib/motion-primitive";
8import { MotionWrapper } from "@/remotion/lib/motion-wrapper";
9 
10export type RotateAxis = "z" | "x" | "y";
11 
12export type RotateInProps = MotionPrimitiveProps & {
13  /** Angle it starts at, in degrees. Negative tilts anticlockwise. */
14  degrees?: number;
15  /** `z` spins in plane; `x` and `y` hinge in depth. */
16  axis?: RotateAxis;
17  /** Depth of the 3D projection for the `x` and `y` axes. */
18  perspective?: number;
19  /** Scale at the start — a rotation that also grows reads as one gesture. */
20  scaleFrom?: number;
21  /** Point the rotation pivots around. */
22  origin?: TransformOrigin;
23};
24 
25/**
26 * Swings into place. On the `x`/`y` axes it hinges in depth, which is how a
27 * card or a panel should arrive; `z` is the in-plane spin for badges and marks.
28 */
29export const RotateIn: React.FC<RotateInProps> = ({
30  children,
31  degrees = -12,
32  axis = "z",
33  perspective = 1200,
34  scaleFrom = 0.96,
35  origin = "center",
36  block,
37  style,
38  className,
39  ...motionProps
40}) => {
41  const { motion, opacity } = useEnterExit(motionProps);
42  const rotation = interpolate(motion, [0, 1], [degrees, 0]);
43  const scale = interpolate(motion, [0, 1], [scaleFrom, 1]);
44 
45  return (
46    <MotionWrapper
47      block={block}
48      className={className}
49      style={{
50        ...style,
51        opacity,
52        scale,
53        transformOrigin: resolveOrigin(origin),
54        ...(axis === "z"
55          ? { rotate: `${rotation}deg` }
56          : {
57              transform: `perspective(${perspective}px) rotate${axis.toUpperCase()}(${rotation}deg)`,
58              transformStyle: "preserve-3d",
59            }),
60      }}
61    >
62      {children}
63    </MotionWrapper>
64  );
65};