Chapter 899: <Bracket>

Core Idea

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

Key Concepts

• Example
• API
• strokeWidth?
• padding?
• bracketLeft?
• bracketRight?
• bracketTop?
• bracketBottom?

Code Examples

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>
  );
};

• What it demonstrates: Usage pattern for <Bracket> from the official docs.

Key Takeaways

1. Understand example when working with <Bracket>.
2. Understand api when working with <Bracket>.
3. Understand strokewidth? when working with <Bracket>.
4. Understand padding? when working with <Bracket>.
5. Understand bracketleft? when working with <Bracket>.

Connects To

• api: related page in the Rough Notation (@remotion/rough-notation) section.
• box: related page in the Rough Notation (@remotion/rough-notation) section.
• Circle: related page in the Rough Notation (@remotion/rough-notation) section.