<Box>v4.0.490

Draws an animated hand-drawn box around the text or element it wraps.

Example

MyComp.tsx
import {Box} from '@remotion/rough-notation';

export const MyComp: React.FC = () => {
  return (
    <Box
      progress={1}
      color="#fe0000"
      strokeWidth={8}
      iterations={1}
      roughness={0.9}
      padding={{left: 3, right: 6, top: -12, bottom: -5}}
    >
      box
    </Box>
  );
};

API

strokeWidth?

The stroke width in pixels. Default: 7.

iterations?

The number of rough strokes to draw. Default: 2.

padding?

Insets or outsets for the box. Accepts left, right, top and bottom.

Also accepts the common annotation props.

Compatibility

Browsers			Environments
Chrome	Firefox	Safari	Client-side rendering	Server-side rendering	Player	Studio

See also

• Text highlights
• <Bracket>