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

Color Gradients

2 gradients are available, linear & radial

Linear Gradient

{
   "duration": "1000",
   "objects": [
   
     {
       "position": {
         "y": 0,
         "x": 0
       },
       "type": "shape",
       "kind": "rectangle",
       "fill": {
         "type": "linear",
         "from": { "x": 100, "y": 100 },
         "to": { "x": 100, "y": 1200 },
         "stops": ["#11d7d8", "#63c8c4", "#aae2df", "#facfd9","#fd9ab6"]
       },
       "size": {
         "h": 1280,
         "w": 960
       }
     }
   ],
   "size": {
     "h": 1280,
     "w": 960
   }
   
}

Field

Description

Value

fill - type

Type of the gradient.

Can be "linear" / "radial"

fill - from (for linear gradient)

It denotes where the colors start from beginning at first element in the stops array.

For a linear gradient, this should be an object with x and y denoting the starting position of the gradient. Defaults to { x: 0, y: 0}

fill - to (for linear gradient)

It denotes where the colors stop at and equalises all 'stops'

For a linear gradient, this should be an object with x and y denoting the ending position of the gradient. Defaults to { x: 0, y: 0}

fill - stops

The array of colors used to render the gradient. The gradient begins at the first color, and ends at the last color in this array. The colors can be any supported.

Takes in an array of hexcodes.

Radial Gradient

A radial gradient renders the first color in stops within a circle centered at x, y of radius r as mentioned in from and renders subsequent colors in the stops array in circles with the final color being rendered within a circle denoted by x, y and r in to.

{
  "duration": "1000",
  "objects": [
    {
      "position": {
        "y": 0,
        "x": 0
      },
      "type": "shape",
      "kind": "rectangle",
      "fill": {
        "type": "radial",
        "from": {
          "x": 500,
          "y": 500,
          "r": 1
        },
        "to": {
          "x": 500,
          "y": 500,
          "r": 750
        },
        "stops": [
          "#005582",
          "#0086ad",
          "#00c2c7",
          "#97ebdb",
          "#daf8e3",
          "#FFFFFF"
        ]
      },
      "size": {
        "h": 1000,
        "w": 1000
      }
    }
  ],
  "size": {
    "h": 1000,
    "w": 1000  }
}

Updated about a year ago


What's Next

Masks

Color Gradients


2 gradients are available, linear & radial

Suggested Edits are limited on API Reference Pages

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