Morfeo Remotion Style

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.

Security Scan

The skill is an internal-brand Remotion style guide whose files, instructions, and runtime behavior are consistent with its stated purpose and do not request unrelated privileges or secrets.

Purpose & Capability

Name/description (Morfeo Remotion style) matches the provided code and SKILL.md: colors, fonts, example components, and an example story. Required resources (none) and declared repository/author are consistent with a simple style guide.

Instruction Scope

SKILL.md contains only style guidance, example code, and a small project setup (npx create-video; npm i @remotion/google-fonts). It does not instruct reading unrelated files, environment variables, or transmitting user data to unexpected endpoints. The only external runtime network use is loading fonts (via @remotion/google-fonts) and Apple emoji PNGs from jsDelivr, which is consistent with rendering requirements.

Install Mechanism

There is no install spec (instruction-only). package.json and example code are normal for a JS style guide. No downloads from untrusted/personal servers or archive extraction are present in the skill bundle.

Credentials

The skill requests no environment variables, credentials, or config paths. All code runs locally in the Remotion project and uses public CDNs for fonts/images — this is proportionate for a video style guide.

Persistence & Privilege

The skill is not always-enabled and does not request persistent system privileges or modify other skills. It contains only static files and runtime instructions for building Remotion videos.

Assessment

This skill appears coherent and safe for its stated purpose. Things to consider before using: (1) runtime rendering will fetch fonts (via @remotion/google-fonts) and emoji images from public CDNs (Google/jsDelivr) — that causes outgoing network requests and could reveal build/host IPs and depend on CDN availability; (2) verify license compatibility for emoji assets and fonts if you redistribute rendered assets; (3) if you need fully offline or private builds, replace CDN font/emoji loading with local assets; and (4) if you want to confirm provenance, you can check the referenced GitHub repo (package.json repository URL) and verify the author.

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