Chapter 902: <Highlight>

Core Idea

Draws an animated marker highlight behind the text or element it wraps.

Key Concepts

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

Code Examples

import {
  AbsoluteFill,
  Easing,
  Interactive,
  interpolate,
  useCurrentFrame,
} from 'remotion';

const {fontFamily} = loadFont('normal', {
  weights: ['700'],
  subsets: ['latin'],
});

export const RoughNotationHighlight: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f5f6f7',
      }}
    >
      <Interactive.Div
        name="Container"
        style={{
          fontSize: 80,
          fontWeight: 700,
          lineHeight: 1.1,
          color: '#171717',
          fontFamily,
          width: 800,
        }}
      >
        <Interactive.Span>A truly </Interactive.Span>
        <Highlight
          name="Highlight annotation"
          progress={interpolate(frame, [0, 25], [0, 1], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
            easing: [
              Easing.spring({
                damping: 200,
                mass: 1,
                stiffness: 100,
                allowTail: true,
                durationRestThreshold: 0.02,
                overshootClamping: false,
              }),
            ],
          })}
          color="rgba(255, 236, 79, 0.62)"
          maxRandomnessOffset={10}
          roughness={2.3}
          padding={{
            left: 20,
            right: 20,

// ...(truncated)

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

Key Takeaways

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

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.