Updated: Masked Heading
By Steven Van ·
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 text animation, has been updated 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
An open-source collection of 200+ animated, interactive React components and micro-interactions.
View React Bits →