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

Masking - Sunlit

Learn about masks and banners

What's a mask

A mask can be attached to any type of object to restrict its visibility. Masks can be drawn in any of the shapes supported by the system. Masks can be rotated provided the shape of the mask supports rotation. Eg. if it is a rectangular mask, it can be rotated as a rectangle can be rotated. But if it is a circular mask, it cannot be rotated as rotation is not supported for the shape circle. You can also create a custom mask as demonstrated here.

The Code

{
  "duration": 1000,
  "objects": [
    {
      "type": "shape",
      "kind": "rectangle",
      "color": "{{canvas-color}}",
      "comment": "base canvas",
      "opacity": 1,
      "position": {
        "x": 0,
        "y": 0
      },
      "size": {
        "h": 600,
        "w": 1800
      }
    },
    {
      "comment": "Sky Image",
      "opacity": 1,
      "scale": {
        "reference": "center",
        "value": 10
      },
      "mask": {
        "position": {
          "y": 0,
          "x": 0
        },
        "stroke": {
          "color": "black",
          "width": 1
        },
        "points": [
          {
            "y": 0,
            "x": 0
          },
          {
            "y": 0,
            "x": 1000
          },
          {
            "y": 600,
            "x": 600
          },
          {
            "y": 600,
            "x": 0
          }
        ],
        "shape": "polygon"
      },
      "url": "{{img-url}}",
      "contain": true,
      "position": {
        "y": 300,
        "x": 550
      },
      "type": "image",
      "size": {
        "h": 110,
        "w": 130
      }
    },
    {
      "comment": "Main text",
      "opacity": 1,
      "color": "black",
      "text": "The Skies of \n Kubric",
      "fontFamily": {
        "name": "LibreBaskerville-Italic",
        "url": "https://assets.kubric.io/687808ff-3689-4b5c-9efc-5cdad12fd8b8.ttf"
      },
      "fontSize": 100,
      "position": {
        "x": 1350,
        "y": 150
      },
      "align": "center",
      "type": "text",
      "axis": 0
    },
    {
      "comment": "supporting text",
      "opacity": 1,
      "color": "black",
      "text": "TOGETHER,  APART.",
      "fontFamily": {
        "name": "LibreBaskerville-Regular",
        "url": "https://storage.googleapis.com/assetlib/2fa28bee-e202-4113-a318-0e04c65776a1.ttf"
      },
      "fontSize": 40,
      "position": {
        "x": 1250,
        "y": 430
      },
      "align": "center",
      "type": "text",
      "axis": 0
    },
    {
      "type": "shape",
      "kind": "rectangle",
      "color": "black",
      "comment": "horizontal decoration line",
      "opacity": 1,
      "position": {
        "x": 1050,
        "y": 380
      },
      "size": {
        "h": 7,
        "w": 250
      }
    }
  ],
  "size": {
    "h": 600,
    "w": 1800
  }
}
"canvas-color": {
    "default": "white",
    "type": "text",
    "title": å"Canvas color"
  },
  "img-url": {
    "default": "https://lh3.googleusercontent.com/eAZC-pijriyWnuGi-2Vgf5cjBhesFztcEftSzNOE--WTMg5N_anom3Qnm90KmpFwdjLgErPKblEqQIzIpHyhJn_P"
  }
}

The design

Updated about a year ago


What's Next

let's get into advanced markup

Introduction

Masking - Sunlit


Learn about masks and banners

Suggested Edits are limited on API Reference Pages

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