Everything you need to write instructions, configure your brand, generate 1920×1080 overlay graphics, and export them for any video editor — every type explained, every field documented.
Frame Graphics is a single HTML file. Open it in your browser and it runs entirely on your machine — no server involved at any point.
You write instructions in plain text — one line per graphic. The parser reads each line and renders a 1920×1080 PNG for every valid instruction. Every graphic uses your brand colors and heading font automatically. When you're done, download individual PNGs or ZIP the entire set as a numbered archive.
The tool makes no outbound network calls during use. After fonts load from Google Fonts CDN on first open (and cache in your browser), Frame Graphics works completely offline. Projects are saved as JSON files on your machine — not in a cloud account.
Every graphic is defined by a single line of plain text. The parser is forgiving — you don't need to get every field right on the first try.
stat · barchart · lowerthirdat or any fields. If omitted, the type's default position is used.
at 1:47. Does not affect rendering. Used to label the generated card and to name the file in the ZIP export.
title "Is a CS Degree Worth It?" · value "$40k"A complete line with all parts present:
The same line with only required fields:
Both produce identical output — position defaults to top-right for stat, and the timestamp is optional. Type names are case-insensitive.
Lines starting with // or # are treated as comments and completely ignored by the parser. Use them to label sections of your instruction set, leave notes, or temporarily disable a graphic without deleting it.
bar chart for barchart, line chart for linechart, pie chart for piechart, and lower third for lowerthird. The parser reads both forms. Use whichever reads more naturally to you when writing.Every type, its required and optional fields, default position, and a copy-ready example instruction.
| Type | Fields | Default position |
|---|---|---|
| intro | title, subtitle | center |
| outro | title, subtitle | center |
| section | title | center |
| lowerthird | name, title (or label) | bottom-left |
| stat | value, label | top-right |
| barchart | title, labels, values | middle-right |
| linechart | title, labels, values | middle-right |
| piechart | title, labels, values | middle-right |
| quote | text, author | middle-left |
| list | title, items | middle-right |
| steps | title, items | middle-right |
| progress | label, value | bottom-right |
labels, values, and items fields accept comma-separated lists inside a single quoted string: labels "A,B,C". Do not put spaces after commas unless you want them as part of the label text. Leading and trailing whitespace around each item is trimmed automatically.Position controls where on the 1920×1080 canvas a graphic is placed. Include it immediately after the type name, before at or any fields.
| Position | Where on canvas | Best used for |
|---|---|---|
| top-left | Top-left, PAD margin (52px) | Secondary callouts, logo placement context |
| top-center | Top edge, horizontally centered | Chapter titles, video stage headers |
| top-right | Top-right, PAD margin | Stat cards, running counters |
| middle-left | Vertically centered, left aligned | Pull quotes, interview captions |
| middle-center | Exactly centered on canvas | Central callouts, primary data emphasis |
| middle-right | Vertically centered, right aligned | Charts, lists, steps — the default data position |
| bottom-left | Bottom-left, PAD margin | Lower thirds, source citations |
| bottom-center | Bottom edge, centered | Captions, page references |
| bottom-right | Bottom-right, PAD margin | Progress bars, percentage callouts |
| center | Alias for middle-center | Intro, outro, section (centered) |
| full-width | Spans the full width of the canvas | Section banners used as full-frame overlays |
Timestamps are optional labels that tell you — and your video editor — when in the video a graphic appears.
Add at M:SS or at H:MM:SS immediately after the position (or after the type, if position is omitted). The timestamp has no effect on how the graphic looks — it's a label only.
Timestamps serve two purposes:
1:47. Glancing at the card grid gives you a timestamped shot list of the video's graphic layer.01-0:00-intro.png, 02-1:47-stat.png, and so on. The timecode is in the filename — import the folder into your editing timeline and the files sort into the correct order automatically.at that doesn't match a position keyword is treated as the timestamp. at 1:47, at 12:30, and at 00:03:15 all work. If you omit the timestamp, the card is labelled by its index only in the ZIP archive.Three settings control how every generated graphic looks. Set them once before generating — or change them and regenerate to produce a new branded set instantly.
Every generated card can be adjusted after generation without re-running the full instruction set.
| Control | What it does | Notes |
|---|---|---|
| 9-dot position grid | Repositions the graphic on the canvas. Click any of the nine dots to move the graphic to that zone and re-render the card immediately. | Does not update the instruction text — only affects the rendered card. |
| Size slider (40–200%) | Scales the graphic element within the canvas. 100% is the natural render size. Scale down to fit tighter into a composition; scale up for emphasis. | Default 100 |
| Opacity slider (10–100%) | Reduces the opacity of the graphic. Use to create semi-transparent overlays that let the video background show through. Affects the exported PNG. | Default 100 |
| ✎ Edit | Opens inline field editors for the card's text content — title, value, label, items, etc. Edit any field, then hit Apply + Re-render. Only this card re-renders; the rest are untouched. | Re-render uses current brand settings. |
| PNG ↓ | Downloads the current card as a PNG file named [timestamp]-[type].png. Reflects the current size, opacity, and position settings. |
Individual download, not ZIP. |
| ✕ | Permanently removes the card from the current set. Does not modify the instruction text. | Cannot be undone without regenerating. |
Frame Graphics produces 1920×1080 PNG files ready for any video editor. Download them individually or as a batch ZIP.
Click PNG ↓ on any card. The file downloads immediately to your Downloads folder. Filename: [timestamp]-[type].png — e.g. 1:47-stat.png. If no timestamp was set, the card's index is used instead.
When one or more cards are present, the ZIP ALL (n) button appears in the top navigation bar. Click it to package every card as a PNG in a single ZIP archive. The archive downloads as frame-graphics.zip.
File naming inside the archive follows this pattern:
The zero-padded index ensures files sort correctly when imported as a folder into any video editor. The timestamp in the filename tells you exactly where in the timeline each graphic belongs.
| Editor | How to import |
|---|---|
| Adobe Premiere Pro | File → Import. Place on a video track above your footage. Set blend mode to Normal for opaque graphics, or use Multiply/Screen for compositing. |
| DaVinci Resolve | Import to Media Pool. Place on a video track. The dark background works as a natural overlay on dark footage; use Composite Mode for lighter backgrounds. |
| Final Cut Pro | Import to library. Add to timeline above the primary storyline. Adjust compositing blend mode if needed. |
| CapCut | Import to Media. Add to a PiP layer above your main video. Resize and reposition if needed, or use as full-frame graphic slides. |
| OBS Studio | Add → Image source. Browse to the PNG. Position as needed over your video source. Use the timestamp to know when to switch scenes or toggle visibility. |
Projects are JSON files stored on your machine. A project captures your instruction text and brand settings — enough to regenerate every graphic from scratch on any device.
Click Save in the top navigation bar. A project.json file downloads immediately. Move it to your project folder, rename it to match your video (e.g. cs-degree-audit-graphics.json), and keep it alongside your video project files.
Click Load in the top navigation bar. Select a .json project file. The instruction text loads into the textarea, brand settings restore, and any previously generated graphics re-render automatically. You're back to exactly where you left off — on any device, in any browser.
value "$40k" not value $40k. An unquoted value that contains spaces will be silently misread by the parser. Single-word values without spaces technically work unquoted, but double-quoting everything is the safest habit.labels and values must match. The parser takes the minimum of the two. If you write 5 labels but 4 values, you get 4 bars/points and the fifth label is silently dropped. Count your commas.value "250" renders a full bar (100%). Entering a non-numeric value renders an empty bar (0%). The label is purely cosmetic and can say anything.All 12 types, their fields, valid positions, and key behaviors on one page.