Skip to main content

Text highlights

Highlighting text can guide attention without changing the layout of the sentence. Animate the highlight separately from the text so the reader can first parse the words, then notice the emphasis.

Word highlight​

Use <AnnotationBehind> from @remotion/rough-notation for a hand-drawn highlight. It works well when the video already has editorial, educational or presentation-style graphics.

Show code
RoughHighlight.tsx
import {loadFont} from '@remotion/google-fonts/CormorantGaramond';
import {AnnotationBehind} from '@remotion/rough-notation';
import {
  AbsoluteFill,
  Easing,
  Interactive,
  interpolate,
  useCurrentFrame,
} from 'remotion';

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

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

  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
      }}
    >
      <Interactive.Div
        style={{
          fontSize: 80,
          fontWeight: 700,
          lineHeight: 1.1,
          color: '#171717',
          fontFamily,
          width: 800,
        }}
      >
        <Interactive.Span>The turning point was </Interactive.Span>
        <AnnotationBehind
          name="Rough highlight"
          progress={interpolate(frame, [0, 28], [0, 1], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
            easing: [
              Easing.spring({
                damping: 200,
                mass: 1,
                stiffness: 100,
                allowTail: true,
                durationRestThreshold: 0.02,
                overshootClamping: false,
              }),
            ],
          })}
          type="highlight"
          color="rgba(255, 236, 79, 0.62)"
          roughness={2.3}
          maxRandomnessOffset={10}
          padding={{
            left: 20,
            right: 20,
            top: -30,
          }}
        >
          obvious
        </AnnotationBehind>
        <Interactive.Span>.</Interactive.Span>
      </Interactive.Div>
    </AbsoluteFill>
  );
};

Circle marker​

Use <AnnotationOnTop> with type="circle" when the annotation should sit above the text. This works well for calling out a single word without covering it.

Show code
RoughCircle.tsx
import {loadFont} from '@remotion/google-fonts/CormorantGaramond';
import {AnnotationOnTop} from '@remotion/rough-notation';
import React from 'react';
import {
  AbsoluteFill,
  Easing,
  Interactive,
  interpolate,
  useCurrentFrame,
} from 'remotion';

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

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

  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
      }}
    >
      <Interactive.Div
        style={{
          fontSize: 80,
          fontWeight: 700,
          lineHeight: 1.1,
          color: '#171717',
          fontFamily,
          width: 800,
        }}
      >
        <Interactive.Span>How much </Interactive.Span>
        <AnnotationOnTop
          name="Circle annotation"
          progress={interpolate(frame, [0, 24], [0, 1], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
            easing: [
              Easing.spring({
                damping: 200,
                mass: 1,
                stiffness: 100,
                allowTail: true,
                durationRestThreshold: 0.02,
                overshootClamping: false,
              }),
            ],
          })}
          type="circle"
          roughness={0.6}
          bowing={14.4}
          strokeWidth={12}
          color="rgba(37, 99, 235, 0.57)"
          iterations={1}
          padding={{
            top: -15,
            left: -29,
            right: -22,
            bottom: -5,
          }}
          curveFitting={0.98}
          curveStepCount={25}
        >
          circular
        </AnnotationOnTop>{' '}
        <Interactive.Span>financing is in AI?</Interactive.Span>
      </Interactive.Div>
    </AbsoluteFill>
  );
};

See also​