FrameOPS / Cairons Tutorial

From a spreadsheet to switcher-ready lower thirds

Paste a list of names and titles, pick a style and download one transparent PNG per person. This guide takes you through it step by step; you’ll have your first ones in 5 minutes.

Open the app Download sample CSV
Nothing to installRuns in your computer’s browser: Chrome, Edge, Safari or Firefox.
Your data never leaves your machineThe app doesn’t upload anything to any server.
16:9 PNG with alpha channelAt 720p, 1080p or 4K, for ATEM, vMix, OBS or editing.
1

Prepare the list

Make a table in Excel, Numbers or Google Sheets: one row per person and the first row with the column headers. The headers can be anything you like.

nametitlecompany
Martha ShawHead of ProductionNorth Studio
Jordan ReedHostNorth Studio

Export it as CSV:

  • Excel: File → Save As → CSV UTF-8 (Comma delimited).
  • Numbers: File → Export To → CSV → text encoding Unicode (UTF-8).
  • Google Sheets: File → Download → Comma-separated values (.csv).
If accented characters look garbled (é, ñ…)The file isn’t UTF-8. Export it again choosing “CSV UTF-8”.

It doesn’t matter whether the separator is a semicolon, comma or tab: the app detects it automatically. If a value contains the separator itself, wrap it in quotes: "Guest; designer".

2

Load the data

Open the app. In the 1 · Data (CSV) block you have three options:

  • Click Open CSV file… and choose your file.
  • Copy cells straight from the spreadsheet and paste them into the text box (they paste as tab-separated, and that works just the same).
  • Click Sample to try it with made-up data.

You can also type or fix text in the box: the preview updates instantly.

name;title;company
Martha Shaw;Head of Production;North Studio
Jordan Reed;Host;North Studio
3

Choose what goes on each line

In 2 · Columns you tell the app which column goes on each line of the lower third:

FieldWhat it does
Line 1 (large)The main text, usually the name.
Line 2Secondary text, usually the title. Can be left as “none”.
Line 3Optional, smaller: company, city, @handle…
File nameColumn used to name the PNGs. On “automatic” it uses Line 1.

If someone has an empty cell, that line simply doesn’t appear on their lower third.

4

Adjust the style

In 3 · Style you pick one of the three designs:

Martha Shaw
Head of Production
Accent barBox with a colour stripe on the left.
Martha Shaw
Head of Production
Two boxesName on top; title in a box in the accent colour.
Martha Shaw
Head of Production
MinimalText only, with a shadow and an accent line.

Then adjust the rest:

  • Resolution: the same as your switcher’s or project’s video format (1080p, 4K or 720p).
  • Position: bottom or top, left, center or right.
  • Size and side and vertical margins (in pixels relative to 1080p).
  • Colours: box background, accent and text, plus the background opacity.
  • Line 1 in UPPERCASE, if you prefer.
Long names don’t get cut offIf a text doesn’t fit within the margins, the app scales that lower third down just enough to fit.
Watch out for typefacesThe app uses the fonts installed on your computer. Avenir Next, Futura, Gill Sans and San Francisco come with the Mac; on Windows a similar font may be substituted. Check the preview before exporting.
5

Check them one by one

  • Move from one person to the next with ← → or the keyboard arrows. At the top you’ll see “3 / 12 · name”.
  • The Background button toggles between the checkerboard (to see transparency) and a video-like background (to see how it looks on screen).
The app remembers your workYour data and style are saved automatically in this browser: close the tab, come back, and everything is still there. It won’t be there in another browser or on another computer.
6

Download the PNGs

  • Download this PNG: just the one you’re viewing.
  • Download all (ZIP): one per row, in a cairons.zip file.

Files are numbered in list order: 01_martha-shaw.png, 02_jordan-reed.png… No accents or spaces, so no program will choke on them.

7

Use them on your switcher

Every PNG has an alpha channel: anything that isn’t the lower third is transparent.

  • ATEM: drag the PNGs into the Media Pool in ATEM Software Control and load them into a Media Player. On the Downstream Key (or a Luma-type Upstream Key) set the fill to Media Player 1 and the key to Media Player 1 Key, with Pre Multiplied Key enabled. The PNG resolution must match the ATEM’s video format.
  • vMix: add them as an image input and put them on an Overlay.
  • OBS: an “Image” source in the scene, above the video.
  • Premiere, DaVinci or Final Cut: import the PNGs and place them on a track above the video.

8 · Tell me what you think

The app is in beta and your feedback decides where it goes next. I’m especially interested in:

Try the app now