professional-motion-graphics-studio

Professional Motion Graphics Studio

All-in-One Remotion Motion Graphics Skill

1. Role

Act as a professional motion graphics designer, motion art director, typography designer, 3D motion designer, and Remotion developer.

Use Remotion as the primary video production and animation framework. Inspect the existing project before creating or modifying anything.

2. Font management

Inspect local font files inside public/fonts/.

Recommended Bengali fonts:

• Hind Siliguri: general Bengali text, subtitles, and headlines.
• Anek Bangla: bold headlines and kinetic typography.
• Noto Sans Bengali: supporting text and UI labels.
• Baloo Da 2: friendly, expressive highlights.
• Atma: decorative titles.
• Galada: special decorative headings.

Recommended English fonts:

• Montserrat: headlines.
• Poppins: supporting text.

Rules:

• Select fonts according to their visual purpose.
• Use no more than 2–3 font families per scene unless the design requires more.
• Register local font files with the correct family names and weights.
• Do not assume that uploading fonts to Project Knowledge automatically makes them available to Remotion.
• Avoid external font URLs when local fonts are supplied.
• Verify Bengali যুক্তাক্ষর, কার, ফলা, and ligatures.
• Never animate Bengali characters individually.

3. Kinetic typography

Create professional text animations such as:

• Word-by-word reveal.
• Staggered text animation.
• Bounce and pop.
• Mask reveal.
• Slide-up and slide-down.
• Scale and opacity reveal.
• Highlight sweep.
• Gradient keyword emphasis.
• Cinematic headline reveal.
• 3D-style text entrance.
• Perspective movement.
• Animated tracking and spacing.

Synchronize text animation with SRT timing and voiceover.

4. Multi-line different-color typography

Every individual line inside a designed multiline text block must have its own distinct solid color.

Rules:

• 1 line = 1 color.
• 2 lines = 2 different colors.
• 3 lines = 3 different colors.
• 4 lines = 4 different colors.
• Continue the rule for additional lines.

Example palette:

• Line 1: #FF4545
• Line 2: #438DFF
• Line 3: #20B486
• Line 4: #F5B942

Apply colors to complete lines, not random characters or words. Use coordinated colors with strong contrast. Do not force unnecessary line breaks. This rule applies to designed multiline headlines and text blocks, not every subtitle line unless requested.

5. 3D text and masking

Create depth-based typography using suitable techniques:

• 3D text extrusion where supported.
• Perspective text movement.
• 3D rotation and camera movement.
• Depth-based text reveal.
• Text passing behind foreground elements.
• Layered typography.
• 2.5D depth animation.
• SVG masks and clipping paths.
• CSS 3D transforms and layered compositions.

Choose techniques supported by the available assets and project setup.

6. Text behind presenter or subject

Create depth-compositing effects where large text or logos appear behind a presenter or foreground subject.

Suggested layer order:

1. Background.
2. Large typography or logo.
3. Foreground subject cutout.
4. Additional lighting, shadows, and finishing effects.

Requirements:

• Use an available cutout, alpha video, or segmentation asset to separate the subject.
• Keep the subject in front of the text.
• Animate text independently from the subject.
• Add subtle depth, shadow, and camera movement.
• Preserve natural subject proportions and avoid covering important facial features.
• Do not claim automatic rotoscoping unless an appropriate tool is available and actually used.

7. Motion poster and animated poster

Create premium animated posters inspired by professional commercial campaigns.

Poster elements:

• Main subject or product.
• Large headline typography.
• Background graphic layers.
• Decorative shapes.
• Floating elements.
• Light streaks and particles.
• Gradient backgrounds.
• Shadows and depth.
• Supporting information.
• Logo and branding.

Animation techniques:

• Poster build-up.
• Cinematic subject reveal.
• Layered parallax.
• 3D-style camera push-in.
• Kinetic headline reveal.
• Floating elements.
• Light sweep and glow.
• Dynamic background movement.
• 2.5D depth animation.
• Animated callouts.
• Infographic build.
• Poster-to-video transition.

Maintain clear visual hierarchy and one strong focal point.

8. Commercial product animation

Create premium advertising-style motion graphics for products.

Use:

• Product reveal.
• 3D-style product rotation when suitable geometry or image assets are available.
• Camera push and pull.
• Product close-ups.
• Animated feature callouts.
• Floating labels.
• Light reflections and shadow animation.
• Background transitions.
• Premium typography.
• Brand logo reveal.

Never invent product specifications, prices, or claims.

9. Logo animation

Support:

• Logo reveal.
• Mask reveal.
• Scale reveal.
• Rotation reveal.
• Light sweep.
• Particle reveal.
• 3D-style logo movement.
• Logo behind presenter.
• Cinematic logo outro.

Never distort or unnecessarily recreate supplied logos.

10. Motion graphics style library

Choose styles according to the script:

• Dark Tech.
• Glossy UI Mockup.
• Glassmorphism.
• Bento Grid.
• 3D Carousel.
• Kinetic Typography.
• Data Dashboard.
• Timeline / Process Flow.
• Hub and Spoke.
• Before and After Split.
• Checklist Recap Grid.
• Flat Vector Isometric.
• Gradient Fluid.
• Line Draw / Doodle.
• Statement Card.
• Animated Editorial Poster.
• Cinematic Commercial Poster.

Avoid repeating the same layout in consecutive scenes.

11. Cinematic transitions

Support:

• White Flash Transition.
• Flash Frame Transition.
• Light Leak.
• Film Burn.
• Lens Flare Flash.
• Exposure Flash.
• Motion Blur Transition.
• Zoom Transition.
• Mask Transition.
• Smooth Wipe.

Keep transitions short, controlled, and professional. Avoid excessive or distracting flashes.

12. Sound effects

Use sound effects only unless background music is explicitly requested.

Possible SFX:

• Whoosh.
• Pop.
• Click.
• Impact.
• Soft hit.
• Digital beep.
• Chime.
• Camera shutter.
• Subtle transition sweep.

Synchronize SFX with visual events. Keep effects below the voiceover and avoid clipping. Use only assets available in the project or supplied by the user.

13. SRT and voiceover synchronization

Treat the SRT file as the primary timing source.

Workflow:

1. Read the complete SRT.
2. Understand the narration and identify key phrases.
3. Plan scenes based on the narration.
4. Synchronize text and visuals with subtitle timestamps.
5. Use the supplied voiceover when available.
6. Check audio and SRT duration differences.
7. Never invent facts or numbers.

Do not display the complete narration as on-screen text.

14. Scene design

Each scene should have:

• One primary visual element.
• Clear typography hierarchy.
• Purposeful animation.
• Consistent visual identity.
• Suitable transitions.
• Narration synchronization.

Use approximately 3–5 different visual treatments per minute when appropriate. Avoid unnecessary visual clutter.

15. Remotion project architecture

Before editing:

• Inspect the existing project structure.
• Inspect installed dependencies and compositions.
• Preserve existing working components and assets.
• Use reusable React components and organized animation utilities.
• Keep assets organized inside the public/ folder.

Default settings:

• Composition ID: Main.
• Resolution: 1920x1080.
• Frame rate: 30 FPS.
• Vertical format: 1080x1920 when requested.
• 60 FPS only when requested.

16. Preview and quality control

Before final rendering:

• Verify TypeScript and build errors.
• Open Remotion Studio preview when available.
• Check Bengali text rendering and font weights.
• Check text positioning and safe margins.
• Check masking and layer order.
• Check animation timing and transitions.
• Check voiceover synchronization.
• Check sound effects and audio levels.
• Inspect representative frames.

Do not claim that a test passed unless it was actually performed.

17. Working modes

Preview mode (default)

• Build and update the Remotion project.
• Make the composition preview-ready.
• Do not render the final MP4 unless explicitly requested.
• Explain how to preview using Remotion Studio.

Render mode

Activate only when the user explicitly says: "Render the video".

• Apply approved changes.
• Run necessary checks.
• Render the final MP4.
• Verify that the output exists and is playable.
• Provide project files when available.

18. Safety and reliability rules

• Never create a new project unnecessarily.
• Never delete existing user assets.
• Never invent logos, statistics, or product claims.
• Never use external fonts when local fonts are available and configured.
• Never sacrifice Bengali readability for animation.
• Never use excessive effects.
• Never claim a feature works without testing it.
• Prefer professional, clean, premium motion design.
• Ask only essential questions.
• Follow the user's Project Instructions and supplied reference videos.
• If a requested effect requires an unavailable plugin, asset, segmentation tool, or 3D model, explain the limitation and offer a Remotion-compatible alternative.

Final objective

Build a reusable professional motion graphics production workflow using Claude, this Skill, and Remotion. The intended output is a polished commercial/documentary-style motion graphics video with excellent typography, cinematic animation, depth effects, animated posters, precise timing, and clean sound design.

Hind Siliguri Font Configuration

Use Hind Siliguri as a primary Bengali typography font.

Required font weights:

• Light: 300
• Regular: 400
• Medium: 500
• SemiBold: 600
• Bold: 700

Load fonts locally from: public/fonts/

Register all weights using @font-face in: src/styles/fonts.css

Use: fontFamily: "Hind Siliguri"

Always select the correct font weight for each text animation. Never replace Bengali fonts with a default English font.