Skip to main content

<AnnotationOnTop>v4.0.489

Draws a rough annotation over the element it wraps.

Use it for annotations that should cover the text or element, such as underlines and crossed-off marks.

Example​

MyComp.tsx
import {AnnotationOnTop} 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'}}>
      <AnnotationOnTop
        progress={progress}
        type="underline"
        color="currentColor"
        strokeWidth={12}
      >
        Underlined text
      </AnnotationOnTop>
    </AbsoluteFill>
  );
};

API​

Accepts the same annotation props as <AnnotationBehind>.

It 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​