wow-design-wiki/prompts/media/00-media-prompts.md

name, title, description

name	title	description
media-prompts	Media Pattern LLM Prompts	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