Communitygithub.com

nexu-io/hyperframes

Name: nexu-io/hyperframes
Author: Community

Video-Kompositionen, Animationen, Titel, Overlays, Untertitel, Voiceovers, audio-reaktive Visuals und Szenenübergänge in HyperFrames HTML erstellen.

Was ist hyperframes?

HyperFrames ist ein Skill zur Erstellung von HTML-basierten Videoinhalten mit umfassenden Funktionen für die Videoproduktion. Es ermöglicht die Erstellung von Animationen, Titelcards, Overlays, Untertiteln (synchronisiert mit Audio), Voiceovers (Text-to-Speech) und audio-reaktiven Effekten wie Beat-Synchronisation, Glühen und Pulsieren, die von Musik gesteuert werden. Der Skill unterstützt zudem animierte Texthervorhebungen (Marker-Striche, handgezeichnete Kreise, Scribble, Sketchout) und verschiedene Szenenübergänge wie Crossfades, Wipes, Reveals und Shader-Übergänge. Er ist ideal für Entwickler, die mit HyperFrames HTML arbeiten und eine nahtlose Integration in die gesamte Videoproduktions-Workflow benötigen, von der Kompositionserstellung bis zum Rendern. Der Skill ist für CLI-Tools wie init, lint, preview, render, transcribe und tts optimiert, wobei die entsprechenden CLI-Befehle im separaten hyperframes-cli Skill behandelt werden.

Funktioniert mit~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/nexu-io/open-design/tree/main/design-templates/hyperframes

Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

ChatGPT Claude Gemini Grok Perplexity DeepSeek

Dokumentation

Was macht hyperframes?

Erstellen Sie Video-Kompositionen, Animationen, Titelcards, Overlays, Untertitel, Voiceovers, audio-reaktive Visuals und Szenenübergänge in HyperFrames HTML. Verwenden Sie diesen Skill, wenn Sie aufgefordert werden, HTML-basierte Videoinhalte zu erstellen, Untertitel oder Untertitel synchron zum Audio hinzuzufügen, Text-to-Speech-Erzählungen zu generieren, audio-reaktive Animationen (Beat Sync, Glow, Pulse, gesteuert durch Musik) zu erstellen, animierte Texthervorhebungen (Marker-Striche, handgezeichnete Kreise, Burst Lines, Scribble, Sketchout) hinzuzufügen oder Übergänge zwischen Szenen (Crossfades, Wipes, Reveals, Shader-Übergänge) einzufügen. Deckt die Kompositionserstellung, das Timing, Medien und den gesamten Videoproduktions-Workflow ab. Für CLI-Befehle (init, lint, preview, render, transcribe, tts) siehe den Skill 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.