Chapter 898: <Box>

Core Idea

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

Key Concepts

• Example
• API
• strokeWidth?
• iterations?
• padding?
• Compatibility
• See also

Code Examples

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

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

Key Takeaways

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

Connects To

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