neo
76c4c5b4fe
- 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
51 lines
1.1 KiB
Markdown
51 lines
1.1 KiB
Markdown
---
|
|
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
|