design-systems: add 74 brand DESIGN.md files (VoltAgent/awesome-design-md)
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
This commit is contained in:
1 parent
e3738f2b3e
commit
76c4c5b4fe
233 files changed
+54886
-1
No files matched your search
@@ -0,0 +1,50 @@
|
||||
---
|
||||
name: media-prompts
|
||||
title: Media Pattern LLM Prompts
|
||||
description: Ready-to-use prompts for media with wiki patterns.
|
||||
---
|
||||
|
||||
# Media Pattern Prompts
|
||||
|
||||
## 1. Video Mask
|
||||
|
||||
```
|
||||
Create video mask effect:
|
||||
- Text with video inside using -webkit-mask-image: text
|
||||
- Video: autoplay, muted, loop, playsinline
|
||||
- Width: 100% of container
|
||||
- Font-size: clamp(4rem, 12vw, 10rem)
|
||||
- Font-weight: 900
|
||||
- Fallback: static image for mobile
|
||||
```
|
||||
|
||||
## 2. Image Parallax
|
||||
|
||||
```
|
||||
Create image parallax:
|
||||
- Section: height 100vh, overflow hidden
|
||||
- Image: position absolute, height 140%
|
||||
- GSAP ScrollTrigger: yPercent: 50, scrub: 1
|
||||
- Will-change: transform
|
||||
- Mobile: static image (no parallax)
|
||||
```
|
||||
|
||||
## 3. SVG Animation
|
||||
|
||||
```
|
||||
Create SVG icon animation:
|
||||
- Path with stroke-dasharray: 30, stroke-dashoffset: 30
|
||||
- Animation: draw 0.5s ease forwards
|
||||
- Icon: 48x48px
|
||||
- Color: accent (#6366f1)
|
||||
- Hover: scale(1.2) rotate(10deg)
|
||||
- Transition: 0.3s ease
|
||||
```
|
||||
|
||||
## Anti-Patterns
|
||||
|
||||
1. Never autoplay video with sound
|
||||
2. Never use images > 5MB
|
||||
3. Always use WebP/AVIF
|
||||
4. Always lazy load below-fold images
|
||||
5. Never skip alt text
|
||||
Reference in new issue
Block a user