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.

Rough 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>
  );
};

See also​