{
  "schemaVersion": "1.0",
  "item": {
    "slug": "morfeo-remotion-style",
    "name": "Morfeo Remotion Style",
    "source": "tencent",
    "type": "skill",
    "category": "内容创作",
    "sourceUrl": "https://clawhub.ai/PauldeLavallaz/morfeo-remotion-style",
    "canonicalUrl": "https://clawhub.ai/PauldeLavallaz/morfeo-remotion-style",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/morfeo-remotion-style",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=morfeo-remotion-style",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md",
      "package.json",
      "references/AppleEmoji.tsx",
      "references/BrandIcon.tsx",
      "references/MorfeoStory-example.tsx",
      "references/styles.ts"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "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."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "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."
        },
        {
          "label": "Upgrade existing",
          "body": "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."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-23T16:43:11.935Z",
      "expiresAt": "2026-04-30T16:43:11.935Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
        "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/morfeo-remotion-style"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/morfeo-remotion-style",
    "agentPageUrl": "https://openagent3.xyz/skills/morfeo-remotion-style/agent",
    "manifestUrl": "https://openagent3.xyz/skills/morfeo-remotion-style/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/morfeo-remotion-style/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "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."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "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."
      },
      {
        "label": "Upgrade existing",
        "body": "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."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Morfeo Remotion Style",
        "body": "Style guide for Remotion videos matching Morfeo Academy's brand."
      },
      {
        "title": "Brand Colors",
        "body": "export const colors = {\n  lime: \"#cdff3d\",      // Primary accent - VERY IMPORTANT\n  black: \"#050508\",     // Background\n  darkGray: \"#111111\",  // Secondary bg\n  white: \"#FFFFFF\",     // Text\n  gray: \"#888888\",      // Muted text\n};"
      },
      {
        "title": "Typography",
        "body": "import { loadFont as loadDMSans } from \"@remotion/google-fonts/DMSans\";\nimport { loadFont as loadInstrumentSerif } from \"@remotion/google-fonts/InstrumentSerif\";\nimport { loadFont as loadJetBrainsMono } from \"@remotion/google-fonts/JetBrainsMono\";\n\nexport const fonts = {\n  heading: `${instrumentSerif}, serif`,  // Títulos - ALWAYS italic\n  body: `${dmSans}, sans-serif`,         // Cuerpo\n  mono: `${jetBrainsMono}, monospace`,   // Código\n};\n\nRules:\n\nHeadings: Instrument Serif, always italic, weight 400\nBody: DM Sans, weight 400-600\nCode/tech: JetBrains Mono"
      },
      {
        "title": "Emojis",
        "body": "Use Apple emojis via CDN (Remotion can't render system emojis):\n\n// See references/AppleEmoji.tsx for full component\n<AppleEmoji emoji=\"🤖\" size={28} />\n<InlineEmoji emoji=\"🎙️\" size={38} />  // For inline with text"
      },
      {
        "title": "Brand Icons (WhatsApp, Telegram, etc.)",
        "body": "Use inline SVGs, not icon libraries (they don't work in Remotion):\n\n// See references/BrandIcon.tsx for full component\n<BrandIcon brand=\"whatsapp\" size={44} />\n<BrandIcon brand=\"telegram\" size={44} />"
      },
      {
        "title": "Spring Config",
        "body": "spring({ \n  frame, \n  fps, \n  from: 0, \n  to: 1, \n  config: { damping: 15 }  // Standard damping\n});"
      },
      {
        "title": "Entry Sequence (staggered reveals)",
        "body": "Tag (frame 0-15): Fade in + slide from top\nEmoji (frame 15+): Scale spring from 0\nTitle (frame 30-50): Fade + slide from bottom\nLines (frame 60, 90, 120): Staggered fade in"
      },
      {
        "title": "Pulsing Effect (for emojis)",
        "body": "const pulse = interpolate(\n  frame % 60,\n  [0, 30, 60],\n  [1, 1.1, 1],\n  { extrapolateRight: \"clamp\" }\n);"
      },
      {
        "title": "Lime Tag (top of screen)",
        "body": "<div style={{\n  position: \"absolute\",\n  top: 80,\n  fontSize: 28,\n  fontWeight: 600,\n  fontFamily: fonts.body,\n  color: colors.black,\n  backgroundColor: colors.lime,\n  padding: \"12px 28px\",\n  borderRadius: 30,\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 8,\n}}>\n  <AppleEmoji emoji=\"🤖\" size={28} /> TEXT HERE\n</div>"
      },
      {
        "title": "Big Emoji (center)",
        "body": "<AppleEmoji emoji=\"🗣️\" size={140} />"
      },
      {
        "title": "Title (Instrument Serif italic)",
        "body": "<h1 style={{\n  fontSize: 68,\n  fontWeight: 400,\n  fontFamily: fonts.heading,\n  fontStyle: \"italic\",  // ALWAYS\n  color: colors.white,\n  textAlign: \"center\",\n  lineHeight: 1.15,\n}}>\n  Text with <span style={{ color: colors.lime }}>lime accent</span>\n</h1>"
      },
      {
        "title": "Video Specs",
        "body": "Format: 1080x1920 (9:16 vertical stories)\nFPS: 30\nDuration: 5 seconds (150 frames) per story\nBackground: Always colors.black (#050508)"
      },
      {
        "title": "Project Setup",
        "body": "npx create-video@latest --template blank\nnpm i @remotion/google-fonts"
      },
      {
        "title": "File Structure",
        "body": "src/\n├── styles.ts          # Colors & fonts exports\n├── AppleEmoji.tsx     # Emoji component\n├── BrandIcon.tsx      # Brand icons (WhatsApp, Telegram, etc.)\n├── [StoryName].tsx    # Individual stories\n└── Root.tsx           # Composition setup"
      },
      {
        "title": "References",
        "body": "references/styles.ts - Complete styles file\nreferences/AppleEmoji.tsx - Apple emoji component\nreferences/BrandIcon.tsx - Brand icons component\nreferences/MorfeoStory-example.tsx - Full story example"
      },
      {
        "title": "DO NOT",
        "body": "❌ Use system fonts (won't render)\n❌ Use icon libraries like simple-icons (won't work)\n❌ Use non-italic headings\n❌ Use colors outside the palette\n❌ Forget the lime accent color"
      }
    ],
    "body": "Morfeo Remotion Style\n\nStyle guide for Remotion videos matching Morfeo Academy's brand.\n\nBrand Colors\nexport const colors = {\n  lime: \"#cdff3d\",      // Primary accent - VERY IMPORTANT\n  black: \"#050508\",     // Background\n  darkGray: \"#111111\",  // Secondary bg\n  white: \"#FFFFFF\",     // Text\n  gray: \"#888888\",      // Muted text\n};\n\nTypography\nimport { loadFont as loadDMSans } from \"@remotion/google-fonts/DMSans\";\nimport { loadFont as loadInstrumentSerif } from \"@remotion/google-fonts/InstrumentSerif\";\nimport { loadFont as loadJetBrainsMono } from \"@remotion/google-fonts/JetBrainsMono\";\n\nexport const fonts = {\n  heading: `${instrumentSerif}, serif`,  // Títulos - ALWAYS italic\n  body: `${dmSans}, sans-serif`,         // Cuerpo\n  mono: `${jetBrainsMono}, monospace`,   // Código\n};\n\n\nRules:\n\nHeadings: Instrument Serif, always italic, weight 400\nBody: DM Sans, weight 400-600\nCode/tech: JetBrains Mono\nEmojis\n\nUse Apple emojis via CDN (Remotion can't render system emojis):\n\n// See references/AppleEmoji.tsx for full component\n<AppleEmoji emoji=\"🤖\" size={28} />\n<InlineEmoji emoji=\"🎙️\" size={38} />  // For inline with text\n\nBrand Icons (WhatsApp, Telegram, etc.)\n\nUse inline SVGs, not icon libraries (they don't work in Remotion):\n\n// See references/BrandIcon.tsx for full component\n<BrandIcon brand=\"whatsapp\" size={44} />\n<BrandIcon brand=\"telegram\" size={44} />\n\nAnimation Style\nSpring Config\nspring({ \n  frame, \n  fps, \n  from: 0, \n  to: 1, \n  config: { damping: 15 }  // Standard damping\n});\n\nEntry Sequence (staggered reveals)\nTag (frame 0-15): Fade in + slide from top\nEmoji (frame 15+): Scale spring from 0\nTitle (frame 30-50): Fade + slide from bottom\nLines (frame 60, 90, 120): Staggered fade in\nPulsing Effect (for emojis)\nconst pulse = interpolate(\n  frame % 60,\n  [0, 30, 60],\n  [1, 1.1, 1],\n  { extrapolateRight: \"clamp\" }\n);\n\nCommon Elements\nLime Tag (top of screen)\n<div style={{\n  position: \"absolute\",\n  top: 80,\n  fontSize: 28,\n  fontWeight: 600,\n  fontFamily: fonts.body,\n  color: colors.black,\n  backgroundColor: colors.lime,\n  padding: \"12px 28px\",\n  borderRadius: 30,\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 8,\n}}>\n  <AppleEmoji emoji=\"🤖\" size={28} /> TEXT HERE\n</div>\n\nBig Emoji (center)\n<AppleEmoji emoji=\"🗣️\" size={140} />\n\nTitle (Instrument Serif italic)\n<h1 style={{\n  fontSize: 68,\n  fontWeight: 400,\n  fontFamily: fonts.heading,\n  fontStyle: \"italic\",  // ALWAYS\n  color: colors.white,\n  textAlign: \"center\",\n  lineHeight: 1.15,\n}}>\n  Text with <span style={{ color: colors.lime }}>lime accent</span>\n</h1>\n\nVideo Specs\nFormat: 1080x1920 (9:16 vertical stories)\nFPS: 30\nDuration: 5 seconds (150 frames) per story\nBackground: Always colors.black (#050508)\nProject Setup\nnpx create-video@latest --template blank\nnpm i @remotion/google-fonts\n\nFile Structure\nsrc/\n├── styles.ts          # Colors & fonts exports\n├── AppleEmoji.tsx     # Emoji component\n├── BrandIcon.tsx      # Brand icons (WhatsApp, Telegram, etc.)\n├── [StoryName].tsx    # Individual stories\n└── Root.tsx           # Composition setup\n\nReferences\nreferences/styles.ts - Complete styles file\nreferences/AppleEmoji.tsx - Apple emoji component\nreferences/BrandIcon.tsx - Brand icons component\nreferences/MorfeoStory-example.tsx - Full story example\nDO NOT\n❌ Use system fonts (won't render)\n❌ Use icon libraries like simple-icons (won't work)\n❌ Use non-italic headings\n❌ Use colors outside the palette\n❌ Forget the lime accent color"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/PauldeLavallaz/morfeo-remotion-style",
    "publisherUrl": "https://clawhub.ai/PauldeLavallaz/morfeo-remotion-style",
    "owner": "PauldeLavallaz",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/morfeo-remotion-style",
    "downloadUrl": "https://openagent3.xyz/downloads/morfeo-remotion-style",
    "agentUrl": "https://openagent3.xyz/skills/morfeo-remotion-style/agent",
    "manifestUrl": "https://openagent3.xyz/skills/morfeo-remotion-style/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/morfeo-remotion-style/agent.md"
  }
}