spring-in

1import { interpolate, useVideoConfig } from "remotion";
2import { scaleFont } from "@/remotion/lib/layout";
3import {
4  resolveOrigin,
5  useEnterExit,
6  type MotionPrimitiveProps,
7  type MotionSpring,
8  type TransformOrigin,
9} from "@/remotion/lib/motion-primitive";
10import { MotionWrapper } from "@/remotion/lib/motion-wrapper";
11 
12export type SpringInProps = Omit<MotionPrimitiveProps, "spring"> & {
13  /** Spring preset name, or an override on the snappy config. */
14  config?: MotionSpring;
15  /** Scale at the start of the entrance. */
16  from?: number;
17  /** How far it rises as it springs. Scales with the frame by default. */
18  travel?: number;
19  origin?: TransformOrigin;
20};
21 
22/**
23 * The physical entrance: scale and a short rise driven by a spring, so the
24 * element carries weight into its stop instead of easing to a halt.
25 *
26 * `config="bouncy"` overshoots — both the scale and the rise pass their
27 * resting value and settle back, which is the point of using a spring at all.
28 */
29export const SpringIn: React.FC<SpringInProps> = ({
30  children,
31  config = "snappy",
32  from = 0.88,
33  travel: travelProp,
34  origin = "center",
35  block,
36  style,
37  className,
38  ...motionProps
39}) => {
40  const { width } = useVideoConfig();
41  const travel = travelProp ?? scaleFont(14, width);
42  const { motion, displace, opacity, sign } = useEnterExit({
43    ...motionProps,
44    spring: config,
45  });
46 
47  const scale = interpolate(motion, [0, 1], [from, 1]);
48 
49  return (
50    <MotionWrapper
51      block={block}
52      className={className}
53      style={{
54        ...style,
55        opacity,
56        scale,
57        translate: `0px ${displace * travel * sign}px`,
58        transformOrigin: resolveOrigin(origin),
59      }}
60    >
61      {children}
62    </MotionWrapper>
63  );
64};