القائمة
Workflow for creating advanced masking effects in Remotion using layered compositions, image/video masking, text occlusion, and frame-based animation systems.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | remotion-image-video-masking |
| description | Workflow for creating advanced masking effects in Remotion using layered compositions, image/video masking, text occlusion, and frame-based animation systems. |
This skill enables Claude to create advanced masking and layering effects in Remotion where text, images, and videos interact dynamically through composition-based masking techniques.
The workflow focuses on:
The goal is to create visually engaging scenes where elements appear naturally layered, such as text moving behind foreground objects or videos blending seamlessly through animated masks.
Before starting:
Install Node.js: https://nodejs.org
Verify installation:
node -v
npm -v
npm init video
npm run dev
Recommended tools:
Recommended extensions:
Optional:
Use this skill when:
Do NOT use this skill for:
Create a startup launch video where animated text moves behind product screenshots and video layers.
Claude should:
Final result should:
Masking in Remotion depends heavily on visual layer ordering.
Foreground layers should:
Typical structure:
Background
↓
Animated Text
↓
Foreground Image/Video
Correct layer ordering creates:
PNG assets with transparency improve masking flexibility.
Best use cases:
Transparent assets make it easier to:
All masking motion should derive from:
useCurrentFrame()Avoid:
Preferred APIs:
useCurrentFrame()spring()interpolate()Masking effects often create layout instability if dimensions change during animation.
Claude should proactively prevent:
Recommended strategies:
Motion should reinforce layering.
Examples:
Good motion design improves:
Start by identifying:
Define:
Separate layers clearly:
Example structure:
components/
Background.tsx
Foreground.tsx
AnimatedText.tsx
Benefits:
Use:
Position foreground layers above animated text.
This creates:
Use:
useCurrentFrame()spring()Example animation goals:
Preferred motion style:
Avoid:
Ensure:
Subtitle timing and masking timing should remain synchronized frame-by-frame.
Before export validate:
Check frame-by-frame for:
Render output:
npm run build
or:
npx remotion render
Preferred export:
The final output should include:
The workflow itself should remain:
The agent should:
The workflow should optimize for:
Workflow for building scalable messaging systems on Microsoft Azure using queues, event-driven architecture, pub/sub systems, service buses, and cloud-native communication patterns.
Workflow for implementing observability systems on Microsoft Azure using logging, monitoring, tracing, telemetry, metrics, dashboards, and production-grade cloud diagnostics.
Workflow for creating procedural systems in Blender using Geometry Nodes, procedural materials, node-based modeling, and non-destructive generation techniques.
Workflow for creating precise hard surface models in Blender using clean topology, subdivision workflows, bevel systems, and production-ready modeling techniques.
Workflow for using Claude to generate Blender Python scripts, automate 3D workflows, and create procedural scenes, animations, and assets directly inside Blender.
End-to-end workflow for setting up Blender, rigging a character, and creating a simple animation with a clear output (rendered animation).