Communitygithub.com

nexu-io/chat-motion-overlay

Génère des superpositions de chat animées configurables à partir d'une transcription ou d'une capture d'écran, incluant des scènes en bulles, des conteneurs de chat style application, des cadres d'appareil optionnels, des avatars prédéfinis ou téléchargés, des règles d'affichage des pseudonymes, et des bundles Remotion prêts pour la vidéo transparente.

Qu'est-ce que chat-motion-overlay ?

Ce skill permet de créer des superpositions de chat animées et personnalisables à partir d'une transcription ou d'une capture d'écran. Il est conçu pour les développeurs et créateurs de contenu utilisant des agents IA (comme Codex) qui souhaitent produire rapidement des clips vidéo courts pour des plateformes comme Douyin, des vidéos de démonstration, des reconstitutions d'histoires, ou des preuves de messages sociaux. Il supporte différents styles d'affichage : scènes en bulles simples, conteneurs de chat imitant des applications, cadres d'appareil (téléphone, etc.) et permet d'utiliser des avatars prédéfinis ou téléchargés, ainsi que de définir des règles d'affichage des pseudonymes. Fondamentalement, il génère des bundles Remotion prêts à être rendus, y compris des superpositions alpha transparentes, ce qui les rend idéaux pour des workflows intégrés dans Hyperframe ou Remotion. Le skill valorise la réutilisabilité et la configuration, permettant de produire des clips courts engageants sans avoir à coder manuellement chaque animation.

Compatible avec~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/nexu-io/open-design/tree/main/skills/chat-motion-overlay

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Que fait chat-motion-overlay ?

Génère des superpositions de chat animées configurables à partir d'une transcription ou d'une capture d'écran, incluant des scènes en bulles simples, des conteneurs de chat style application, des cadres d'appareil optionnels, des avatars prédéfinis ou téléchargés, des règles d'affichage des pseudonymes, et des bundles Remotion prêts pour la vidéo transparente. Utilisez ce skill lorsque Codex doit créer des clips de chat réutilisables pour Douyin, des vidéos de démonstration, des reconstitutions d'histoires, des scènes de preuve de messages sociaux, ou des superpositions alpha intégrable pour les workflows Hyperframe et Remotion.

Fonctionnalités

  • Génération à partir de transcription ou capture d'écran : Entrez une conversation textuelle ou une image pour générer automatiquement l'overlay.
  • Scènes en bulles : Affichage classique des messages dans des bulles.
  • Conteneurs de chat style application : Simule l'interface d'une application de messagerie.
  • Cadres d'appareil : Ajoutez un cadre de smartphone ou autre pour un rendu plus réaliste (optionnel).
  • Avatars personnalisables : Utilisez des avatars prédéfinis ou téléchargez vos propres images.
  • Règles d'affichage des pseudonymes : Configurez comment les noms des participants sont affichés.
  • Sortie Remotion : Génère des bundles compatibles avec Remotion pour le rendu vidéo, y compris en alpha transparent.
  • Réutilisable : Les clips générés peuvent être réutilisés dans différents contextes.

Utilisation

Pour utiliser ce skill avec un agent comme Codex, fournissez une transcription de chat (format texte structuré) ou une capture d'écran, ainsi que les options de configuration souhaitées.

Exemple de configuration

{
  "transcript": [
    {"user": "Alice", "message": "Salut tout le monde !"},
    {"user": "Bob", "message": "Bonjour Alice !"}
  ],
  "style": "bubble",
  "deviceFrame": false,
  "nicknameDisplay": "inline",
  "avatarSource": "preset"
}

Paramètres de configuration

ParamètreTypeDescriptionValeurs possibles
transcriptarrayListe des messages de chatTableau d'objets {user, message}
screenshotstringChemin ou URL d'une capture d'écranChemin de fichier ou URL
stylestringStyle de l'overlaybubble, app
deviceFramebooleanAjouter un cadre d'appareiltrue, false
nicknameDisplaystringRègle d'affichage des pseudonymesinline, above, hidden
avatarSourcestringSource des avatarspreset, upload
avatarsobjectMapping des avatars (si avatarSource est upload)Objet avec noms d'utilisateur et URLs d'images

Sortie

Le skill génère un bundle Remotion prêt à être rendu, qui peut être utilisé directement dans des workflows de production vidéo.

Exemple de sortie

output/
├── bundle.zip
├── manifest.json
└── assets/
    ├── frames/
    ├── audio/ (optionnel)
    └── alpha/ (si sortie transparente)

Remarques

  • Ce skill est conçu pour être utilisé avec des agents IA capables d'exécuter des tâches de génération vidéo (comme Codex).
  • Pour une intégration avec Hyperframe, consultez la documentation de Remotion sur les superpositions alpha.
  • Les avatars téléchargés doivent être aux formats PNG ou JPG.
  • La transcription peut être fournie en JSON ou dans un format texte structuré simple.

Licence

Ce skill est fourni tel quel, sans garantie expresse. Voir le dépôt nexu-io/chat-motion-overlay pour plus d'informations.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

nexu-io/create-video-storyboard

Use this plugin when the user wants a video concept, storyboard, shot list, prompt pack, or render-ready motion brief for a product, campaign, or explainer.

nexu-io/design-brief

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".

nexu-io/fal-lip-sync

Create talking head videos and lip sync audio to video via fal.ai. Useful for explainer avatars, multilingual dubbing previews, and social cuts.

nexu-io/frontend-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.

nexu-io/hatch-pet

Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references. Use when a user wants to hatch a Codex pet, create a custom animated pet, or build a built-in pet asset with an 8x9 atlas, transparent unused cells, row-by-row animation prompts, QA contact sheets, preview videos, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.

nexu-io/hyperframes

Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.

nexu-io/pptx-html-fidelity-audit

Audit a python-pptx export against its source HTML deck, identify layout/content drift (footer overflow, cropped content, missing italic/em, lost styling, off-rhythm spacing), and re-export with strict footer-rail + cursor-flow layout discipline. Use this skill whenever the user has a .pptx that was generated from an HTML slide deck and asks to compare/audit/verify/fix the export — including phrases like "compare ppt with html", "fidelity audit", "fix the pptx", "ppt is cut off", "footer overlap", "italic missing in pptx", "re-export the deck", "pptx-html-fidelity-audit", or any case where a python-pptx → HTML round-trip needs verification or repair. Also trigger when the user shows you a deck.html and a deck.pptx side by side and is debugging visual differences.

nexu-io/remotion

Programmatic video creation with React. Useful for branded explainers, social cuts, dashboards-to-video, and reproducible motion graphics.

nexu-io/social-media-dashboard

Creator-facing social media analytics dashboard in a single HTML file. A platform switcher (X / LinkedIn / YouTube / Instagram), a row of KPI cards (followers, engagement rate, likes, reposts), a follower-growth chart, a "top post this week" preview, and a trending topics / top comments side panel. Use when the brief mentions a "social media dashboard", "creator analytics", "social analytics", or names specific platforms (X, Twitter, LinkedIn, YouTube, Instagram, TikTok) together with metrics like followers, engagement, likes, reposts.

nexu-io/sora

Generate, remix, and manage short video clips via OpenAI's Sora API. Useful for cinematic shots, b-roll, and rapid concept video iteration.

nexu-io/ui-ux-pro-max

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

nexu-io/video-hyperframes

Hyperframes / Remotion-compatible continuous frame animation with autoplay support.

nexu-io/video-shortform

Short-form video generation skill — 3-10 second clips for product reveals, motion teasers, ambient loops. Defaults to Seedance 2 but works the same with Kling 3 / 4, Veo 3 or Sora 2. Output is one MP4 saved to the project folder. When the workspace also ships an interactive-video / hyperframes skill, prefer composing several short shots into a single timeline rather than one long monolithic clip.

nexu-io/video-template-frame-bold-poster

Use this plugin when the user wants a "Bold Poster Frame" HyperFrames motion video — A 1970s European editorial poster in motion — a red rule draws across, a giant tilted figure drops in, a three-line headline rises line-by-line, an italic serif standfirst fades.

nexu-io/video-template-frame-bold-signal

Use this plugin when the user wants a "Bold Signal Frame" HyperFrames motion video — Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.

nexu-io/video-template-frame-build-minimal

Use this plugin when the user wants a "Build Minimal Frame" HyperFrames motion video — Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.

nexu-io/video-template-frame-creative-voltage

Use this plugin when the user wants a "Creative Voltage Frame" HyperFrames motion video — Electric split with hand-drawn script — offset panels slide in, display title rises with an outlined word, script strokes itself in.

nexu-io/video-template-frame-data-chart-nyt

Use this plugin when the user wants a "NYT-Style Data Chart Frame" HyperFrames motion video — NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).

nexu-io/video-template-frame-data-rollup

Use this plugin when the user wants a "Data Rollup Frame" HyperFrames motion video — A native Remotion data frame — bars grow from zero by real data via spring physics while the figures roll 0→target in sync.

nexu-io/video-template-frame-product-promo-30s

Use this plugin when the user wants a "Product Promo · 30s" HyperFrames motion video — Multi-scene 30-second product promo: problem-type intro, brand reveal, benefits flowchart, product surfaces, value pillars, foundation, CTA outro. Forked from Nate Herk's hyperframes-student-kit (linear-promo-30s); brand-specific copy + assets replaced with generic placeholders.

Skills associés