Chapter 904: <Underline>

Core Idea

Draws an animated hand-drawn underline below the text or element it wraps.

Key Concepts

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

Code Examples

export const MyComp: React.FC = () => {
  return (
    <Underline
      progress={1}
      color="rgba(53, 95, 143, 0.71)"
      strokeWidth={10}
      iterations={3}
    >
      this
    </Underline>
  );
};

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

Key Takeaways

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

Connects To

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