---

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

  // 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

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)

   TEXT HERE

Big Emoji (center)

Title (Instrument Serif italic)

  Text with lime accent

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