<Underline>v4.0.490

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

Example

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

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

API

strokeWidth?

The stroke width in pixels. Default: 20.

iterations?

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

padding?

Accepts a top value to move the underline down from the text.

rtl?

Draws the underline right-to-left. 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
• <Highlight>