---
name: typography/kinetic-text
title: Kinetic Typography
description: Animated text — scroll-triggered reveals, word-by-word animations, text masking.
tags: [typography, kinetic, animation, reveal, text]
source: brad.co, amppz.com, godly.website, linear.app
---

# Kinetic Typography

## 1. Scroll Reveal Text

```html
<h1 class="kinetic-text">
  <span class="word">Превосходство</span>
  <span class="word">в</span>
  <span class="word">деталях</span>
</h1>
```

```css
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}
.word.revealed {
  opacity: 1;
  transform: translateY(0);
}
```

## 2. Typewriter Effect

```css
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid #6366f1;
  animation: typing 3s steps(40) forwards, blink 0.7s step-end infinite;
}
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes blink {
  50% { border-color: transparent; }
}
```

## Anti-patterns

| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| Без `prefers-reduced-motion` | Уважать настройки |
| 500ms transition | 0.6–1s для читаемости |