<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
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
| Browsers | Environments | |||||
|---|---|---|---|---|---|---|
Chrome | Firefox | Safari | ||||