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​

RoughNotationHighlight.tsx
import {loadFont} from '@remotion/google-fonts/CormorantGaramond';
import {AnnotationBehind} from '@remotion/rough-notation';
import React from 'react';
import {
  AbsoluteFill,
  Easing,
  Interactive,
  interpolate,
  useCurrentFrame,
} from 'remotion';

const {fontFamily} = loadFont('normal', {
  weights: ['700'],
  subsets: ['latin'],
});

export const RoughNotationHighlight: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f5f6f7',
      }}
    >
      <Interactive.Div
        name="Container"
        style={{
          fontSize: 80,
          fontWeight: 700,
          lineHeight: 1.1,
          color: '#171717',
          fontFamily,
          width: 800,
        }}
      >
        <Interactive.Span>A truly </Interactive.Span>
        <AnnotationBehind
          name="Highlight annotation"
          progress={interpolate(frame, [0, 25], [0, 1], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
            easing: [
              Easing.spring({
                damping: 200,
                mass: 1,
                stiffness: 100,
                allowTail: true,
                durationRestThreshold: 0.02,
                overshootClamping: false,
              }),
            ],
          })}
          type="highlight"
          color="rgba(255, 236, 79, 0.62)"
          maxRandomnessOffset={10}
          roughness={2.3}
          padding={{
            left: 20,
            right: 20,
            top: -30,
          }}
        >
          remarkable
        </AnnotationBehind>{' '}
        <Interactive.Span>end to the World cup</Interactive.Span>
      </Interactive.Div>
    </AbsoluteFill>
  );
};

API​

children​

The element or text to track.

progress​

Controls the annotation drawing progress from 0 to 1.

seed?​

Controls the random seed. Default: 1.

roughness?​

Controls how rough the annotation looks. The default is 3 for highlights and 1.5 for other annotation types.

maxRandomnessOffset?​

Controls how far points may be randomly offset from their ideal position. Default: 5.

bowing?​

Controls how much straight lines bow. Default: 1.

curveFitting?​

Controls how closely curves fit their points. Default: 0.95.

curveTightness?​

Controls curve tightness. Default: 0.

curveStepCount?​

Controls how many steps are used to approximate curves. Default: 9.

fillWeight?​

Controls the weight of fill strokes. Default: -1.

hachureAngle?​

Controls the hachure fill angle in degrees. Default: -41.

hachureGap?​

Controls the gap between hachure fill lines. Default: -1.

dashOffset?​

Controls dashed fill offset. Default: -1.

dashGap?​

Controls the gap between dashes. Default: -1.

zigzagOffset?​

Controls zigzag fill offset. Default: -1.

disableMultiStroke?​

Disables multi-stroke drawing when set to true.

disableMultiStrokeFill?​

Disables multi-stroke fills when set to true. Default: false.

preserveVertices?​

Preserves vertices when roughening the shape. Default: false.

fillShapeRoughnessGain?​

Controls how much roughness is added to filled shapes. Default: 1.5.

type​

The annotation type. Supported values are none, highlight, underline, strike-through, crossed-off, box, circle and bracket.

Use none to temporarily disable the annotation while keeping the component and its other props in place.

color?​

Stroke color. Default: currentColor.

strokeWidth?​

Stroke width in pixels. The default depends on the annotation type.

iterations?​

Number of rough strokes to draw. Default: 2 for most annotation types.

padding?​

Insets or outsets for the annotation rectangle.

Accepted by type="box", type="bracket", type="circle" and type="highlight".

For type="underline", only padding.top is used to move the underline down.

rtl?​

Draws supported line annotations right-to-left. Default: false.

box?​

Accepted by type="circle".

Use around to circle around the element bounds and inside to fit the ellipse inside the padded box.

bracketLeft?​

Accepted by type="bracket".

Draws the left bracket. Default: false.

bracketRight?​

Accepted by type="bracket".

Draws the right bracket. Default: true.

bracketTop?​

Accepted by type="bracket".

Draws the top bracket. Default: false.

bracketBottom?​

Accepted by type="bracket".

Draws the bottom bracket. Default: false.

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