初始化项目版本
This commit is contained in:
Axhub Make
124
.agents/skills/remotion/resources/composition-checklist.md
Normal file
124
.agents/skills/remotion/resources/composition-checklist.md
Normal file
@@ -0,0 +1,124 @@
|
||||
# Remotion Composition Checklist
|
||||
|
||||
Use this checklist to ensure your Remotion walkthrough video composition is complete and follows best practices.
|
||||
|
||||
## ✅ Project Setup
|
||||
|
||||
- [ ] Remotion project initialized (or existing project verified)
|
||||
- [ ] Dependencies installed (`@remotion/transitions`, etc.)
|
||||
- [ ] Asset directory created (`public/assets/screens/`)
|
||||
- [ ] Screen manifest created (`screens.json`)
|
||||
|
||||
## ✅ Asset Preparation
|
||||
|
||||
- [ ] All Stitch screenshots downloaded
|
||||
- [ ] Images saved with descriptive names
|
||||
- [ ] Image dimensions recorded in manifest
|
||||
- [ ] Images optimized for size (if needed)
|
||||
- [ ] Asset paths are correct and relative to `public/`
|
||||
|
||||
## ✅ Component Structure
|
||||
|
||||
- [ ] `ScreenSlide.tsx` component created
|
||||
- [ ] Props interface defined
|
||||
- [ ] Zoom animation implemented
|
||||
- [ ] Fade animation implemented
|
||||
- [ ] Text overlay included
|
||||
- [ ] `WalkthroughComposition.tsx` created
|
||||
- [ ] Screen manifest imported
|
||||
- [ ] `<Sequence>` components for each screen
|
||||
- [ ] Transitions between screens configured
|
||||
- [ ] Proper timing offsets calculated
|
||||
|
||||
## ✅ Configuration
|
||||
|
||||
- [ ] `remotion.config.ts` updated
|
||||
- [ ] Composition ID set
|
||||
- [ ] Video dimensions configured
|
||||
- [ ] Frame rate set (30 or 60 fps)
|
||||
- [ ] Duration calculated correctly
|
||||
- [ ] Video metadata set (if applicable)
|
||||
- [ ] Title
|
||||
- [ ] Description
|
||||
|
||||
## ✅ Animations & Transitions
|
||||
|
||||
- [ ] Spring animations use appropriate configs
|
||||
- [ ] Damping values (8-15 typical)
|
||||
- [ ] Stiffness values (60-100 typical)
|
||||
- [ ] Transitions feel smooth
|
||||
- [ ] Text overlays timed correctly
|
||||
- [ ] No jarring or abrupt changes
|
||||
|
||||
## ✅ Visual Quality
|
||||
|
||||
- [ ] Text is readable at all times
|
||||
- [ ] Sufficient contrast between text and background
|
||||
- [ ] Font sizes appropriate for video resolution
|
||||
- [ ] Images display without distortion
|
||||
- [ ] Aspect ratios maintained
|
||||
|
||||
## ✅ Timing
|
||||
|
||||
- [ ] Each screen displays for appropriate duration
|
||||
- [ ] Total video length is reasonable (not too long/short)
|
||||
- [ ] Transitions don't feel rushed
|
||||
- [ ] Text has time to be read
|
||||
|
||||
## ✅ Preview & Testing
|
||||
|
||||
- [ ] Preview in Remotion Studio (`npm run dev`)
|
||||
- [ ] Scrub through timeline to check all frames
|
||||
- [ ] Verify smooth playback
|
||||
- [ ] Check for any rendering errors
|
||||
- [ ] Test on different screen sizes (if responsive)
|
||||
|
||||
## ✅ Rendering
|
||||
|
||||
- [ ] Render command tested and works
|
||||
- [ ] Output format chosen (MP4, WebM, etc.)
|
||||
- [ ] Quality settings configured
|
||||
- [ ] Codec specified (h264 recommended)
|
||||
- [ ] Final video renders without errors
|
||||
|
||||
## ✅ Final Output
|
||||
|
||||
- [ ] Video file generated successfully
|
||||
- [ ] File size is reasonable
|
||||
- [ ] Video plays correctly in media players
|
||||
- [ ] Audio included (if applicable)
|
||||
- [ ] Metadata embedded (if needed)
|
||||
|
||||
## 🎨 Optional Enhancements
|
||||
|
||||
- [ ] Progress indicator showing current screen
|
||||
- [ ] Custom logo or branding
|
||||
- [ ] Background music or sound effects
|
||||
- [ ] Voiceover narration
|
||||
- [ ] Interactive hotspots highlighting features
|
||||
- [ ] Call-to-action at end
|
||||
|
||||
## 📋 Best Practices Verified
|
||||
|
||||
- [ ] Component code is modular and reusable
|
||||
- [ ] TypeScript interfaces used for props
|
||||
- [ ] No hardcoded values (use manifest/config)
|
||||
- [ ] Code follows Remotion conventions
|
||||
- [ ] Comments added for complex logic
|
||||
- [ ] Assets organized in clear folder structure
|
||||
|
||||
## 🐛 Common Issues Checked
|
||||
|
||||
- [ ] No blurry images (check source resolution)
|
||||
- [ ] No misaligned text (verify positioning)
|
||||
- [ ] No choppy animations (check spring configs)
|
||||
- [ ] No missing assets (verify all paths)
|
||||
- [ ] No build errors (run `npm run build` test)
|
||||
|
||||
---
|
||||
|
||||
**Notes:**
|
||||
- Mark items with `[x]` as you complete them
|
||||
- Add custom checklist items specific to your project
|
||||
- Review Remotion documentation for updates
|
||||
- Test final video on target platform (YouTube, social, etc.)
|
||||
123
.agents/skills/remotion/resources/screen-slide-template.tsx
Normal file
123
.agents/skills/remotion/resources/screen-slide-template.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';
|
||||
import {Img} from 'remotion';
|
||||
|
||||
interface ScreenSlideProps {
|
||||
imageSrc: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export const ScreenSlide: React.FC<ScreenSlideProps> = ({
|
||||
imageSrc,
|
||||
title,
|
||||
description,
|
||||
width,
|
||||
height,
|
||||
}) => {
|
||||
const frame = useCurrentFrame();
|
||||
const {fps} = useVideoConfig();
|
||||
|
||||
// Zoom in animation
|
||||
const zoom = spring({
|
||||
frame,
|
||||
fps,
|
||||
from: 0.95,
|
||||
to: 1,
|
||||
config: {
|
||||
damping: 12,
|
||||
stiffness: 80,
|
||||
},
|
||||
});
|
||||
|
||||
// Fade in animation
|
||||
const opacity = spring({
|
||||
frame,
|
||||
fps,
|
||||
from: 0,
|
||||
to: 1,
|
||||
config: {
|
||||
damping: 10,
|
||||
},
|
||||
});
|
||||
|
||||
// Text overlay fade in (delayed)
|
||||
const textOpacity = spring({
|
||||
frame: frame - 15, // Delay by 15 frames
|
||||
fps,
|
||||
from: 0,
|
||||
to: 1,
|
||||
config: {
|
||||
damping: 10,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<AbsoluteFill
|
||||
style={{
|
||||
backgroundColor: '#000',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{/* Screen Image */}
|
||||
<div
|
||||
style={{
|
||||
transform: `scale(${zoom})`,
|
||||
opacity,
|
||||
maxWidth: '90%',
|
||||
maxHeight: '80%',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<Img
|
||||
src={imageSrc}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: 'auto',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Text Overlay */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: '10%',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
textAlign: 'center',
|
||||
opacity: textOpacity,
|
||||
width: '80%',
|
||||
}}
|
||||
>
|
||||
<h1
|
||||
style={{
|
||||
fontSize: '48px',
|
||||
fontWeight: 'bold',
|
||||
color: '#fff',
|
||||
margin: '0 0 12px 0',
|
||||
textShadow: '0 2px 10px rgba(0, 0, 0, 0.5)',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
{description && (
|
||||
<p
|
||||
style={{
|
||||
fontSize: '24px',
|
||||
color: '#ddd',
|
||||
margin: 0,
|
||||
textShadow: '0 1px 5px rgba(0, 0, 0, 0.5)',
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user