Visual reference for every intro and outro overlay — preview, id, accepted fields, default animation and the colours each design ships with
The catalogue ships 27 designs: 15 intros and 12 outros. Every one has a landscape and a portrait layout, and every one accepts your agency’s colours.Pass a design’s id as templateId inside elements_config.intro_outro:
Every intro requires values.title and every contact-card outro requires values.agent_name, so a selection without one is rejected before any task is created. See Fields.The intro slot accepts intro designs only and the outro slot outro designs only; naming one in the wrong slot is a VALIDATION_ERROR. To read the same catalogue from code, call List Intro & Outro Templates.
An intro is ink over your video: it declares no background of its own, so what sits behind its type is whatever frame it opens on. The previews below are drawn on a neutral grey for that reason — a design set in near-white would be invisible on this page and unremarkable over a dark room.
Fine Line · hairline_lowercase
Ruled Caps · ruled_caps
Condensed Caps · compressed_caps
Navy Script · navy_script
Underlined Caps · underlined_caps
Terracotta Rounded · terracotta_rounded
Gold Italic Serif · gold_serif_italic
Plum Stack · plum_rounded_stack
Serif Stack · serif_stack
Corner Frame · corner_frame_caps
Script Stack · script_stack
Poster Caps · poster_caps
Mint Caption · mint_caption
Glow Caps · glow_caps
Outlined Frame · outline_frame_serif
Portrait layouts (15)
Each design is laid out again for a 9:16 video. The layout is picked from the video’s own shape — orientation on Narrated Slideshow and Living Property, format on Land — never selected on the overlay itself.
title and subtitle are the two fields every intro renders. The colours are what the design ships with: brandColorPrimary repaints the title, brandColorContrast the subtitle.
An outro is an opaque card: it covers the frame with its own background, so the video never shows through it and its colours are the whole picture.Eleven of the twelve are contact cards built around a name and a contact line. The twelfth, custom_image, closes on an image of your own instead: no text fields, no brand slots, and the image is fitted to the video’s shape by extending its background rather than by cropping it.
Quiet Off-White · quiet_offwhite
Serif Business Card · serif_business_card
Navy Neon · navy_neon
Gradient Script · gradient_script
Charcoal Split · charcoal_split
Cream Squircle · cream_squircle
Black and Gold · black_gold
Sunburst Serif · sunburst_serif
Bold Ring Card · bold_ring_card
Forest Green · forest_green
Bordered Cream · bordered_cream
Custom image · custom_image
Portrait layouts (12)
The portrait cards were composed rather than reframed: four designs break the name onto two lines and none of the layouts is derived from its landscape version. If you publish in 9:16, judge the design here.
agent_name and contact_line are the two text fields of the eleven contact cards, and agent_photo the portrait they draw; custom_image takes none of the three and declares one image field of its own. brandColorPrimary repaints the name, brandColorContrast the contact line and the furniture around it. Card is the design’s own background, the colour a branded line has to read against.
Design
id
Default animation
Name
Contact line
Card
Quiet Off-White
quiet_offwhite
fade
#111414
#787874
#F4F3EF
Serif Business Card
serif_business_card
slide_up
#040404
#A44A20
#FFFFFF
Navy Neon
navy_neon
blur
#FBFBFC
#EAECEE
#093663 → #010001
Gradient Script
gradient_script
fade
#213345
#2A3C46
#DDCCAE → #ABCECA
Charcoal Split
charcoal_split
slide_left
#FBFBFA
#F4F4F4
#323232
Cream Squircle
cream_squircle
scale
#6F2C14
#2F1907
#F4E9D2
Black and Gold
black_gold
fade
#CCAB6B
#F1F0E8
#1B1B1A
Sunburst Serif
sunburst_serif
scale
#54341C
#4F3016
#F4EACF
Bold Ring Card
bold_ring_card
scale
#020202
#D72324
#FFFFFF
Forest Green
forest_green
fade
#F1EFDF
#EBF1DE
#2A503A
Bordered Cream
bordered_cream
fade
#312315
#25190C
#EFEAD7
Custom image
custom_image
fade
None
None
Your image, on #000000
navy_neon and gradient_script draw a two-stop gradient instead of a flat card; the pair above is the gradient, and the first stop is the tone the name actually sits on.
custom_image is an outro, not an extra scene. It rides the same closing window as the other eleven and adds no duration. Send the image as assets.custom_image, leave values empty, and pick any of the nine animations. When the image’s aspect ratio differs from the video’s, the server extends its background to the video’s shape before rendering, so nothing in the image is ever cropped. That preparation runs while the create request is being accepted, which is why a request carrying a custom_image outro takes a few seconds, and up to about 25 seconds when the ratios differ. The image must be a JPG, PNG or WEBP of at most 8 MB whose shortest edge is at least 400 px; anything else is a 400 INVALID_PARAMETER. It costs no extra credits.
A design’s content comes from two objects on the selection: values for text and assets for images. Both are keyed by the field ids below. The ids are the same for all 15 intros and for the eleven contact-card outros; custom_image is the exception, and declares one image field of its own instead.
Slot
Object
Field id
Required
Max length
When you omit it
intro
values
title
Yes
40
400 VALIDATION_ERROR on elements_config.intro_outro.intro.values.title
intro
values
subtitle
No
24
No subtitle line is drawn
outro
values
agent_name
Yes
32
400 VALIDATION_ERROR on elements_config.intro_outro.outro.values.agent_name
outro
values
contact_line
No
64
No contact line is drawn
outro
assets
agent_photo
No
—
No photo is drawn
outro
assets
custom_image
Yes, on custom_image only
n/a
400 VALIDATION_ERROR on elements_config.intro_outro.outro.assets.custom_image
outro
assets
custom_image_source
Server-set
n/a
Not accepted from you
Required means required.title on any intro and agent_name on any of the eleven contact-card outros must arrive with a non-blank value: missing, empty or whitespace-only is a 400 VALIDATION_ERROR from the request schema, with details.field naming the field as a dotted path such as elements_config.intro_outro.intro.values.title and details.issues listing every field refused, and no task is created. assets.custom_image is enforced the same way on the custom_image outro.Optional means nothing is drawn. A design sent without subtitle, contact_line or agent_photo renders without that line or portrait, exactly as if you had sent an empty string. Nothing is substituted for it.
A key that is not on this list is accepted and then ignored. Only the ids above are read, so { "name": "Alex Rivera" } on an outro contributes nothing: the field is called agent_name. Because agent_name is required, that payload is rejected with 400 VALIDATION_ERROR on elements_config.intro_outro.outro.values.agent_name instead of rendering anything. A misspelled optional key still fails silently, though: the value is dropped and the design simply draws without that line, so check your ids against this list if a line is missing from the result.
The previews on this page were rendered from the designs as delivered, so they still carry the designers’ sample copy, including a contact line that reads [email protected]. None of it reaches your video: a design renders the values you send and nothing else. The default_value returned by GET /v1/intro-outro/templates is that same sample copy, published so a picker in your own product can preview a design; it is never drawn into a render.
Max length is a design measurement, not a limit. The API accepts strings up to 500 characters; the numbers above are what each design was drawn to hold. A longer value is fitted down to size rather than refused, so it renders — just smaller than the design intends.Intros declare no image field at all, so an assets object on an intro selection does nothing. Both of the catalogue’s image fields live on outros: agent_photo, which the eleven contact cards draw, and custom_image, which is the whole picture on the design of the same name. custom_image_source is a companion key the server writes next to custom_image to keep the URL you sent; you never send it and the renderer ignores it.
animation is required on every selection. The same nine presets apply to both slots, and a preset is one directional transition rather than an in-and-out pair: an intro is fully formed at its first frame and plays the preset as an exit, an outro plays it as an entrance and holds through the final frame.
animation
Name
Motion
fade
Fade
Opacity only. The overlay dissolves without moving.
slide_up
Slide up
Travels upward: an intro leaves through the top, an outro arrives from below.
slide_down
Slide down
Travels downward: an intro leaves through the bottom, an outro arrives from above.
slide_left
Slide left
Travels left: an intro leaves through the left edge, an outro arrives from the right.
slide_right
Slide right
Travels right: an intro leaves through the right edge, an outro arrives from the left.
scale
Zoom
The overlay shrinks away as it fades, and grows into place on the way in.
blur
Blur
Blur dissolve: the overlay softens out of focus as it fades.
wipe
Wipe
A band moving in from the right reveals or hides the overlay.
stagger
Staggered
Each layer animates in turn rather than the card moving as one block. The entrance reverses the order, so an outro arrives bottom to top.
The Default animation column in the two reference tables is the motion each design was delivered with. It is never applied for you — animation has no default — but it is the choice the design was drawn around.
Every design takes brandColorPrimary and brandColorContrast, set per overlay so an intro and an outro can carry different colours or only one of them can be branded. Branding is a repaint of the slots the tables above name and nothing else: no layer moves, appears or disappears.Sent on its own, brandColorPrimary also paints everything brandColorContrast would, so the design renders in one tone rather than half branded. A brandColorContrast with no primary is a VALIDATION_ERROR.
custom_image has no brand slots. It draws your image over a black plate and no type of its own, so both colours are accepted on it and then repaint nothing. Its default_colors come back with primary and contrast set to null.
The Card column is the number to check a colour against. Each outro’s own type was drawn at roughly 3:1 against its card, so that is the contrast worth aiming at. Nothing is refused for how it reads — a colour that contrasts weakly is rendered exactly as sent — so a line that comes back thin is fixed with a lighter or darker shade, or a different design.Intros have no card to measure against: what is behind an intro’s type is your video, and nothing is added to compensate.
Everything on this page is also served by GET /v1/intro-outro/templates — ids, names, default animations, field definitions, default colours and preview image URLs — so a template picker in your own product does not need to hardcode any of it.
