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.
Style guide for Remotion videos matching Morfeo Academy's brand.
export const colors = {
lime: "#cdff3d", // Primary accent - VERY IMPORTANT
black: "#050508", // Background
darkGray: "#111111", // Secondary bg
white: "#FFFFFF", // Text
gray: "#888888", // Muted text
};
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:
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
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} />
spring({
frame,
fps,
from: 0,
to: 1,
config: { damping: 15 } // Standard damping
});
const pulse = interpolate(
frame % 60,
[0, 30, 60],
[1, 1.1, 1],
{ extrapolateRight: "clamp" }
);
<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>
<AppleEmoji emoji="🗣️" size={140} />
<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>
colors.black (#050508)npx create-video@latest --template blank
npm i @remotion/google-fonts
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/styles.ts - Complete styles filereferences/AppleEmoji.tsx - Apple emoji componentreferences/BrandIcon.tsx - Brand icons componentreferences/MorfeoStory-example.tsx - Full story example