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,43 @@
|
||||
---
|
||||
name: media/animated-illustration
|
||||
title: Animated Illustrations & Icons
|
||||
description: Lottie animations, CSS illustrations, motion graphics.
|
||||
tags: [media, animation, illustration, lottie, motion]
|
||||
source: raycast.com, linear.app, amppz.com, brad.co
|
||||
---
|
||||
|
||||
# Animated Illustrations
|
||||
|
||||
## 1. Lottie Integration
|
||||
|
||||
```html
|
||||
<div id="animation" data-src="animation.json"></div>
|
||||
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
|
||||
<script>
|
||||
document.getElementById('animation').innerHTML = `
|
||||
<lottie-player src="animation.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
|
||||
`;
|
||||
</script>
|
||||
```
|
||||
|
||||
## 2. CSS Animated Illustration
|
||||
|
||||
```css
|
||||
.illustration {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: conic-gradient(from 0deg, #6366f1, #ec4899, #6366f1);
|
||||
border-radius: 50%;
|
||||
animation: spin 4s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
```
|
||||
|
||||
## Anti-patterns
|
||||
|
||||
| ❌ Плохо | ✅ Хорошо |
|
||||
|----------|-----------|
|
||||
| Без fallback | SVG fallback |
|
||||
| Без `prefers-reduced-motion` | Уважать настройки |
|
||||
@@ -0,0 +1,62 @@
|
||||
---
|
||||
name: media/image-parallax
|
||||
title: Image Parallax
|
||||
description: Images moving at different scroll speeds. Creates depth.
|
||||
tags: [media, parallax, image, scroll, depth]
|
||||
source: apple.com, amppz.com, brad.co, godly.website
|
||||
---
|
||||
|
||||
# Image Parallax
|
||||
|
||||
## CSS-only реализация
|
||||
|
||||
```css
|
||||
.parallax-section {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.parallax-image {
|
||||
position: absolute;
|
||||
top: -20%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 140%;
|
||||
background: url('/parallax.jpg') center/cover;
|
||||
will-change: transform;
|
||||
}
|
||||
```
|
||||
|
||||
```javascript
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrolled = window.scrollY;
|
||||
const parallax = document.querySelector('.parallax-image');
|
||||
if (parallax) {
|
||||
parallax.style.transform = `translateY(${scrolled * 0.5}px)`;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## GSAP версия
|
||||
|
||||
```javascript
|
||||
gsap.to('.parallax-image', {
|
||||
yPercent: 50,
|
||||
ease: 'none',
|
||||
scrollTrigger: {
|
||||
trigger: '.parallax-section',
|
||||
start: 'top bottom',
|
||||
end: 'bottom top',
|
||||
scrub: true
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Anti-patterns
|
||||
|
||||
| ❌ Плохо | ✅ Хорошо |
|
||||
|----------|-----------|
|
||||
| Без `will-change` | `will-change: transform` |
|
||||
| `scrub: 0` | `scrub: 1` |
|
||||
| Без `prefers-reduced-motion` | Отключать на мобильных |
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
name: media/svg-animation
|
||||
title: SVG Animation & Icon Motion
|
||||
description: Animated SVG icons, paths, and illustrations.
|
||||
tags: [media, svg, animation, icon, motion]
|
||||
source: raycast.com, linear.app, brad.co, amppz.com
|
||||
---
|
||||
|
||||
# SVG Animation
|
||||
|
||||
## 1. Path Draw Animation
|
||||
|
||||
```html
|
||||
<svg class="icon-animated" viewBox="0 0 24 24" width="48" height="48">
|
||||
<path class="icon-path" d="M5 13l4 4L19 7" fill="none" stroke="#6366f1" stroke-width="2"/>
|
||||
</svg>
|
||||
```
|
||||
|
||||
```css
|
||||
.icon-path {
|
||||
stroke-dasharray: 30;
|
||||
stroke-dashoffset: 30;
|
||||
animation: draw 0.5s ease forwards;
|
||||
}
|
||||
@keyframes draw {
|
||||
to { stroke-dashoffset: 0; }
|
||||
}
|
||||
```
|
||||
|
||||
## 2. Morphing SVG
|
||||
|
||||
```html
|
||||
<svg class="morph-svg" viewBox="0 0 100 100">
|
||||
<circle cx="50" cy="50" r="40" fill="#6366f1">
|
||||
<animate attributeName="r" values="40;50;40" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</svg>
|
||||
```
|
||||
|
||||
## 3. Icon Hover
|
||||
|
||||
```css
|
||||
.icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.icon:hover {
|
||||
transform: scale(1.2) rotate(10deg);
|
||||
}
|
||||
```
|
||||
|
||||
## Anti-patterns
|
||||
|
||||
| ❌ Плохо | ✅ Хорошо |
|
||||
|----------|-----------|
|
||||
| Без viewBox | Всегда viewBox |
|
||||
| Без `stroke-dashoffset` | Использовать для path |
|
||||
| 500ms+ анимация | 0.3–0.5s |
|
||||
@@ -0,0 +1,316 @@
|
||||
---
|
||||
name: media/video-mask
|
||||
title: Video Background with Mask & Clip
|
||||
description: Video displayed inside shapes, text, or masks. Creates striking visual impact.
|
||||
tags: [media, video, mask, clip, effect, wow]
|
||||
source: amppz.com, brad.co, godly.website, linear.app
|
||||
---
|
||||
|
||||
# Video Background with Mask & Clip
|
||||
|
||||
## Что это
|
||||
Видео, отображаемое не как прямоугольник, а внутри формы: маски, обрезка по тексту, SVG-маски. Создаёт премиальный wow-эффект.
|
||||
|
||||
## Типы масок для видео
|
||||
|
||||
### 1. Text Mask (видео внутри текста)
|
||||
```html
|
||||
<section class="hero-video-text">
|
||||
<h1 class="text-mask-video">
|
||||
PREVIEW
|
||||
</h1>
|
||||
</section>
|
||||
```
|
||||
|
||||
```css
|
||||
.text-mask-video {
|
||||
font-size: clamp(4rem, 12vw, 10rem);
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
background: url('/video-preview.mp4') center/cover;
|
||||
-webkit-mask-image: text;
|
||||
mask-image: text;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
mask-position: center;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
color: #0a0a0a; /* fallback color */
|
||||
margin: 0 auto;
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Circle Mask (видео в круге)
|
||||
```html
|
||||
<div class="video-circle">
|
||||
<video autoplay muted loop playsinline>
|
||||
<source src="/hero-video.webm" type="video/webm">
|
||||
</video>
|
||||
</div>
|
||||
```
|
||||
|
||||
```css
|
||||
.video-circle {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.video-circle video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
/* Увеличиваем чтобы заполнить круг */
|
||||
transform: scale(1.2);
|
||||
}
|
||||
```
|
||||
|
||||
### 3. SVG Mask (произвольная форма)
|
||||
```html
|
||||
<svg style="position: absolute; width: 0; height: 0;">
|
||||
<defs>
|
||||
<mask id="star-mask">
|
||||
<rect width="100%" height="100%" fill="white"/>
|
||||
<path d="M150 0 L200 100 L300 100 L220 160 L250 260 L150 210 L50 260 L80 160 L0 100 L100 100 Z"
|
||||
fill="black"/>
|
||||
</mask>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="video-masked" style="mask: url(#star-mask); -webkit-mask: url(#star-mask);">
|
||||
<video autoplay muted loop playsinline>
|
||||
<source src="/hero-video.webm" type="video/webm">
|
||||
</video>
|
||||
</div>
|
||||
```
|
||||
|
||||
```css
|
||||
.video-masked {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.video-masked video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
```
|
||||
|
||||
### 4. Clip-path Polygon
|
||||
```css
|
||||
.video-polygon {
|
||||
clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.video-polygon video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
```
|
||||
|
||||
### 5. Video as Hero Background
|
||||
```html
|
||||
<section class="hero-video-bg">
|
||||
<div class="hero-overlay"></div>
|
||||
<div class="hero-content">
|
||||
<h1>Заголовок поверх видео</h1>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
```css
|
||||
.hero-video-bg {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-video-bg video {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
transform: translate(-50%, -50%);
|
||||
object-fit: cover;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 120px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
## Performance-Optimized Video Setup
|
||||
|
||||
### WebM + MP4 Fallback
|
||||
```html
|
||||
<video autoplay muted loop playsinline poster="/video-poster.jpg" preload="metadata">
|
||||
<source src="/video.webm" type="video/webm">
|
||||
<source src="/video.mp4" type="video/mp4">
|
||||
<!-- Fallback image -->
|
||||
<img src="/video-poster.jpg" alt="" class="video-fallback">
|
||||
</video>
|
||||
```
|
||||
|
||||
```css
|
||||
.video-fallback {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Показываем fallback если видео не загрузилось */
|
||||
video:not(:success) + .video-fallback {
|
||||
display: block;
|
||||
}
|
||||
```
|
||||
|
||||
### Responsive Video Sizing
|
||||
```css
|
||||
.video-responsive {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.video-responsive {
|
||||
aspect-ratio: 9 / 16;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Lazy Loading Video
|
||||
|
||||
```html
|
||||
<!-- Видео загружается только при появлении в viewport -->
|
||||
<video class="video-lazy"
|
||||
data-src="/video.webm"
|
||||
data-src-mp4="/video.mp4"
|
||||
autoplay muted loop playsinline>
|
||||
</video>
|
||||
```
|
||||
|
||||
```javascript
|
||||
// IntersectionObserver для ленивой загрузки
|
||||
const videoObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const video = entry.target;
|
||||
video.src = video.dataset.src;
|
||||
video.load();
|
||||
videoObserver.unobserve(video);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
rootMargin: '200px'
|
||||
});
|
||||
|
||||
document.querySelectorAll('.video-lazy').forEach(video => {
|
||||
videoObserver.observe(video);
|
||||
});
|
||||
```
|
||||
|
||||
## Video with Noise Overlay (premium feel)
|
||||
```html
|
||||
<div class="video-container">
|
||||
<video autoplay muted loop playsinline>
|
||||
<source src="/hero-video.webm" type="video/webm">
|
||||
</video>
|
||||
<div class="noise-overlay"></div>
|
||||
<div class="gradient-overlay"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```css
|
||||
.noise-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url('/noise.png');
|
||||
background-size: 256px 256px;
|
||||
opacity: 0.03;
|
||||
mix-blend-mode: overlay;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gradient-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
transparent 0%,
|
||||
rgba(10, 10, 10, 0.3) 50%,
|
||||
rgba(10, 10, 10, 0.9) 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
```
|
||||
|
||||
## Anti-patterns
|
||||
|
||||
| ❌ Плохо | ✅ Хорошо |
|
||||
|----------|-----------|
|
||||
| `.mp4` без `.webm` fallback | WebM + MP4 + poster fallback |
|
||||
| Без `preload="metadata"` | `preload="metadata"` + lazy load |
|
||||
| Видео > 10MB | Сжать до < 5MB (HandBrake) |
|
||||
| Без `playsinline` на мобильных | Всегда `playsinline` для iOS |
|
||||
| Без poster | Всегда `poster` как fallback |
|
||||
| Звук | Никогда не включать звук на автоплеер |
|
||||
|
||||
## Compression Pipeline
|
||||
|
||||
```bash
|
||||
# HandBrake CLI — сжатие видео для веба
|
||||
HandBrakeCLI -i input.mp4 -o output.webm \
|
||||
--format webm \
|
||||
-e libvpx-vp9 \
|
||||
-q 25 \
|
||||
--width 1920 \
|
||||
--max-height 1080 \
|
||||
--two-pass \
|
||||
--turbo 2
|
||||
|
||||
# FFmpeg — альтернатива
|
||||
ffmpeg -i input.mp4 -c:v libvpx-vp9 -b:v 1500k \
|
||||
-c:a libopus -b:a 128k -f webm output.webm
|
||||
```
|
||||
|
||||
## CV Service Validation
|
||||
|
||||
```bash
|
||||
# Проверить performance (video loading impact)
|
||||
curl -s -X POST http://localhost:8001/design/analyze-dom \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"html": "...", "full_analysis": false}' | python3 -c "
|
||||
import sys, json
|
||||
d = json.load(sys.stdin)
|
||||
perf = d['analyzers'].get('performance', {})
|
||||
print(f\"Performance: {perf.get('score', 'N/A')}/10\")
|
||||
print(f\" LCP: {perf.get('lcp_impact', 'N/A')}\")
|
||||
print(f\" Largest Element: {perf.get('largest_element', 'N/A')}\")
|
||||
"
|
||||
```
|
||||
|
||||
Ожидается: `performance` > 7 (video должен быть оптимизирован).
|
||||
Reference in new issue
Block a user