@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/[email protected]

This assumes you are currently using v4.0.490 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/[email protected]

This assumes you are currently using v4.0.490 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/[email protected]

This assumes you are currently using v4.0.490 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/[email protected]

This assumes you are currently using v4.0.490 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. They support editable text and font controls, as well as the following <Sequence> props: durationInFrames, from, trimBefore, freeze, hidden, name and showInTimeline.

License

MIT