Text reveal

Построчное появление без скрытого контента.

MotiontypographyrevealWAAPI

Когда использовать

Reveal a heading once without damaging reading or accessibility.

Решения для реализации

  1. Keep accessible whole text and mark purely decorative duplicates aria-hidden.
  2. Prefer line wrappers with a short stagger to per-character markup.
  3. Use a visible default and IntersectionObserver for entrance detection.
  4. Avoid font-dependent runtime splits or recompute after fonts load.

Как проверить результат

  • Text remains visible without JavaScript.
  • Screen readers do not announce individual letters.
  • Reduced motion shows the final state.

Работающий пример

Файлы

SKILL.mdcomponents/demos.tsx
WEBCRAFT © 2026Оригинальные исходники и интерактивные примерыMIT License