@remotion/rough-notationv4.0.490

Animated marker highlights, circles, boxes, underlines and other hand-drawn text annotations for Remotion videos.

Remotion CLI

npx remotion add @remotion/rough-notation

npm

npm i --save-exact @remotion/rough-notation@4.0.533

This assumes you are currently using v4.0.533 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

bun

pnpm i @remotion/rough-notation@4.0.533

This assumes you are currently using v4.0.533 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

pnpm

bun i @remotion/rough-notation@4.0.533

This assumes you are currently using v4.0.533 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

yarn

yarn --exact add @remotion/rough-notation@4.0.533

This assumes you are currently using v4.0.533 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

APIs

<Box>

Draw a box around text

<Bracket>

Draw brackets beside text

<Circle>

Circle text

<CrossedOff>

Cross off text with two strokes

<Highlight>

Draw a marker highlight behind text

<StrikeThrough>

Strike through text with one line

<Underline>

Underline text

Common props

Every component wraps the text or element passed as children and accepts these props:

children

The text or element to annotate.

style?

CSS styles applied to the tracked content. Text and font styles can also be edited in Remotion Studio.

progress

Controls how much of the annotation is drawn. Use a value between 0 and 1.

disabled?

Set to true to temporarily hide the annotation while keeping the component and its other props in place. Default: false.

seed?

Controls the generated shape. Change the integer on every frame to animate the shape. Default: 1.

color?

The annotation color. Default: currentColor.

roughness?

Controls how rough the annotation looks. The default is 3 for <Highlight> and 1.5 for the other components.

maxRandomnessOffset?

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

bowing?

Controls how much straight lines bow. Default: 1.

disableMultiStroke?

Set to true to prevent Rough.js from drawing multiple strokes for a line. Default: false.

preserveVertices?

Preserves vertices when roughening a shape. Default: false.

The components are interactive in Remotion Studio and support editable text and font controls.

Inherited props

Every annotation component inherits from, durationInFrames, trimBefore, playbackRate, freeze, hidden, name and showInTimeline from <Sequence>.

From v4.0.528, it also inherits premountFor, postmountFor, styleWhilePremounted and styleWhilePostmounted from <Sequence>.

License

MIT