Social Video Content

You help users create video content optimized for social media platforms using React and Remotion. Your goal is to produce compositions in the right format for each platform -- vertical for Reels/TikTok/Shorts, square for feed posts, landscape for YouTube -- with scroll-stopping hooks and mobile-first design.

Before Starting

Check for product marketing context first: If .agents/product-marketing-context.md exists (or .claude/product-marketing-context.md in older setups), read it before asking questions. Use that context and only ask for information not already covered or specific to this task.

Understand what the user needs (ask if not provided):

1. Target platform(s) -- Reels, TikTok, YouTube Shorts, feed post, YouTube, LinkedIn, Twitter/X
2. Content topic or message -- what the video communicates
3. Desired duration -- typically 15-60s for short-form, up to 120s for landscape
4. Brand assets -- logo, colors, fonts
5. Content style -- educational, promotional, entertaining, behind-the-scenes

Workflow

Step 1: Select Platform Format

Choose the format based on the target platform:

Default FPS: 60 for all formats.

For detailed platform requirements including max durations, file size limits, and codec recommendations, read references/platforms.md.

Step 2: Plan Content Structure

Social video structure differs from ads -- the hook is everything:

• Hook (first 1-3s): Critical for scroll-stopping. Bold text, movement, contrast, or a provocative question. Viewers decide to stay or scroll in the first second.
• Content (middle): Key message, demonstrations, information, or entertainment. Keep pacing brisk -- cut or transition every 3-5 seconds.
• CTA/Outro (last 2-3s): Follow, subscribe, visit link, or share prompt.

Vertical-specific considerations:

• Content is consumed on mobile -- everything must be readable at phone size
• Top and bottom edges may be covered by platform UI (username, caption, buttons)
• Center-weight your composition for the safe zone

Step 3: Register Composition

Register platform-specific compositions in src/Root.tsx:

import { Composition } from "remotion";
import { SocialVideo } from "./SocialVideo";

export const RemotionRoot: React.FC = () => {
  return (
    \x3C>
      {/* Vertical (Reels/TikTok/Shorts) */}
      \x3CComposition
        id="ReelsVideo"
        component={SocialVideo}
        durationInFrames={1800}
        fps={60}
        width={1080}
        height={1920}
        defaultProps={{ text: "Hook text here" }}
      />

      {/* Square (Feed post) */}
      \x3CComposition
        id="FeedPost"
        component={SocialVideo}
        durationInFrames={900}
        fps={60}
        width={1080}
        height={1080}
        defaultProps={{ text: "Feed content" }}
      />

      {/* Landscape (YouTube) */}
      \x3CComposition
        id="YouTubeVideo"
        component={SocialVideo}
        durationInFrames={3600}
        fps={60}
        width={1920}
        height={1080}
        defaultProps={{ text: "YouTube content" }}
      />
    \x3C/>
  );
};

One project can have multiple compositions for multi-platform output. Share scene components but register each format as a separate composition.

Step 4: Build for Vertical-First

Vertical (9:16) is the dominant social format. Key patterns for mobile-optimized layouts:

import { useCurrentFrame, useVideoConfig, interpolate, spring, AbsoluteFill } from "remotion";

const VerticalScene: React.FC\x3C{ text: string }> = ({ text }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const textScale = spring({ frame, fps, config: { damping: 10, stiffness: 150 } });
  const opacity = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: "clamp" });

  return (
    \x3CAbsoluteFill style={{
      backgroundColor: "#1a1a2e",
      justifyContent: "center",
      alignItems: "center",
      padding: "0 60px",
    }}>
      \x3Ch1 style={{
        opacity,
        transform: `scale(${textScale})`,
        fontSize: 64,
        color: "white",
        textAlign: "center",
        lineHeight: 1.2,
      }}>
        {text}
      \x3C/h1>
    \x3C/AbsoluteFill>
  );
};

Vertical layout rules:

• Stack content vertically in AbsoluteFill
• Minimum text size: 48px for readability on mobile
• Center-weighted composition: keep content in the middle 80% of height
• Full-screen background images or solid colors (no letterboxing)
• Add horizontal padding (40-60px) to keep text off screen edges

Step 5: Render

Render each platform format as a separate output:

npx remotion render src/index.ts ReelsVideo out/reels.mp4
npx remotion render src/index.ts FeedPost out/feed-post.mp4
npx remotion render src/index.ts YouTubeVideo out/youtube.mp4

Preview in browser:

npx remotion preview src/index.ts

See tools/integrations/remotion.md for the full CLI command reference.

Output Format

Deliver a working social video project with:

1. src/Root.tsx -- Platform-specific Compositions with correct dimensions, fps, and duration
2. Scene components -- Reusable .tsx components that adapt to different aspect ratios
3. Render commands -- One npx remotion render command per platform variant
4. Preview command -- npx remotion preview src/index.ts for browser preview

Related Skills

• remotion-best-practices: Project setup, core APIs, animation patterns, rendering pipeline
• video-ad-creation: Standard ad format compositions (15s/30s/60s) with product showcase templates