99 lines
2.7 KiB
Plaintext
99 lines
2.7 KiB
Plaintext
---
|
|
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) |