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 properly for SEO. Choose the heading tag (H1 to H6, or P) and the component renders the real HTML element, while the overlay is hidden from search engines and screen readers so your heading text stays clean.
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.
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 properly for SEO. Choose the heading tag (H1 to H6, or P) and the component renders the real HTML element, while the overlay is hidden from search engines and screen readers so your heading text stays clean.
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.
