graphic-overlays

Layers timed, designed HTML graphic cards onto existing videos and renders to MP4 via hyperframes.

Updated Jun 20, 2026
One-click install
npx skills add https://github.com/Noetfield-Systems/SourceA --skill graphic-overlays-noetfield-systems
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: graphic-overlays
Source: https://github.com/Noetfield-Systems/SourceA/tree/main/commercial-video-factory/trustfield-storyboard-hf-v1/.agents/skills/graphic-overlays
Command: npx skills add https://github.com/Noetfield-Systems/SourceA --skill graphic-overlays-noetfield-systems

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires hyperframes, ffmpeg, ffprobe, gsap, and includes references (resource) and assets (resource) components.

What problem does it solve? Turning a raw talking-head, interview, or podcast recording into a polished, watchable social video normally requires manual motion-graphics work in an NLE editor. This Skill automates the packaging step: it transcribes the video locally, plans timed graphic overlay cards (titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture) synced to what is being said, and renders the result to MP4. ## Core Features & Use Cases - Transcript-driven card design: Extracts audio with ffmpeg, transcribes locally with Whisper via hyperframes transcribe, and derives card timing and content directly from the word-level transcript. - Design system with 10 styles, 4 layouts, 3 frames: A reference library (academic, editorial, minimal, spotlight, geom, whiteboard, audit, terminal, swiss, xhs) combined with split/stack/pip/overlay layouts and clean/hairline/polaroid video frames, plus GSAP-driven animation via data-anim attributes. - Density-aware pacing: Computes card count from video duration and information density, with a minimum of 5 cards and no upper clamp for long-form content. - Use Case: You have a 2-minute founder interview clip. The Skill asks you to confirm ratio (16:9 / 9:16 / 4:5), layout, style group, and card count, then writes each card's HTML, assembles a GSAP composition, and renders a packaged MP4 with lower-thirds and data callouts synced to the speech. ## Quick Start Ask the agent to add designed graphic overlay cards to your video file, for example: "Package my interview.mp4 with graphic overlays — titles, lower-thirds, and data callouts synced to what's being said."

Frequently Asked Questions about graphic-overlays

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add graphic overlays and lower-thirds to an existing video?

Provide the video file and confirm the output ratio, layout, style group, and card count when asked. The Skill transcribes the audio locally with Whisper, designs timed HTML cards from the transcript, assembles a GSAP composition, and renders the result to MP4 with hyperframes.

What is the difference between graphic overlays and embedded captions?

Graphic overlays add designed cards — titles, data callouts, quotes, side panels — on top of the playing video, while embedded captions render the spoken words as plain subtitles. Use the embedded-captions skill for subtitles and this skill for designed graphic packaging.

Does video overlay rendering require an API key or cloud service?

No. Transcription runs locally through Whisper via the hyperframes transcribe command, and rendering uses the hyperframes CLI with system ffmpeg and ffprobe. No third-party service, API key, or rate-limited proxy is involved.

What output aspect ratios does the overlay workflow support?

Three canvas ratios are supported: 16:9 landscape at 1920x1080, 9:16 portrait at 1080x1920, and 4:5 near-portrait at 1080x1350. The recommended ratio is inferred from the source video's aspect ratio before you confirm.

How many overlay cards are created for a video?

Card count is computed from video duration and transcript information density: a base pace per duration range is multiplied by a density factor, with a minimum of 5 cards and no upper limit. You can also request fewer, more, or an exact number of cards.

When should I not use graphic overlays on a video?

Do not use it for plain subtitles, for building a video from scratch, or for edits that change the source clip itself. Re-timing, recoloring, reframing, reordering, or audio changes are NLE editing tasks and are out of scope.