Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Content Creation
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.
skill openclawclawhub Free
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.
โฌ 0 downloads โ
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- SKILL.md, package.json, references/AppleEmoji.tsx, references/BrandIcon.tsx, references/MorfeoStory-example.tsx, references/styles.ts
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- PauldeLavallaz
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
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} />
Spring Config
spring({ frame, fps, from: 0, to: 1, config: { damping: 15 } // Standard damping });
Entry Sequence (staggered reveals)
Tag (frame 0-15): Fade in + slide from top Emoji (frame 15+): Scale spring from 0 Title (frame 30-50): Fade + slide from bottom 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" } );
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
Category context
Writing, remixing, publishing, visual generation, and marketing content production.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
3 Files1 Docs1 Scripts1 Config
- SKILL.md
- references/styles.ts
- package.json
- references/AppleEmoji.tsx
- references/BrandIcon.tsx
- references/MorfeoStory-example.tsx