Layer a word over your headline in a completely different font, and it stays exactly where you put it at every screen size.

Target Word Overlay lets you pick any word in a headline and place accent text directly on top of it. A serif headline with a handwritten scribble over one word, a bold word stamped over its outlined twin, a splash of colour on the word that matters. The overlay is anchored to the word itself, not the frame, so when your headline wraps or reflows across breakpoints, the accent moves with it. No drifting, no manual repositioning, no stacked text layers to babysit.

It's also built with SEO in mind. Choose the heading tag (H1 to H6, or P) and the component renders the real HTML element, while the overlay is marked as decorative so it's skipped by screen readers.

Features

Fully responsive

Independent font controls for the headline and the overlay

Separate colour controls for both layers

Semantic tag selector (H1 to H6, P) for SEO

14 blend modes for the overlay

Offset, scale and rotation controls for a hand-placed feel

Layer the overlay above or behind the word

Option to hide the original word while keeping its space

Text alignment and full typographic controls (size, weight, spacing, line height)

Works with any font in your project. Set font sizes per breakpoint using Framer's property overrides.