Picture before and after

Two pictures of one subject in one frame: the before first with its word, then a line sweeping across to show the after with its word, holding, and coming back to stand between the two, then the caption: 12 seconds. In eight styles, each wearing your brand's colours, fonts, logo, presenter and background.

Template id	`tpl_ed96099e6cd2`
Markets	Every market
Variants	Corporate glass, Bento grid, Broadcast news, Editorial, Swiss grid, Neo-brutalist, Soft friendly, Clear civic
Ready-made feeds	None

Use cases

A renovation, a clean-up, a makeover or a garden through the year.
A line sweeping across from before to after, then standing between the two.
Your own words on each picture, such as Before and After or two years.

Variants

A variant is this template drawn another way, and it comes in versions: immutable builds, the newest first. A channel follows the newest version of its variant, unless it is pinned to one.

Variant	What it is	Versions	Newest
Corporate glass	Frosted glass cards over an aurora in your brand colours: calm and premium.	1	1.0.0
Bento grid	Rounded tiles in your brand colours, each moving on its own: a modern product look.	1	1.0.0
Broadcast news	A news channel in your colours: channel bug, lower third, ticker and your presenter.	1	1.0.0
Editorial	A magazine page in your paper tone and serif: masthead, hairline rules and a byline.	1	1.0.0
Swiss grid	A strict grid, large type and your brand colour as the one accent. Nothing bounces.	1	1.0.0
Neo-brutalist	Loud flat blocks in your colours with thick borders and hard shadows.	1	1.0.0
Soft friendly	Soft shapes and rounded cards in tints of your brand colour: warm and approachable.	1	1.0.0
Clear civic	Built for reading: high contrast, large plain type and numbered steps.	1	1.0.0

What it accepts

Every variant takes the same content, so one document draws in any of them.

Picture before and after: two pictures of one subject in one frame, the before first, then a line sweeping across to show the after and coming back to stand between them, each with its own word. metaData is the post's title, descriptions and hashtags and is never drawn.

Field	Type	Required	Limit	What it is
`clipData`	group	yes		Clip data: Everything drawn: the title, the two pictures and their words, the caption and the look.
`clipData.kicker`	text		up to 20 characters	Kicker: A word or two above the title, such as RENOVATED.
`clipData.title`	text	yes	up to 80 characters	Title: What changed. Shown from the first frame.
`clipData.before`	video	yes	`media://` picture or video from the media library, alt text up to 120 characters	Before or video: The picture as it was, shown first. A video from the media library plays in its place, without its sound, and from its start again whenever it ends.
`clipData.beforeLabel`	text		up to 20 characters	Before word: The word on the before picture, such as Before or 2019.
`clipData.after`	video	yes	`media://` picture or video from the media library, alt text up to 120 characters	After or video: The picture as it is now, from the same place and of the same shape where you can. A video from the media library plays in its place, without its sound, and from its start again whenever it ends.
`clipData.afterLabel`	text		up to 20 characters	After word: The word on the after picture, such as After or 2026.
`clipData.caption`	text		up to 100 characters	Caption: One line under the pictures.
`clipData.pictureFit`	enum		`auto`, `fill`, `whole`	Picture fit: Automatic, the default, fills the frame when a picture is close to its shape and shows it whole when filling would cut off more than a sixth of it, so no picture is cropped away. Fill the frame always crops to the frame, right for photographs; Show it whole never crops, right for logos and cut-out products.
`clipData.pictureFocus`	enum		`centre`, `top`, `bottom`, `left`, `right`	Picture focus: Which part of a picture stays in view when it fills its frame and its edges are cropped: the middle, or one side.
`clipData.credit`	text		up to 60 characters	Credit: Who the pictures are by, at the foot.
`clipData.styleWords`	group			Style words: The few words some styles write into their own frame, each drawn exactly as written, in the language you write it in. A word left out is not drawn: no template adds a word of its own. The same keys in every format of the collections; each style draws only its own.
`clipData.styleWords.live`	text		up to 16 characters	Live marker (Broadcast news): Written beside the light in Broadcast news' channel bug, such as LIVE. Left out, the light stands alone.
`clipData.styleWords.byline`	text		up to 12 characters	Byline (Editorial): Written before the presenter's name in Editorial, such as By. Left out, the name stands alone.
`clipData.styleWords.functionKeys`	list		up to 4	Function keys (Data terminal): Data terminal's row of keys F1 to F4, one word each, in order, such as HELP, DATA, CHART and NEWS; the second is drawn held down, and a key that does not fit the row is left out. Left out, no keys are drawn.
`clipData.styleWords.functionKeys[]`	text		up to 12 characters	Key
`clipData.styleWords.commandKey`	text		up to 10 characters	Command key (Data terminal): The key at the end of Data terminal's row, in the rise colour, such as GO. Left out, none is drawn.
`clipData.styleWords.realTime`	text		up to 12 characters	Real-time light (Data terminal): Written beside the blinking light in Data terminal's status bar, such as RT. Left out, the light stands alone.
`clipData.styleWords.messageLabel`	text		up to 12 characters	Message window label (Data terminal): The tab on Data terminal's message window round the presenter, such as MSG. Left out, the window has no tab.
`clipData.styleWords.pictureLabel`	text		up to 12 characters	Picture panel label (Data terminal): Written in the strip along the top of Data terminal's picture panels, such as IMG. Left out, the strip stays empty.
`clipData.look`	group			Look: How the clip looks and moves within its style. The same switches in every format of the collections. Leave a switch out, or set it to the style's own, and the style decides.
`clipData.look.theme`	enum		`auto`, `brand`, `light`, `dark`, `bold`	Theme: The style's own choice; your brand's own colours and background; a light or dark page tinted with your brand colour; or your brand colour as the page.
`clipData.look.pace`	enum		`auto`, `calm`, `standard`, `punchy`	Pace: How things arrive: the style's own rhythm, calm fades, a standard rhythm, or punchy slams and cuts.
`clipData.look.corners`	enum		`auto`, `square`, `soft`, `round`	Corners: The shape of cards, panels and marks.
`clipData.look.align`	enum		`auto`, `start`, `centre`	Text alignment: Where the text lines up.
`clipData.look.logo`	enum		`auto`, `free`	Logo: The style's own: the logo on the style's plate (a card, a disc, a badge) so it reads on any page. As it is: the logo whole, with no plate, frame or crop, for a logo made to stand on the page, such as one with a transparent background. As it is, make sure your logo reads on the page of the theme you choose.
`clipData.look.logoSize`	enum		`auto`, `small`, `large`	Logo size: Standard is the style's own size. Small draws the logo a fifth smaller, with its plate. Large draws it a quarter larger wherever the style has room for it, and at the standard size where it has none.
`clipData.look.hideHeader`	boolean			Hide logo and title: Leaves out the line at the top of the clip: your logo, the title line and the style's decoration around them, so the content starts at the top. To leave it out of every clip, switch Logo and title line off in your brand's settings.
`clipData.look.hideFooter`	boolean			Hide footer line: Leaves out your footer line at the foot of the clip, with whatever the style draws only to carry it, so the content reaches further down. Your presenter and the source line stay. To leave it out of every clip, switch Footer line off in your brand's settings.
`clipData.look.pattern`	enum		`auto`, `none`, `dots`, `grid`, `lines`	Background pattern: The fine texture behind the content. The style's own keeps what the style draws there, and some styles draw none. None leaves the background plain. Dots, Grid and Diagonal lines draw that pattern faintly instead, the same in every style, in the colour of your page.
`metaData`	group			Meta data: Everything about the post that is never drawn in the clip: its title, its description in four lengths, one per kind of platform, and its hashtags. Reelwire adds the brand's description, link and hashtags after it. Left out, the post text is generated from the clip data.
`metaData.title`	text		up to 100 characters	Title: Used where the platform has a title of its own: Facebook Feed, LinkedIn, Pinterest and YouTube. Up to 100 characters, which every one of them takes.
`metaData.captionTiny`	text		up to 200 characters	Tiny description (Pinterest, Threads, X): Up to 200 characters. The brand's description, link and hashtags follow it within the platform's limit.
`metaData.captionShort`	text		up to 500 characters	Short description (Telegram, Threema, WeChat, WhatsApp): Up to 500 characters. The brand's description, link and hashtags follow it within the platform's limit.
`metaData.captionMedium`	text		up to 1500 characters	Medium description (Discord, Facebook Reels, Instagram, LinkedIn, Signal, Slack, TikTok): Up to 1500 characters. The brand's description, link and hashtags follow it within the platform's limit.
`metaData.captionLong`	text		up to 4000 characters	Long description (Facebook Feed, YouTube): Up to 4000 characters. The brand's description, link and hashtags follow it within the platform's limit.
`metaData.hashtags`	list		up to 15	Hashtags: Written without the #. Up to 15, which every platform takes.
`metaData.hashtags[]`	text		up to 60 characters	Hashtag

locales carries other languages: under each language code, the parts of clipData and metaData that differ, laid over the default, so a language with no copy still renders.

A picture is always a file from your media library: media:// followed by its id or its name. Anything the table does not list is refused, and so is anything over its limit, with a 400 schema_validation error that names the field.

Ask Reelwire for the whole JSON Schema, the document your content is checked against, without signing in:

curl "https://app.reelwire.io/v1/formats/template/tpl_ed96099e6cd2?variant=Corporate%20glass&version=1.0.0"

Delivery JSON

Your own system sends this to one of your streams, POST /v1/stream, and every channel listening to that stream draws it with its template. data is the document described above; a stream with an empty field map passes it to the template unchanged. Try it first on POST /v1/stream/validate, which answers the same without publishing anything. Streams and feeds explains the rest, including how to map a document of your own shape instead.

{
  "streamId": "st_your_stream_id",
  "eventId": "01M2SQMKK3G1NVFXV31DCBVB95",
  "occurredAt": "2026-09-23T07:00:00Z",
  "locale": "en",
  "data": {
    "clipData": {
      "kicker": "Renovated",
      "title": "Our shop front, before and after",
      "before": {
        "alt": "Three snow-capped peaks under an evening sky",
        "url": "media://example-image.svg"
      },
      "beforeLabel": "Before",
      "after": {
        "alt": "The same peaks as the weather turns",
        "url": "media://example-image-with-animation.svg"
      },
      "afterLabel": "After",
      "caption": "New windows, a new door and a lot of paint, done in three weeks",
      "pictureFit": "auto",
      "pictureFocus": "centre",
      "credit": "",
      "styleWords": {
        "live": "LIVE",
        "byline": "By",
        "functionKeys": [
          "HELP",
          "DATA",
          "CHART",
          "NEWS"
        ],
        "commandKey": "GO",
        "realTime": "RT",
        "messageLabel": "MSG",
        "pictureLabel": "IMG"
      },
      "look": {
        "theme": "auto",
        "pace": "auto",
        "corners": "auto",
        "align": "auto",
        "logo": "auto",
        "logoSize": "auto",
        "hideHeader": false,
        "hideFooter": false,
        "pattern": "auto"
      }
    },
    "metaData": {
      "title": "Our shop front, before and after",
      "captionTiny": "Three weeks, new windows, a new door and a lot of paint. Here is our shop front before and after. Come and see it in person.",
      "captionShort": "Three weeks ago our shop front looked tired. Now it has new windows, a new door and a lot of fresh paint, and we could not be happier with it. Slide across to see the difference, then come and see it in person.",
      "captionMedium": "Before and after: our shop front.\n\nThree weeks ago it looked tired. Now it has new windows that let the light in, a new door that opens without a shove, and a lot of fresh paint.\n\nThank you to everybody who put up with the scaffolding. Come and see it in person: the coffee is on us this week.",
      "captionLong": "Before and after: our shop front.\n\nThree weeks ago it looked tired, and we knew it. The windows let in draughts, the door needed a shove, and the paint had seen better decades.\n\nNow it has new windows that let the light in and keep the warmth inside, a new door that opens at a touch, and a lot of fresh paint in our own colours.\n\nThank you to everybody who put up with three weeks of scaffolding and kept coming in anyway.\n\nCome and see it in person: the coffee is on us this week.",
      "hashtags": [
        "beforeandafter",
        "renovation",
        "shopfront",
        "smallbusiness",
        "kite"
      ]
    }
  }
}

The delivery names no version: which build draws it is the channel's choice, the newest of its variant or the one it is pinned to. eventId is a ULID you make once per event: sending the same one again changes nothing. occurredAt is when the thing happened, not when you sent it. locale is the language of the text in data, and data.locales carries other languages beside it.

Use cases​

Variants​

What it accepts​

Delivery JSON​

Use cases

Variants

What it accepts

Delivery JSON