Initial commit: 79+ design patterns, LLM prompts, and assets
This commit is contained in:
Neo committed
commit
2b42a76d6d
112 files changed
+13652
No files matched your search
@@ -0,0 +1,232 @@
|
||||
---
|
||||
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')}\")
|
||||
"
|
||||
```
|
||||
Reference in new issue
Block a user