🎬 text-reveal.js

Reveal text letter-by-letter as it enters the viewport.

Tiny (<1 KB), no dependencies.

Demo ✨

Live Demo

Features

• Letter-by-letter reveal: Animates text one letter at a time when it enters the viewport.
• Adaptive staggered delays: Short and long strings finish animating at the same time for a natural look.
• Tiny and dependency-free: Under 1Kb minified
• Per-element customization: Override duration, minDelay, maxDelay, and threshold using data-* attributes.
• Scroll-triggered: Uses IntersectionObserver under the hood for efficiency and performance
• Flexible styling: Customize transforms, easing, and timing via CSS.
• Accessibility friendly: Can respect prefers-reduced-motion with CSS.

Installation

npm install text-reveal

Usage

import textReveal from 'text-reveal';

textReveal();

Options

textReveal({
  selector: '.my-custom-selector',
  duration: 1.5,
  minDelay: 0.02,
  maxDelay: 0.2,
  threshold: 0.3,
});

| Option | Type | Default | Description | | --------- | ------ | -------------- | ------------------------------- | | selector | string | .text-reveal | Target elements to animate | | duration | number | 1 | Total reveal duration (seconds) | | minDelay | number | 0.01 | Minimum per-letter delay | | maxDelay | number | 0.1 | Maximum per-letter delay | | threshold | number | 0.1 | IntersectionObserver threshold |

CSS

Add CSS to style the animation. The JavaScript sets transition-delay automatically:

@media (prefers-reduced-motion: no-preference) {
  .text-reveal .letter {
    opacity: 0;
    transform: translateY(3px);
    will-change: opacity, transform;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  }

  .text-reveal .letter.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

Browser Support

• Works in all modern browsers that support IntersectionObserver
• No dependencies

License

MIT