morfeo-remotion-style

name	morfeo-remotion-style
description	Morfeo Academy's Remotion video style guide. Use when creating Remotion videos, stories, or animations for Paul/Morfeo Academy. Triggers on "estilo Morfeo", "mi estilo Remotion", "video para Morfeo", "story estilo Morfeo", or any Remotion video request from Paul.

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