Skip to main content

<AnnotationBehind>v4.0.489

Draws a rough annotation behind the element it wraps.

Use it for highlights, circles, boxes, brackets, underlines, strike-throughs and crossed-off marks.

Example​

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

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

  return (
    <AbsoluteFill style={{justifyContent: 'center', alignItems: 'center'}}>
      <div style={{fontSize: 96}}>
        This is{' '}
        <AnnotationBehind
          progress={progress}
          type="highlight"
          color="yellow"
          iterations={8}
        >
          important
        </AnnotationBehind>
      </div>
    </AbsoluteFill>
  );
};

API​

children​

The element or text to track.

progress​

Controls the annotation drawing progress from 0 to 1.

seed?​

Controls the random roughness. Default: 1.

roughOptions?​

Overrides options passed to roughjs.

Annotation options​

Pass one of the options described in annotationConfig.

<AnnotationBehind> is an interactive component in Remotion Studio and also accepts the following <Sequence> props: durationInFrames, from, trimBefore, freeze, hidden, name and showInTimeline.

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​