createAnnotation()v4.0.489

Creates a set of components that let you place an annotation separately from the element it tracks.

Use this when the annotation should be rendered in another layer.

Example

MyComp.tsx
import {createAnnotation} from '@remotion/rough-notation';
import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';

const annotation = createAnnotation();

export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();
  const progress = spring({fps, frame, durationInFrames: 45});

  return (
    <annotation.Container>
      <AbsoluteFill>
        <annotation.Annotation
          progress={progress}
          type="box"
          color="red"
          strokeWidth={8}
          padding={{left: 20, right: 20, top: 12, bottom: 12}}
        />
      </AbsoluteFill>
      <AbsoluteFill style={{justifyContent: 'center', alignItems: 'center'}}>
        <annotation.Tracker>Tracked text</annotation.Tracker>
      </AbsoluteFill>
    </annotation.Container>
  );
};

API

Returns an object with three React components.

Container

Wraps the Tracker and Annotation components.

Tracker

Tracks the position and size of its children.

Annotation

Draws the annotation for the current tracker rectangle.

Accepts progress, seed, roughOptions and one of the options described in annotationConfig.

Compatibility

Browsers			Environments
Chrome	Firefox	Safari	Client-side rendering	Server-side rendering	Player	Studio

See also

• <AnnotationBehind>
• <AnnotationOnTop>
• annotationConfig