motion-wrapper

1import type { CSSProperties, ReactNode } from "react";
2 
3export type MotionWrapperProps = {
4  children: ReactNode;
5  style?: CSSProperties;
6  className?: string;
7  /**
8   * Fill the parent's width instead of shrink-wrapping the child. Needed when
9   * the child sizes itself from its container — a bar, a justified headline —
10   * because an inline-block parent collapses to the content width.
11   */
12  block?: boolean;
13};
14 
15/**
16 * Inline wrapper for enter/exit animations.
17 * Use this instead of AbsoluteFill so siblings stack in flex/grid layout.
18 * @see skills/remotion/remotion-create/video-layout.md
19 */
20export const MotionWrapper: React.FC<MotionWrapperProps> = ({
21  children,
22  style,
23  className,
24  block = false,
25}) => (
26  <div
27    className={className}
28    style={{
29      display: block ? "block" : "inline-block",
30      ...(block ? { width: "100%" } : {}),
31      verticalAlign: "top",
32      ...style,
33    }}
34  >
35    {children}
36  </div>
37);