Chapter 381: Text highlights

Core Idea

We recommend @remotion/rough-notation to annotate text to add marker highlights, encircle words, box or strike through parts.

Key Concepts

• Highlight
• Underline
• Strike-through
• Crossed-off
• Box
• Bracket
• Circle marker
• Animating the seed

Code Examples

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

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

const containerStyle: React.CSSProperties = {
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#fff',
};

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

  return (
    <AbsoluteFill style={containerStyle}>
      <Interactive.Div
        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 Text highlights from the official docs.

Key Takeaways

1. Understand highlight when working with Text highlights.
2. Understand underline when working with Text highlights.
3. Understand strike-through when working with Text highlights.
4. Understand crossed-off when working with Text highlights.
5. Understand box when working with Text highlights.

Connects To

• Clipper: related page in the Studio, Player & Editing section.
• Design Systems: related page in the Studio, Player & Editing section.
• Editor Starter: related page in the Studio, Player & Editing section.