Morfeo Remotion Style

Style guide for Remotion videos matching Morfeo Academy's brand.

Brand Colors

export const colors = {
  lime: "#cdff3d",      // Primary accent - VERY IMPORTANT
  black: "#050508",     // Background
  darkGray: "#111111",  // Secondary bg
  white: "#FFFFFF",     // Text
  gray: "#888888",      // Muted text
};

Typography

import { loadFont as loadDMSans } from "@remotion/google-fonts/DMSans";
import { loadFont as loadInstrumentSerif } from "@remotion/google-fonts/InstrumentSerif";
import { loadFont as loadJetBrainsMono } from "@remotion/google-fonts/JetBrainsMono";

export const fonts = {
  heading: `${instrumentSerif}, serif`,  // Títulos - ALWAYS italic
  body: `${dmSans}, sans-serif`,         // Cuerpo
  mono: `${jetBrainsMono}, monospace`,   // Código
};

Rules:

• Headings: Instrument Serif, always italic, weight 400
• Body: DM Sans, weight 400-600
• Code/tech: JetBrains Mono

Emojis

Use Apple emojis via CDN (Remotion can't render system emojis):

// See references/AppleEmoji.tsx for full component
<AppleEmoji emoji="🤖" size={28} />
<InlineEmoji emoji="🎙️" size={38} />  // For inline with text

Brand Icons (WhatsApp, Telegram, etc.)

Use inline SVGs, not icon libraries (they don't work in Remotion):

// See references/BrandIcon.tsx for full component
<BrandIcon brand="whatsapp" size={44} />
<BrandIcon brand="telegram" size={44} />

Animation Style

Spring Config

spring({ 
  frame, 
  fps, 
  from: 0, 
  to: 1, 
  config: { damping: 15 }  // Standard damping
});

Entry Sequence (staggered reveals)

1. Tag (frame 0-15): Fade in + slide from top
2. Emoji (frame 15+): Scale spring from 0
3. Title (frame 30-50): Fade + slide from bottom
4. Lines (frame 60, 90, 120): Staggered fade in

Pulsing Effect (for emojis)

const pulse = interpolate(
  frame % 60,
  [0, 30, 60],
  [1, 1.1, 1],
  { extrapolateRight: "clamp" }
);

Common Elements

Lime Tag (top of screen)

<div style={{
  position: "absolute",
  top: 80,
  fontSize: 28,
  fontWeight: 600,
  fontFamily: fonts.body,
  color: colors.black,
  backgroundColor: colors.lime,
  padding: "12px 28px",
  borderRadius: 30,
  display: "flex",
  alignItems: "center",
  gap: 8,
}}>
  <AppleEmoji emoji="🤖" size={28} /> TEXT HERE
</div>

Big Emoji (center)

<AppleEmoji emoji="🗣️" size={140} />

Title (Instrument Serif italic)

<h1 style={{
  fontSize: 68,
  fontWeight: 400,
  fontFamily: fonts.heading,
  fontStyle: "italic",  // ALWAYS
  color: colors.white,
  textAlign: "center",
  lineHeight: 1.15,
}}>
  Text with <span style={{ color: colors.lime }}>lime accent</span>
</h1>

Video Specs

• Format: 1080x1920 (9:16 vertical stories)
• FPS: 30
• Duration: 5 seconds (150 frames) per story
• Background: Always colors.black (#050508)

Project Setup

npx create-video@latest --template blank
npm i @remotion/google-fonts

File Structure

src/
├── styles.ts          # Colors & fonts exports
├── AppleEmoji.tsx     # Emoji component
├── BrandIcon.tsx      # Brand icons (WhatsApp, Telegram, etc.)
├── [StoryName].tsx    # Individual stories
└── Root.tsx           # Composition setup

References

• references/styles.ts - Complete styles file
• references/AppleEmoji.tsx - Apple emoji component
• references/BrandIcon.tsx - Brand icons component
• references/MorfeoStory-example.tsx - Full story example

DO NOT

• ❌ Use system fonts (won't render)
• ❌ Use icon libraries like simple-icons (won't work)
• ❌ Use non-italic headings
• ❌ Use colors outside the palette
• ❌ Forget the lime accent color