Erase Text for React

Erase Text lets the pointer rub the text out. The letter under the pointer fades away at once, and its neighbours with it, so sweeping across the line wipes a trail through it; once the pointer has passed, each letter lingers a moment, then drifts back, like chalk on a board that mends itself.

Use it for a playful headline or an interactive callout. To scramble the letters under the pointer instead, use Scrambled Text; to thicken them, Variable Proximity. It's CSS only: each letter knows whether it, or a neighbour one or two letters away, is under the pointer from sibling selectors (:hover + *, :has(+ :hover)), and a transition fades it out quickly and back slowly. No script runs, at rest or under the pointer.

Installation

Usage

import { EraseText } from "@/components/ui/erase-text";

<h2>
  <EraseText text="Sweep across to wipe the board" />
</h2>

Demos

Reach

reach is how far the eraser reaches past the letter under the pointer: 0 for that letter alone, a fine pencil eraser; 1 for one more on each side; 2, the default, for two, the outer ones half erased, a wide felt duster.

Words

by="words" erases whole words instead of letters, and suits scripts whose letters join, such as Arabic. duration is how long an erased letter or word takes to come back, 1200 ms by default.

Accessibility

Screen readers read the text once, from a visually hidden copy, never letter by letter. The text is whole whenever the pointer isn't on it, so keyboard users miss nothing. On a touch screen, the letters under a finger fade while it presses on them, where the browser marks pressed elements (:active), and come back when it lifts; a tap never leaves letters stuck erased, and scrolling past erases nothing. Erasing is a fade rather than movement, so it's the same with reduced motion.

FAQ

API Reference