Skill: pauldelavallaz/morfeo-remotion-style (version 1.0.0)

--- 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 ```typescript export const colors = { lime: "#cdff3d", // Primary accent - VERY IMPORTANT black: "#050508", // Background darkGray: "#111111", // Secondary bg white: "#FFFFFF", // Text gray: "#888888", // Muted text }; ``` ## Typography ```typescript 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): ```typescript // 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): ```typescript // See references/BrandIcon.tsx for full component <BrandIcon brand="whatsapp" size={44} /> <BrandIcon brand="telegram" size={44} /> ``` ## Animation Style ### Spring Config ```typescript 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) ```typescript const pulse = interpolate( frame % 60, [0, 30, 60], [1, 1.1, 1], { extrapolateRight: "clamp" } ); ``` ## Common Elements ### Lime Tag (top of screen) ```typescript <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) ```typescript <AppleEmoji emoji="🗣️" size={140} /> ``` ### Title (Instrument Serif italic) ```typescript <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 ```bash 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


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)