<Bracket>v4.0.490

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

Example

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

export const MyComp: React.FC = () => {
  return (
    <Bracket
      progress={1}
      color="#dc2626"
      strokeWidth={8}
      roughness={1}
      bowing={3}
      bracketLeft
      bracketRight
      bracketTop
      bracketBottom
      padding={{top: -11}}
    >
      this
    </Bracket>
  );
};

API

strokeWidth?

The stroke width in pixels. Default: 20.

padding?

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

bracketLeft?

Draws the left bracket. Default: false.

bracketRight?

Draws the right bracket. Default: true.

bracketTop?

Draws the top bracket. Default: false.

bracketBottom?

Draws the bottom bracket. Default: false.

Also accepts the common annotation props.

Compatibility

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

See also

• Text highlights
• <Box>