Communitygithub.com

nexu-io/hyperframes

Crie composições de vídeo, animações, cartelas de título, sobreposições, legendas, narrações, visuais reativos a áudio e transições de cena em HTML com HyperFrames.

O que é hyperframes?

HyperFrames é uma habilidade profissional para criação de conteúdo de vídeo baseado em HTML, voltada para desenvolvedores e criadores que desejam produzir animações, legendas sincronizadas, narrações por texto-para-fala, visuais reativos a áudio (como batida sincronizada, brilho e pulsação musical) e transições entre cenas (crossfades, cortinas, revelações, transições com shaders). Ela abrange todo o fluxo de produção de vídeo, incluindo composição, cronometragem, gerenciamento de mídia e efeitos avançados como destaques animados de texto (marcadores deslizantes, círculos desenhados à mão, linhas de explosão, rabiscos e esboços). Suportada por ferramentas CLI (init, lint, preview, render, transcribe, tts) através da habilidade complementar 'hyperframes-cli', ela é ideal para quem precisa construir vídeos interativos ou animados diretamente em HTML, sem depender de softwares de edição tradicionais. O fluxo de trabalho é totalmente baseado em código, permitindo versionamento, automação e integração com pipelines de desenvolvimento, sendo compatível com agentes de IA como Claude Code, Cursor e Codex.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/nexu-io/open-design/tree/main/design-templates/hyperframes

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que hyperframes faz?

Crie composições de vídeo, animações, cartelas de título, sobreposições, legendas, narrações, visuais reativos a áudio e transições de cena em HTML com HyperFrames. Use quando for solicitado a construir qualquer conteúdo de vídeo baseado em HTML, adicionar legendas ou legendas sincronizadas com áudio, gerar narração por texto-para-fala, criar animação reativa a áudio (sincronização de batida, brilho, pulsação conduzida por música), adicionar destaques animados de texto (marcadores deslizantes, círculos desenhados à mão, linhas de explosão, rabiscos, esboços) ou adicionar transições entre cenas (crossfades, cortinas, revelações, transições com shaders). Abrange autoramento de composição, cronometragem, mídia e todo o fluxo de trabalho de produção de vídeo. Para comandos CLI (init, lint, preview, render, transcribe, tts), consulte a habilidade hyperframes-cli.

Individual skills in this repo

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

nexu-io/chat-motion-overlay

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.

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

Habilidades Relacionadas