---
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