scale-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 ScaleInProps = MotionPrimitiveProps & {
11  /** Scale at the start of the entrance. */
12  from?: number;
13  /** Corner or edge the scale grows out of. */
14  origin?: TransformOrigin;
15};
16 
17/**
18 * Grows into place from just under full size.
19 *
20 * `from` stays close to 1 on purpose: a card scaling up from 0.5 reads as a
21 * zoom, which is a camera move, not an arrival. Anything below ~0.85 wants a
22 * spring behind it — pass `spring` to get one.
23 */
24export const ScaleIn: React.FC<ScaleInProps> = ({
25  children,
26  from = 0.92,
27  origin = "center",
28  block,
29  style,
30  className,
31  ...motionProps
32}) => {
33  const { motion, opacity } = useEnterExit(motionProps);
34  const scale = interpolate(motion, [0, 1], [from, 1]);
35 
36  return (
37    <MotionWrapper
38      block={block}
39      className={className}
40      style={{
41        ...style,
42        opacity,
43        scale,
44        transformOrigin: resolveOrigin(origin),
45      }}
46    >
47      {children}
48    </MotionWrapper>
49  );
50};