# Updated: Masked Heading

By Steven Van · 2026-10-13

Masked Heading adds letter-by-letter and focus-pull entrances, a cursor light that restores colour, and outlined letters that the image fills.

Masked Heading, the [React Bits](<https://creatorstoolbox.com/resources/react-bits>) text animation, has [been updated](<https://reactbits.dev/text-animations/masked-heading>) with two new entrances and a cursor effect. The component shows a drifting colour mesh or an image through a headline.

## What changed

- Two new entrances: letters growing in one by one, and a focus pull.

- A soft light that follows the cursor and brings back full colour.

- An outline option, where letters are drawn as thin strokes that the image fills as it arrives.

## Installing it

The component page offers JavaScript or TypeScript, with plain CSS or Tailwind. The TypeScript and Tailwind version installs with npx shadcn@latest add @react-bits/MaskedHeading-TS-TW. The preview, customisation controls and source tabs need JavaScript enabled.

![React Bits](<https://reactbits.dev/favicon.ico>)

React Bits

An open-source collection of 200+ animated, interactive React components and micro-interactions.

[View React Bits →](<https://creatorstoolbox.com/resources/react-bits>)

Sources

[Original source](<https://reactbits.dev/text-animations/masked-heading>)

[Read Updated: Masked Heading on Creators Toolbox](<https://creatorstoolbox.com/blog/react-bits-updated-masked-heading>)

---
Canonical source: https://creatorstoolbox.com/blog/react-bits-updated-masked-heading