Skip to main content
Impact: MEDIUM - Optimizes content for mobile viewing and engagement
This skill provides patterns for creating content optimized for social media platforms, with focus on mobile viewing, safe zones, and engagement tactics.

​
Safe Zone for UI Overlays

Keep key content in the center 80% to avoid platform UI elements. 
<AbsoluteFill style={{ padding: 10 }}>
  <div style={{ position: "absolute", top: 0 }}>Title</div>
  <div style={{ position: "absolute", bottom: 0 }}>CTA</div>
</AbsoluteFill>
Instagram, TikTok, and YouTube Shorts overlay UI elements (profile pic, buttons, captions) that can cover up to 20% of the screen. Always use safe zones.

​
Platform-Specific Safe Zones

Top margin: 12% (profile pic, camera icon)Bottom margin: 15% (like, comment, share buttons)Side margins: 5%
const SAFE_TOP = height * 0.12;
const SAFE_BOTTOM = height * 0.15;
const SAFE_SIDES = width * 0.05;

​
Mobile-First Text Sizing

Text must be readable on small screens. Minimum 48px for headlines. 
const TITLE_SIZE = 24;
const BODY_SIZE = 14;
Using percentage-based sizing ensures text scales appropriately across different resolutions, while the Math.max() enforces minimum readable sizes.

​
Text Size Guidelines

Minimum: 48pxRecommended: 8% of video width
const headlineSize = Math.max(48, width * 0.08);
Minimum: 28pxRecommended: 4.5% of video width
const bodySize = Math.max(28, width * 0.045);
Minimum: 24pxRecommended: 3.5% of video width
const captionSize = Math.max(24, width * 0.035);

​
Hook in First Frames

Social content needs immediate visual interest. Add movement from frame 0. 
const entrance = spring({ frame: frame - 30, fps }); // Starts after 1 second
The first 0.5 seconds determine whether viewers keep watching. Always have visible motion or visual interest from frame 0.

​
High Contrast Colors

Use bold, saturated colors that pop on mobile screens. 
// Good for social
const COLOR_PRIMARY = "#FF3366";
const COLOR_ACCENT = "#00D4FF";
const COLOR_BG = "#0A0A0A";

// Avoid muted/pastel colors that look washed out
// const COLOR_PRIMARY = "#C4A4A4"; // Too muted
Mobile screens vary widely in quality, brightness, and settings. High contrast ensures your content is visible in all conditions:
  • Bright sunlight
  • Low brightness settings
  • Older/cheaper screens
  • Compressed video delivery
Vibrant primaries:
  • Red: #FF3366, #FF0055
  • Blue: #00D4FF, #0099FF
  • Green: #00FF88, #22FF66
  • Purple: #CC00FF, #9933FF
Dark backgrounds:
  • #0A0A0A (near black)
  • #1A1A2E (dark blue-gray)
Light backgrounds:
  • #FFFFFF (white)
  • #F0F0F0 (light gray)

​
Loop-Friendly Endings

Design animations that can seamlessly loop. 
const TOTAL_DURATION = durationInFrames;
const loopProgress = (frame % TOTAL_DURATION) / TOTAL_DURATION;

// Or fade to start state at the end
const fadeOut = interpolate(
  frame,
  [TOTAL_DURATION - 15, TOTAL_DURATION],
  [1, 0],
);
Looping content gets more replay value on platforms like Instagram Reels and TikTok, where videos auto-replay.

​
Aspect Ratios by Platform

Instagram Reels

Ratio: 9:16 (vertical)Resolution: 1080x1920
width: 1080,
height: 1920

TikTok

Ratio: 9:16 (vertical)Resolution: 1080x1920
width: 1080,
height: 1920

Instagram Stories

Ratio: 9:16 (vertical)Resolution: 1080x1920
width: 1080,
height: 1920

YouTube Shorts

Ratio: 9:16 (vertical)Resolution: 1080x1920
width: 1080,
height: 1920

​
Common Mistakes to Avoid

Don’t place important content at edges - It will be covered by platform UI. Use safe zones.
Don’t use small text - Minimum 48px for headlines, 28px for body text.
Don’t have static openings - Hook viewers immediately with motion from frame 0.
Don’t use muted colors - Mobile screens need high contrast and saturation to stand out.

​
Engagement Optimization

1

Immediate Hook

First 0.5 seconds must have:
  • Motion
  • Bold text
  • Bright colors
  • Clear value proposition
2

Constant Motion

Never let the video feel static:
  • Subtle background animations
  • Floating elements
  • Pulsing effects
  • Particle systems
3

Text Overlays

Use large, readable text throughout:
  • Captions for accessibility
  • Key points emphasized
  • Call-to-action visible
4

Loop Design

Make the ending flow back to the beginning:
  • Fade out to match fade in
  • Circular animations
  • Return to starting position

Typography

Optimize text for mobile

Spring Physics

Create engaging motion

Transitions

Smooth scene changes

Build docs developers (and LLMs) love

Get started for freeTalk to us