MCPInstall

chat-motion-overlay

by nexu-ioMedia & Creative

Generate configurable chat motion overlays from a transcript or screenshot, including plain bubble scenes, app-style chat containers, optional device frames, preset or uploaded avatars, nickname display rules, and transparent-video-ready Remotion bundles. Use when Codex needs to create reusable short-form chat clips for Douyin, demo videos, story reenactments, social-message proof scenes, or embeddable alpha overlays for Hyperframe and Remotion workflows.

Installs
848
Last 24h
+19
Trending rank
#5961
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/nexu-io/open-design --skill chat-motion-overlay
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads chat-motion-overlay automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Chat Motion Overlay

Turn chat content into a configurable motion overlay clip instead of a single hard-coded WeChat mock.

Workflow

  1. Normalize the chat input.

    • If the user gives a screenshot, extract the visible messages into the transcript format in references/input-format.md.
    • If the user gives plain text, keep one message per beat and preserve exact wording when authenticity matters.
    • For screenshots, use visible avatars as clues for participant count and message grouping, but do not crop or recreate avatar images by default. Infer participants and sides, then render with preset avatars unless the user provides avatar files or explicitly requests screenshot-derived avatars.

  2. Choose a scene config.

    • Read references/config-schema.md.
    • Decide container style, avatar mode, device frame, nickname mode, and delivery format before generating the bundle.
    • When the user has not provided enough information, follow the question policy in references/question-strategy.md.

  3. Build the scene spec.

    • Run scripts/build_chat_overlay_spec.py with a transcript and optional config JSON.
    • The script outputs a single JSON spec that Remotion can render directly.

  4. Prepare a renderable bundle.

    • Run scripts/prepare_chat_overlay_bundle.py.
    • It copies the Remotion template, injects src/chatSpec.ts, and copies any uploaded avatar files into public/.

  5. Render the target output.

    • Use the exact export commands in references/output-modes.md.
    • Prefer MOV（透明背景，可直接导入剪映 / PR / FCP 叠加） for editing, WebM（透明背景，适合网页 / 浏览器播放） for browsers, and editable engineering outputs when the user wants to keep composing downstream.

Supported Dimensions

  • container: none, wechat, telegram, messenger
  • avatarMode: preset, upload, mixed
  • deviceFrame: none, iphone-dynamic-island
  • nicknameMode: hidden, first-message-only, always
  • deliveryFormat:
    • mov: MOV（透明背景，可直接导入剪映 / PR / FCP 叠加）
    • webm: WebM（透明背景，适合网页 / 浏览器播放）
    • remotion: Remotion 工程（适合继续编辑和拼装）
    • hyperframe: Hyperframe 工程（适合作为模块继续复用）
    • json: JSON 数据（适合程序处理 / 自定义渲染）
    • preview: 预览图 / 预览工程（适合先确认效果）

Output Rules

  • Keep the composition root transparent for overlay outputs.
  • Use container: none for standalone bubble motion without an app shell.
  • Use container: wechat|telegram|messenger when the platform chrome is part of the story.
  • Treat uploaded avatars as content assets and copy them into public/ for the render bundle.
  • Prefer preset avatars when the user does not specify avatar files. Screenshot avatars may help identify participants, but recommend user-provided avatar files before attempting to crop or recreate avatars from screenshots.
  • Keep config-driven behavior explicit; do not silently switch style families.

Question Policy

  • Prefer inference first, questions second.
  • If the user gives enough information for a sensible default, continue and clearly state the assumptions.
  • Ask only for missing high-impact choices.
  • Keep the question set to 1-3 items.
  • Prefer user-facing wording over technical wording.
  • Ask about deliveryFormat using 格式（场景描述） labels, not internal render terms.
  • If the user says they do not care, continue with defaults and note them in the result.

Resources

  • Transcript format: references/input-format.md
  • Config fields and examples: references/config-schema.md
  • Question strategy: references/question-strategy.md
  • Output commands and targets: references/output-modes.md
  • Transcript/config to spec: scripts/build_chat_overlay_spec.py
  • Remotion bundle preparation: scripts/prepare_chat_overlay_bundle.py
  • Remotion render template: assets/remotion-template/

FAQ

What does the chat-motion-overlay skill do?

Generate configurable chat motion overlays from a transcript or screenshot, including plain bubble scenes, app-style chat containers, optional device frames, preset or uploaded avatars, nickname display rules, and transparent-video-ready Remotion bundles. Use when Codex needs to create reusable short-form chat clips for Douyin, demo videos, story reenactments, social-message proof scenes, or embeddable alpha overlays for Hyperframe and Remotion workflows.

How do I install chat-motion-overlay?

Run npx skills add https://github.com/nexu-io/open-design --skill chat-motion-overlay in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/chat-motion-overlay/ (personal) or .claude/skills/chat-motion-overlay/ (project).

Which AI agents can use chat-motion-overlay?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is chat-motion-overlay safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains chat-motion-overlay?

It is published by nexu-io in nexu-io/open-design. It has 848 recorded installs.

More from nexu-io/open-design

View all →

ui-ux-pro-max

nexu-io/open-design

Catalog-only UI/UX Pro Max entry. The full upstream templates, data, and search workflow are not bundled in OpenDesign.

Frontend & Design5.4K installs

frontend-design

nexu-io/open-design

Create distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working HTML/CSS/JS or framework code. Use for websites, landing pages, dashboards, React components, application screens, and UI beautification.

Frontend & Design4.8K installs

web-design-guidelines

nexu-io/open-design

Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.

Frontend & Design3.9K installs

design-brief

nexu-io/open-design

Parse a structured design brief written in I-Lang protocol format into a concrete design spec. Eliminates ambiguity from vague requests like "make it professional" by requiring explicit dimensions: palette, typography, layout, mood, density, and constraints. Trigger keywords: "design brief", "create a design brief", "ilang brief", "structured brief".

Frontend & Design3.4K installs

creative-director

nexu-io/open-design

AI creative director with recursive self-assessment: 20+ methodologies (SIT, TRIZ, Bisociation, SCAMPER, Synectics), 3-axis evaluation calibrated against Cannes/D&AD/HumanKind, 5-phase process from brief to presentation.

Media & Creative3.4K installs

threejs

nexu-io/open-design

Three.js skills for creating 3D elements and interactive experiences in the browser — scenes, materials, controls, and post-processing.

Media & Creative3.4K installs

Popular media & creative skills

View category →

hyperframes

heygen-com/hyperframes

Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.

Media & Creative1.2M installs

media-use

heygen-com/hyperframes

Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.

Media & Creative1.1M installs

hyperframes-registry

heygen-com/hyperframes

About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.

Media & Creative1M installs

hyperframes-creative

heygen-com/hyperframes

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.

Media & Creative916.5K installs

ai-video-generation

101-skills/superpowers

Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse

Media & Creative881.5K installs

ai-image-generation

101-skills/superpowers

Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image

Media & Creative880.3K installs