---
name: typography/gradient-text-reveal
title: Gradient Text & Text Reveal Effects
description: Eye-catching gradient text, animated text reveals, and kinetic typography effects.
tags: [typography, gradient, animation, reveal, kinetic]
source: linear.app, stripe.com, raycast.com, brad.co
---

# Gradient Text & Text Reveal

## Что это
Текст с градиентными цветами и анимированные текстовые эффекты. Создаёт визуальный акцент и "wow" момент.

## Типы градиентного текста

### 1. Linear Style (subtle diagonal gradient)
```css
.gradient-text-linear {
  background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.6) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
```

### 2. Stripe Style (colorful animated gradient)
```css
.gradient-text-stripe {
  background: linear-gradient(90deg, #ff6b35, #f7931e, #ffd700, #ff6b35);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
```

### 3. Accent Color (single-color gradient)
```css
.gradient-text-accent {
  background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
```

### 4. Brand Gradient (consistent with design system)
```css
:root {
  --gradient-brand: linear-gradient(135deg, #6366f1, #8b5cf6);
  --gradient-brand-green: linear-gradient(135deg, #10b981, #34d399);
  --gradient-brand-orange: linear-gradient(135deg, #f59e0b, #ef4444);
}
```

## Text Reveal Animations

### 1. Clip-path reveal
```javascript
gsap.from('.reveal-text', {
  clipPath: 'inset(0 100% 0 0)',
  duration: 1,
  ease: 'power3.inOut',
  delay: 0.3
});
```

### 2. Word-by-word reveal
```javascript
// Разбиваем заголовок на слова
const heading = document.querySelector('.hero h1');
const text = heading.textContent;
heading.innerHTML = text.split(' ')
  .map(word => `<span class="word">${word}</span>`)
  .join(' ');

// Анимация слов
gsap.from('.word', {
  opacity: 0,
  y: 30,
  duration: 0.5,
  stagger: 0.06,
  ease: 'power2.out',
  delay: 0.3
});
```

### 3. Character-by-character (kinetic typography)
```javascript
// Разбиваем на буквы для максимальной детализации
const text = 'Премиальный дизайн';
const container = document.querySelector('.kinetic-text');
container.innerHTML = '';

text.split('').forEach((char, i) => {
  const span = document.createElement('span');
  span.className = 'char';
  span.textContent = char === ' ' ? '\u00A0' : char;
  container.appendChild(span);
});

// Анимация букв
gsap.from('.char', {
  opacity: 0,
  y: 60,
  rotateX: -90,
  rotate: () => Math.random() * 40 - 20,
  duration: 0.8,
  stagger: 0.02,
  ease: 'back.out(1.7)',
  delay: 0.2
});
```

### 4. Scrolling text reveal (marquee-style)
```css
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
}

.marquee-text {
  display: inline-block;
  animation: marquee 20s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
```

## Scroll-based text effects

### 1. Parallax text
```javascript
gsap.to('.scroll-text', {
  y: -100,
  ease: 'none',
  scrollTrigger: {
    trigger: '.section',
    start: 'top bottom',
    end: 'bottom top',
    scrub: 1
  }
});
```

### 2. Text color shift on scroll
```javascript
ScrollTrigger.create({
  trigger: '.section',
  start: 'top center',
  end: 'bottom center',
  onUpdate: (self) => {
    const progress = self.progress;
    const r = Math.round(255 - progress * 100);
    const g = Math.round(100 + progress * 155);
    const b = Math.round(50 + progress * 200);
    document.querySelector('.highlight-text').style.color = `rgb(${r},${g},${b})`;
  }
});
```

### 3. Scale text on scroll
```javascript
gsap.from('.scale-text', {
  scale: 0.8,
  opacity: 0.3,
  scrollTrigger: {
    trigger: '.section',
    start: 'top 80%',
    end: 'bottom 50%',
    scrub: true
  }
});
```

## Font Pairing Rules

### Rule 1: Display + Sans
```css
--font-display: 'Clash Display', 'Inter', sans-serif;
--font-body: 'Inter', -apple-system, sans-serif;
```

### Rule 2: Monospace Accents
```css
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Использовать для: тиков, данных, технических деталей */
```

### Rule 3: Single Font Scale
```css
/* Один шрифт, полная шкала весов */
--font-primary: 'Inter';
/* weights: 300, 400, 500, 600, 700, 800, 900 */
```

## Anti-patterns

| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| Градиент `red → blue → green` | 2–3 связанных цвета |
| `h1 { font-size: 120px }` на мобильных | `clamp(2rem, 6vw, 4rem)` |
| Без `-webkit-background-clip` | Всегда указывать и vendor-prefixed |
| Моноширинный шрифт для основного текста | Моно для акцентов/технических данных |
| Градиент на белом фоне | Градиент на тёмном фоне (контраст) |

## CV Service Validation

```bash
# Проверить typography compliance
curl -s -X POST http://localhost:8001/design/analyze-dom \
  -H "Content-Type: application/json" \
  -d '{"html": "..."}' | python3 -c "
import sys, json
d = json.load(sys.stdin)
typ = d['analyzers'].get('typography_compliance', {})
print(f\"Typography: {typ.get('score', 'N/A')}/10\")
print(f\"  Scale ratio: {typ.get('scale_ratio', 'N/A')}\")
print(f\"  Min body: {typ.get('min_body_size', 'N/A')}\")
print(f\"  Font stack: {typ.get('font_stack', 'N/A')}\")
"
```