Back to Remotion

Callout

packages/docs/docs/shapes/callout.mdx

4.0.4961.2 KB
Original Source

import {ShapeOptions} from "../../components/shapes/shapes-info"

Part of the @remotion/shapes package.

Renders an SVG element containing a callout shape.

Explorer

<Demo type="callout"/>

Example

tsx
import { Callout } from "@remotion/shapes";
import { AbsoluteFill } from "remotion";

export const MyComposition = () => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: "white",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Callout
        width={500}
        height={200}
        pointerLength={40}
        pointerBaseWidth={60}
        pointerDirection="down"
        cornerRadius={20}
        fill="#20232a"
      />
    </AbsoluteFill>
  );
};

Props

<ShapeOptions shape="callout" all />

See also

<ul> <li> <a href="/docs/shapes/make-callout"><code>makeCallout()</code></a> </li> <li> <a href="/docs/shapes"> <code>@remotion/shapes</code> </a> </li> <li> <a href="https://github.com/remotion-dev/remotion/blob/main/packages/shapes/src/components/callout.tsx"> Source code for this component </a> </li> </ul>