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,187 @@
|
||||
---
|
||||
name: motion/staggered-reveal
|
||||
title: Staggered Element Reveal
|
||||
description: Cascading entrance animations where elements appear sequentially. Used on Linear, Raycast, Linear.app hero sections.
|
||||
tags: [motion, gsap, scrolltrigger, entrance, stagger]
|
||||
source: linear.app, raycast.com, godly.website top 50
|
||||
---
|
||||
|
||||
# Staggered Element Reveal
|
||||
|
||||
## Что это
|
||||
Последовательное появление элементов с нарастающей задержкой. Создаёт ощущение "потока" и профессионализма. Элементы появляются не все сразу, а каскадом с интервалом.
|
||||
|
||||
## Где используется
|
||||
- Hero-секции Linear, Raycast, Resend
|
||||
- Feature-блоки с иконками
|
||||
- Списки преимуществ
|
||||
- Карточки с услугами
|
||||
|
||||
## Ключевые параметры
|
||||
|
||||
| Параметр | Значение | Почему |
|
||||
|----------|----------|--------|
|
||||
| `stagger` | `0.08–0.12` | Оптимальный ритм — не слишком быстро, не медленно |
|
||||
| `duration` | `0.6–0.8s` | Достаточное время для заметности |
|
||||
| `ease` | `power3.out` | Плавное замедление, ощущение "приземления" |
|
||||
| `delay` | `0.2–0.3` | Задержка перед началом каскада |
|
||||
| `from opacity` | `0.8` | Не полная прозрачность, чтобы не было "прыжка" |
|
||||
| `from translateY` | `20–30px` | Элементы "влетают" снизу |
|
||||
|
||||
## Референсы
|
||||
|
||||
### Linear Hero
|
||||
```
|
||||
1. Logo появляется → 0.3s задержка
|
||||
2. H1 появляется (line by line) → stagger 0.1s
|
||||
3. Подзаголовок → 0.4s задержка
|
||||
4. CTA кнопка → 0.6s задержка
|
||||
5. Декоративные элементы → 0.8s задержка
|
||||
```
|
||||
|
||||
### Resend Feature Grid
|
||||
```
|
||||
- Карточки появляются с задержкой 0.08s друг за другом
|
||||
- Каждая карточка: fade + slide up 15px
|
||||
- Hover на карточку: scale 1.02 + shadow
|
||||
```
|
||||
|
||||
## Реализация
|
||||
|
||||
```javascript
|
||||
// GSAP + ScrollTrigger
|
||||
import gsap from 'gsap';
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
// 1. Базовый stagger-ревеал
|
||||
gsap.from('.stagger-item', {
|
||||
opacity: 0,
|
||||
y: 30,
|
||||
duration: 0.7,
|
||||
stagger: 0.08,
|
||||
ease: 'power3.out',
|
||||
delay: 0.3,
|
||||
scrollTrigger: {
|
||||
trigger: '.stagger-section',
|
||||
start: 'top 80%',
|
||||
toggleActions: 'play none none none'
|
||||
}
|
||||
});
|
||||
|
||||
// 2. Stagger для карточек
|
||||
gsap.from('.feature-card', {
|
||||
opacity: 0,
|
||||
y: 25,
|
||||
scale: 0.97,
|
||||
duration: 0.6,
|
||||
stagger: 0.06,
|
||||
ease: 'power2.out',
|
||||
scrollTrigger: {
|
||||
trigger: '.features-grid',
|
||||
start: 'top 85%'
|
||||
}
|
||||
});
|
||||
|
||||
// 3. Stagger для текстовых строк
|
||||
gsap.from('.hero-line', {
|
||||
opacity: 0,
|
||||
y: 40,
|
||||
duration: 0.8,
|
||||
stagger: 0.12,
|
||||
ease: 'power3.out',
|
||||
delay: 0.2
|
||||
});
|
||||
|
||||
// 4. Line-by-line reveal для заголовка
|
||||
const lines = document.querySelectorAll('.hero h1 .line');
|
||||
gsap.from(lines, {
|
||||
opacity: 0,
|
||||
y: 50,
|
||||
rotateX: -15,
|
||||
duration: 0.8,
|
||||
stagger: 0.15,
|
||||
ease: 'power3.out',
|
||||
delay: 0.3
|
||||
});
|
||||
```
|
||||
|
||||
## CSS подготовка
|
||||
|
||||
```css
|
||||
.stagger-item {
|
||||
/* Начальное состояние до анимации */
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
/* Альтернатива: CSS-only для простых случаев */
|
||||
@keyframes fadeUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(25px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.stagger-item {
|
||||
opacity: 0;
|
||||
animation: fadeUp 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.stagger-item:nth-child(1) { animation-delay: 0.1s; }
|
||||
.stagger-item:nth-child(2) { animation-delay: 0.18s; }
|
||||
.stagger-item:nth-child(3) { animation-delay: 0.26s; }
|
||||
.stagger-item:nth-child(4) { animation-delay: 0.34s; }
|
||||
.stagger-item:nth-child(5) { animation-delay: 0.42s; }
|
||||
.stagger-item:nth-child(6) { animation-delay: 0.5s; }
|
||||
```
|
||||
|
||||
## Anti-patterns (Чего НЕ делать)
|
||||
|
||||
| ❌ Плохо | ✅ Хорошо |
|
||||
|----------|-----------|
|
||||
| `stagger: 0.02` — слишком быстро, "мигание" | `stagger: 0.08` — чёткий ритм |
|
||||
| `stagger: 0.3` — слишком медленно, скучно | `stagger: 0.06–0.12` — оптимально |
|
||||
| Все элементы `opacity: 0 → 1` | `opacity: 0.8 → 1` + `y: 20 → 0` |
|
||||
| Без `will-change` | `will-change: opacity, transform` |
|
||||
| Без `stagger` (все сразу) | Каскадное появление |
|
||||
|
||||
## Performance
|
||||
|
||||
```javascript
|
||||
// ✅ GPU accelerated
|
||||
gsap.from('.item', { opacity: 0, y: 20, transform: 'translateY(20px)' });
|
||||
|
||||
// ❌ Bad — заставляет layout
|
||||
gsap.from('.item', { marginLeft: '20px' });
|
||||
gsap.from('.item', { top: '20px', left: '20px' });
|
||||
```
|
||||
|
||||
## Validation (CV Service)
|
||||
```bash
|
||||
# После рендеринга страницы
|
||||
curl -s -X POST http://localhost:8001/design/analyze-dom \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"html": "...", "full_analysis": false}' | python3 -m json.tool
|
||||
```
|
||||
|
||||
Проверить:
|
||||
- `performance` score > 8 — анимации только на `transform` и `opacity`
|
||||
- `ux_heuristics` score > 6 — анимации не мешают навигации
|
||||
- `wcag_compliance` — анимация имеет `prefers-reduced-motion` фоллбэк
|
||||
|
||||
```css
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.stagger-item {
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
Reference in new issue
Block a user