---
description: VFX studio specific patterns and requirements
---

# VFX Studio Specific Guidelines

## Media Handling

### Video Components
- Use [src/components/VideoPlayer.tsx](mdc:src/components/VideoPlayer.tsx) for video playback
- Use [src/components/ReelPlayer.tsx](mdc:src/components/ReelPlayer.tsx) for demo reels
- Support multiple video formats (MP4, WebM)
- Include proper video metadata and thumbnails

### Image Components
- Use [src/components/DepthMap.tsx](mdc:src/components/DepthMap.tsx) for depth map visualizations
- Implement lazy loading for portfolio images
- Use Next.js Image optimization for all media

## Portfolio Patterns

### Project Showcase
```typescript
// Use ProjectCard component for consistent project display
import { ProjectCard } from '@/components/ProjectCard'
import { ProjectShowcase } from '@/components/ProjectShowcase'

// Project data structure from src/data/projects.ts
interface Project {
  id: string
  title: string
  description: string
  category: 'commercial' | 'music-video' | 'film' | 'animation'
  client?: string
  year: number
  images: string[]
  videoUrl?: string
  tags: string[]
}
```

### Service Categories
- Visual Effects (VFX)
- Motion Graphics
- 3D Animation
- Compositing
- Color Grading
- Post-Production

## Client Work Patterns

### Client Logo Grid
- Use [src/components/ClientLogoGrid.tsx](mdc:src/components/ClientLogoGrid.tsx)
- Display client logos with proper attribution
- Ensure logos are high-quality and properly sized

### Project Filtering
- Implement category-based filtering
- Support tag-based search
- Include year-based sorting

## Performance Considerations

### Media Optimization
- Compress images and videos for web delivery
- Use appropriate formats (WebP for images, MP4 for videos)
- Implement progressive loading for large media files
- Use CDN for media delivery

### Loading States
- Show skeleton loaders for media content
- Implement progressive image loading
- Use intersection observer for lazy loading

## VFX-Specific UI Elements

### Before/After Comparisons
- Implement split-screen comparisons
- Use slider controls for reveal effects
- Include toggle for before/after views

### Process Showcases
- Show breakdowns of VFX work
- Include wireframe and final render comparisons
- Display technical specifications

## Content Guidelines

### Project Descriptions
- Include technical details (software used, techniques)
- Mention client and project scope
- Highlight challenges and solutions
- Use industry-standard terminology

### Service Descriptions
- Be specific about capabilities
- Include typical project timelines
- Mention software and hardware capabilities
- Provide clear pricing structure (if applicable)