wow-design-wiki/typography/gradient-text-reveal.md

name, title, description, tags, source

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

Gradient Text & Text Reveal

Что это

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

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

1. Linear Style (subtle diagonal gradient)

.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)

.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)

.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)

: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

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

2. Word-by-word reveal

// Разбиваем заголовок на слова
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)

// Разбиваем на буквы для максимальной детализации
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)

.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

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

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

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

--font-display: 'Clash Display', 'Inter', sans-serif;
--font-body: 'Inter', -apple-system, sans-serif;

Rule 2: Monospace Accents

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

Rule 3: Single Font Scale

/* Один шрифт, полная шкала весов */
--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

# Проверить 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')}\")
"