genie

Genie Developer Hub

Welcome to the genie developer hub. You'll find comprehensive guides and documentation to help you start working with genie as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    API Reference

Introduction

Why do we need Markup

Markup helps us build the design we want in code!!
We need the design in code to modify it later with desired changes to be able to make bulk-creatives.
Let's see an example (that we saw earlier) to understand better.
You must've seen the Welcome to Kubric poster while going through Say Hello World
You tried out the cURL request there that looked like -

http://genie.kubric.io/api/hello?name=Human&textcolor=%234d4d4d&bgcolor=%23fffef1

Here we populate this API call with a 'name', 'textcolor' & 'bgcolor', And we see a personalized poster with our name in the given color and the background color we specified - This is the magic of Kubric
You design once, make infinite creatives after!

Let's look at the code
//explain hello human welcome to kubric fuky here, point to objects used, image etc and that API ka relation

{
  "duration": 1000,
  "objects": [
    {
      "comment": "background",
      "kind": "rectangle",
      "color": "gray",
      "stroke": {
        "color": "black",
        "width": 10,
        "join": "bevel"
      },
      "fill": "{{bg_color}}",
      "position": {
        "y": 0,
        "x": 0
      },
      "type": "shape",
      "size": {
        "h": "{{canvas_size_h}}",
        "w": "{{canvas_size_w}}"
      }
    },
    {
      "comment": "Right img",
      "opacity": 1,
      "url": "https://lh3.googleusercontent.com/rsuAdgsQWrxqngRGlRO_9UXAPhYdWA5iSVU7zEADKkcHEp0dpQTnamWu6KZrMw6eHqqkdK6UZExVgj39OLWfqbf5",
      "position": {
        "x": "[[{{canvas_size_w}} - {{canvas_size_w}}/3]]",
        "y": 0
      },
      "type": "image",
      "size": {
        "h": "[[{{canvas_size_w}}/3]]",
        "w": "[[{{canvas_size_w}}/3]]"
      }
    },
    {
      "comment": "Left img",
      "opacity": 1,
      "url": "https://lh3.googleusercontent.com/I7-uE4Flofvb6AW4iWZHnqt7YP170j3MI7v_M4CHXiuzYTzzqfGyCQQ5rq6-Hi5ad4mMDzy9DSB-B_J6HWaC4w",
      "position": {
        "y": "[[{{canvas_size_h}} - {{canvas_size_w}}/2]]",
        "x": 20
      },
      "contain": {
        "x": "left"
      },
      "type": "image",
      "size": {
        "h": "[[{{canvas_size_w}}/2]]",
        "w": "[[{{canvas_size_w}}/2]]"
      }
    },
    {
      "comment": "Hello",
      "opacity": 1,
      "color": "{{text_color}}",
      "text": "Hello",
      "fontFamily": {
        "url": "https://assets.kubric.io/b928f515-9668-411c-b4f9-dfeef8152cab.ttf",
        "name": "Playlist Script"
      },
      "align": "center",
      "fontSize": "[[{{canvas_size_w}}/6]]",
      "letterSpacing": 1,
      "position": {
        "x": "[[ {{canvas_size_w}}/2 - 40 ]]",
        "y": "[[ {{canvas_size_h}}/2 - {{canvas_size_w}}/7 + 10]]"
      },
      "type": "text",
      "axis": -10
    },
    {
      "comment": "Human",
      "opacity": 1,
      "color": "{{text_color}}",
      "text": "{{human_name}} !",
      "fontFamily": {
        "url": "https://assets.kubric.io/b928f515-9668-411c-b4f9-dfeef8152cab.ttf",
        "name": "Playlist Script"
      },
      "align": "center",
      "fontSize": "[[{{canvas_size_w}}/12]]",
      "letterSpacing": 1,
      "position": {
        "x": "[[ {{canvas_size_w}}/2 - 40 ]]",
        "y": "[[ {{canvas_size_h}}/2 + {{canvas_size_w}}/12 + 20]]"
      },
      "type": "text",
      "axis": -10
    },
    {
      "comment": "welcome text",
      "opacity": 1,
      "color": "{{text_color}}",
      "text": "Welcome to Kubric",
      "fontFamily": "Montserrat-Light",
      "align": "center",
      "fontSize": "[[{{canvas_size_w}}/25]]",
      "letterSpacing": 6,
      "position": {
        "x": "[[ {{canvas_size_w}}/1.8]]",
        "y": "[[ {{canvas_size_h}}/1.2]]"
      },
      "type": "text"
    }
  ],
  "size": {
    "h": "{{canvas_size_h}}",
    "w": "{{canvas_size_w}}"
  }
}
{
  "canvas_size_h": {
    "default": 500,
    "type": "text",
    "title": "Canvas Height",
    "hideInSheet":"true"
  },
  "canvas_size_w": {
    "default": 750,
    "type": "text",
    "title": "Canvas Width",
    "hideInSheet":"true"
  },
  "human_name": {
    "default": "human",
    "type": "text",
    "title": "Human Name"
  },
  "text_color": {
    "default": "#FFB6C1",
    "type": "color",
    "title": "Text Color"
  },
  "bg_color": {
    "default": "#fffef1",
    "type": "color",
    "title": "Background Color"
  }
}

As you can see the in the parameters tab above, we have 5 param-objects.
These can be divided into 2 broad types -

  1. Internal parameters
    canvas_size_h, canvas_size_w - have item hideInSheet set to true; This means they are internal parameters. These are helpful in declaring a certain value that cant be changed through the campaign generation or the API call. The parameter objects marked hidden this way are mostly used to manipulate their values within the design. (imagine them like constants in code.) [manipulation example in image objects in the shot config]
    eg -
      "position": {
        "x": "[[ {{canvas_size_w}}/1.8]]",
        "y": "[[ {{canvas_size_h}}/1.2]]"
      },
  1. External/ Exposed parameters
    These are the parameters that are exposed out (they do not need to have hideInSheet as false - that's the default).
    These are the ones exposed - human_name, text_color, bg_color.

This is how we code in a design & make multiple (♾) versions of it. [which can be done via the Genie API / The Kubric Campaign generation Flow] But before you can make your own cool designs and generate creatives lets -

Beginning with basics

Advanced

Follow the Creative

Some ready-made shots to give you an idea of how you can construct your full creatives -

Updated 5 months ago


What's Next

Let's build

Shots
Shot to Storyboard
Objects

Introduction


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.