Input Template

[nobr]
  [div=display: none;]
    [font=Kristi]font call[/font]
    [font=Averia Serif Libre]font call[/font]
    [font=Averia Libre]font call[/font]
  [/div]
  [div=&Variable Set-Up \ group&--bgIMG: url('&Background Image URL \ text&');
  --darkColor: rgba(0, 0, 0, 1);
  --lightColor: rgba(255, 255, 255, 1);
  --blendColor: &Main Accent Color \ text&;
  --glowColor: rgba(255, 231, 233, 1);
  --aFont: 'Averia Serif Libre', serif;
  --mFont: 'Averia Libre', sans-serif;
  --sFont: 'Kristi', cursive;&end&
  display: block;
  position: relative;
  width: 100%;
  height: clamp(600px,70vh,800px);
  box-sizing: border-box;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  isolation: isolate;]
    [div=position: absolute; width: calc(100% + 30px); height: calc(100% + 30px); left: -15px; top: -15px; background-image: linear-gradient(rgba(44, 44, 44, .2), rgba(44, 44, 44, .2)), var(--bgIMG); background-size: cover; background-position: center center; filter: blur(3px);] [/div]
    [div=position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: url(https://i.imgur.com/UdjBt1F.png); mix-blend-mode: soft-light; opacity: .5;] [/div]
    [div=display: block; position: relative; width: calc(100% + 50px); padding-right: 50px; box-sizing: border-box; height: 100%; overflow-x: hidden;
    overflow-y: scroll; scroll-snap-type: both mandatory;]
      [div=display: block; position: relative; height: 100%; width: 100%; scroll-snap-align: end; scroll-snap-stop: always; box-sizing: border-box; overflow: hidden;]
        [div=position: absolute; height: 100%; background: var(--darkColor); width: 5px; left: 25%; top: 0px; mix-blend-mode: darken;] [/div]
        [div=position: absolute; left: calc(25% + 5px); width: calc(75% - 5px); top: 50%; transform: translateY(-50%);]
          &Title Card \ group&[div=display: block; font-size: 4rem; text-align: right; letter-spacing: .35em; text-transform: uppercase; font-family: var(--aFont); color: var(--lightColor); text-shadow: 0px 0px 10px var(--glowColor); padding: 25% 8% .5em 8%;]&Title \ text&[/div]
          &Subtitle \ group \ repeat&[div=font-size: .9rem; display: inline; background: var(--darkColor); color: var(--lightColor); text-transform: uppercase; padding: 1px 5px; font-family: var(--aFont);]&Subtitle Text \ text&[/div][br][/br]&end&&end&
        [/div]
      [/div]
      &Second Screen \ group&[div=display: block; position: relative; height: 100%; width: 100%; scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden;]
        [div=position: absolute; width: 100px; height: 100px; top: calc(23% + 5px); right: 10%; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; color: var(--darkColor); font-family: var(--aFont); font-size: 3rem; mix-blend-mode: darken;]
          01
        [/div]
        [div=position: absolute; top: 0px; height: 100%; left: 25%; width: 65%; background: var(--darkColor); mix-blend-mode: darken; transform: translate3d(0,0,0);]
          [div=position: absolute; width: 65%; height: 5px; background: var(--lightColor); top: 23%; right: 0%;] [/div]
          [div=position: absolute; width: 100px; height: 100px; background: var(--lightColor); top: calc(23% + 5px); right: 0%;] [/div]
          [div=position: absolute; width: 60%; color: var(--blendColor); font-size: 4rem; line-height: .9; text-align: right; right: 5%; bottom: 5%; font-family: var(--aFont); text-transform: uppercase; pointer-events: none;]
            &short quote or lyric \ text&
          [/div]
        [/div]
        [div=position: absolute; top: 60%; right: 13.25%; color: var(--glowColor); font-size: 4rem; line-height: .9; text-transform: uppercase; font-family: var(--aFont); transform: translateY(-50%);]
          &title \ text&
        [/div]
        [div=transform: translate(-50%,-50%); top: 45%; left: 27%; position: absolute; pointer-events: none; font-size: 0px; box-shadow: -25px -25px var(--darkColor); width: clamp(250px,25%,375px);]
          [img]&Image URL (suggested vertical ratio) \ text&[/img]
          you can use any vertical ratio image
        [/div]
        [div=position: absolute; z-index: 3; height: 100%; left: 50%; transform: translateX(-50%); width: clamp(250px,40%,40%); top: 0px; overflow: hidden; box-sizing: border-box;]
          [div=display: block; width: calc(100% + 50px); height: 100%; padding-left: 3px; padding-right: 50px; overflow-x: hidden; overflow-y: scroll; color: var(--lightColor); text-shadow: -1px -1px 0px var(--darkColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4; box-sizing: border-box;]
            [div=display: block; height: 30%;][/div]
            &Second Screen Contents \ group \ repeat&[div=display: block; margin-bottom: .5em;]&Paragraph \ content&[/div]&end&
            [div=display: block; height: 8%;][/div]
          [/div]
        [/div]
      [/div]&end&
      &Role Area \ group&[div=display: block; height: 100%; width: 100%; scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden; box-sizing: border-box; position: relative;]
        [div=display: flex; flex-flow: row nowrap; height: calc(100% - 1em); width: 100%; overflow-y: hidden; overflow-x: scroll; gap: 15px; box-sizing: border-box; padding: 5% 0px 0px 1.5em; scroll-snap-type: both proximity;]
          &Role Slot \ group \ repeat&[div=--roleIMG: url(&Character Image URL \ text&);flex: 1 0 30%; min-width: 300px; display: block; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; position: relative;]
            [div=position: absolute; display: flex; flex-flow: column nowrap; justify-content: flex-end; top: 0px; left: 0px; height: 100%; width: calc(100% - 50px); background: var(--darkColor); text-transform: uppercase; writing-mode: vertical-lr; color: var(--blendColor); font-size: 3.75rem; line-height: .9; transform: rotate(180deg); font-family: var(--aFont); pointer-events: none; text-align: right; mix-blend-mode: darken;]
              &Role Title \ text&[br][/br]&Character Name \ text&
            [/div]
            [div=position: absolute; top: 13%; left: 30%; width: 70%; padding-top: 95%; overflow: hidden; transform: translate3d(0,0,0); max-width: 300px; box-sizing:]
              [div=position: absolute; top: -10px; left: -10px; height: calc(100% + 20px); width: calc(100% + 20px); background-image: linear-gradient(rgba(44, 44, 44, .4), rgba(44, 44, 44, .4)), var(--roleIMG); background-position: center center; background-size: cover; filter: blur(5px);] [/div]
              [div=position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: url(https://i.imgur.com/UdjBt1F.png); mix-blend-mode: soft-light; opacity: .5;] [/div]
              [div=position: absolute; height: calc(100% - 70px); width: calc(100% - 70px); top: 23px; left: 23px; background: var(--roleIMG) no-repeat center center/cover; box-shadow: 25px 25px 0px var(--darkColor);] [/div]
            [/div]
            [div=position: absolute; bottom: 10%; left: 12.5%; width: calc(75% - 50px); box-sizing: border-box; overflow: hidden; height: 50%;]
              [div=display: block; position: relative; width: calc(100% + 50px); height: 100%; padding-right: 50px; overflow-x: hidden; overflow-y: auto; color: var(--lightColor); text-shadow: -1px -1px 0px var(--darkColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4; box-sizing: border-box;]
                [div=display: block; margin-bottom: .5em; width: 100%;]
                  &Role Description \ content&
                [/div]
                [div=display: block; height: 30%;][/div]
              [/div]
            [/div]
          [/div]&end&
        [/div]
        [div=position: absolute; font-family: var(--sFont); bottom: 10%; right: 5%; text-shadow: 0px 0px 10px var(--glowColor); color: var(--lightColor);font-size: 8rem; transform: rotate(-5deg); line-height: .8; text-align: right; pointer-events: none;]&Roles Text \ text&[/div]
      [/div]&end&
      &Final Screen \ group&[div=display: flex; position: relative; flex-flow: row wrap; height: 100%; padding-right: 50px; width: calc(100% + 50px); scroll-snap-align: start; scroll-snap-stop: always; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; scroll-snap-type: both mandatory;]
        [div=flex: .75 300px; height: 100%; position: relative; overflow: hidden; scroll-snap-align: end; scroll-snap-stop: always;]
          [div=position: absolute; height: 100%; width: 5px; left: 20%; mix-blend-mode: darken; background: var(--darkColor)] [/div]
          [div=position: absolute; height: 100%; top: 0px; left: calc(20% + 5px); width: calc(80% + 25px); overflow-x: hidden; overflow-y: scroll; padding-right: 30px; box-sizing: border-box;]
            [div=display: block; height: 15%;][/div]
            &Text Block \ group \ repeat&[div=display: block; margin-bottom: 25px; box-sizing: border-box; padding: 15px; background: var(--darkColor); color: var(--lightColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4;]&Text Block \ content&[/div]&end&
          [/div]
        [/div]
        [div=flex: 1.25 300px;] [/div]
        [div=flex: 2 300px; height: 100%; position: relative; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always;]
          [div=position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; background: var(--darkColor); mix-blend-mode: darken; transform: translate3d(0,0,0);]
            [div=position: absolute; width: 65%; height: 5px; background: var(--lightColor); top: 70%; left: 0%;] [/div]
            [div=position: absolute; width: 100px; height: 100px; color: var(--lightColor); font-family: var(--aFont); top: calc(70% + 5px); left: 0%; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; font-size: 3rem;]03[/div]
            [div=position: absolute; width: calc(100% - 160px); top: calc(70% + 35px); left: 130px; display: flex; flex-flow: row wrap; gap: 5px; font-family: var(--aFont); text-align: center; text-transform: uppercase;]
              &Links \ group \ repeat&[div=flex: 1 auto; background-color: var(--blendColor); padding: 5px 3px; box-sizing: border-box; font-weight: bold; color: var(--darkColor);]
                [url=&Link URL \ text&][div=display: inline-block; color: var(--darkColor);]&Link Name \ text&[/div][/url]
              [/div]&end&
            [/div]
          [/div]
          &Final Text \ group&[div=position: absolute; height: 55%; width: 100%; overflow-x: hidden; overflow-y: scroll; left: 30px; top: 7.5%; color: var(--lightColor); text-shadow: -1px -1px 0px var(--darkColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4; box-sizing: border-box; padding-right: calc(40px + 1em); padding-left: 1.5em;]
            &Paragraph Block \ group \ repeat&[div=display: block; margin-bottom: .5em;]&Paraph \ content&[/div]&end&
          [/div]&end&
        [/div]
      [/div]&end&
    [/div]
    &Navigation \ group&[div=position: absolute; z-index: 4; bottom: 0px; left: 0px; width: 100%; background: var(--darkColor); font-family: var(--aFont); text-transform: uppercase; letter-spacing: .15em; font-size: .95rem; box-sizing: border-box; text-align: right; padding: 8px 3%; mix-blend-mode: darken;]
      [url=&Bottom Right Link URL \ text&][div=display: inline-block; color: var(--lightColor);]=&Bottom Right Link Name \ text&[/div][/url]
    [/div]
    [div=position: absolute; z-index: 5; top: 0px; left: 0px; height: 100%; background: var(--darkColor); font-family: var(--aFont); text-transform: uppercase; writing-mode: vertical-lr; font-size: .95rem; letter-spacing: .15em; box-sizing: border-box; padding: 0px 8px 15% 8px; gap: 5px; display: flex; flex-flow: row nowrap; justify-content: space-evenly; align-items: center; mix-blend-mode: darken;]
      &Left Links \ group \ repeat&[url=&Link URL \ text&][div=display: inline-block; transform: rotate(180deg); color: var(--lightColor);]&Link Name \ text&[/div][/url]&end&
    [/div]&end&
  [/div]
[/nobr]

Debug Mode

[
  "[nobr]\r\n  [div=display: none;]\r\n    [font=Kristi]font call[/font]\r\n    [font=Averia Serif Libre]font call[/font]\r\n    [font=Averia Libre]font call[/font]\r\n  [/div]\r\n  [div=",
  {
    "type": "group",
    "description": "Variable Set-Up",
    "markerStart": {
      "type": "group",
      "description": "Variable Set-Up",
      "original": "&Variable Set-Up \\ group&",
      "repeat": false,
      "indices": [
        172,
        196
      ]
    },
    "repeat": false,
    "originalChildren": [
      "--bgIMG: url('",
      {
        "type": "text",
        "description": "Background Image URL",
        "marker": {
          "type": "text",
          "description": "Background Image URL",
          "defaultValue": "",
          "original": "&Background Image URL \\ text&",
          "indices": [
            211,
            239
          ]
        }
      },
      "');\r\n  --darkColor: rgba(0, 0, 0, 1);\r\n  --lightColor: rgba(255, 255, 255, 1);\r\n  --blendColor: ",
      {
        "type": "text",
        "description": "Main Accent Color",
        "marker": {
          "type": "text",
          "description": "Main Accent Color",
          "defaultValue": "",
          "original": "&Main Accent Color \\ text&",
          "indices": [
            336,
            361
          ]
        }
      },
      ";\r\n  --glowColor: rgba(255, 231, 233, 1);\r\n  --aFont: 'Averia Serif Libre', serif;\r\n  --mFont: 'Averia Libre', sans-serif;\r\n  --sFont: 'Kristi', cursive;"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        515,
        519
      ]
    }
  },
  "\r\n  display: block;\r\n  position: relative;\r\n  width: 100%;\r\n  height: clamp(600px,70vh,800px);\r\n  box-sizing: border-box;\r\n  overflow: hidden;\r\n  background-size: cover;\r\n  background-position: center center;\r\n  isolation: isolate;]\r\n    [div=position: absolute; width: calc(100% + 30px); height: calc(100% + 30px); left: -15px; top: -15px; background-image: linear-gradient(rgba(44, 44, 44, .2), rgba(44, 44, 44, .2)), var(--bgIMG); background-size: cover; background-position: center center; filter: blur(3px);] [/div]\r\n    [div=position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: url(https://i.imgur.com/UdjBt1F.png); mix-blend-mode: soft-light; opacity: .5;] [/div]\r\n    [div=display: block; position: relative; width: calc(100% + 50px); padding-right: 50px; box-sizing: border-box; height: 100%; overflow-x: hidden;\r\n    overflow-y: scroll; scroll-snap-type: both mandatory;]\r\n      [div=display: block; position: relative; height: 100%; width: 100%; scroll-snap-align: end; scroll-snap-stop: always; box-sizing: border-box; overflow: hidden;]\r\n        [div=position: absolute; height: 100%; background: var(--darkColor); width: 5px; left: 25%; top: 0px; mix-blend-mode: darken;] [/div]\r\n        [div=position: absolute; left: calc(25% + 5px); width: calc(75% - 5px); top: 50%; transform: translateY(-50%);]\r\n          ",
  {
    "type": "group",
    "description": "Title Card",
    "markerStart": {
      "type": "group",
      "description": "Title Card",
      "original": "&Title Card \\ group&",
      "repeat": false,
      "indices": [
        1872,
        1891
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[div=display: block; font-size: 4rem; text-align: right; letter-spacing: .35em; text-transform: uppercase; font-family: var(--aFont); color: var(--lightColor); text-shadow: 0px 0px 10px var(--glowColor); padding: 25% 8% .5em 8%;]",
      {
        "type": "text",
        "description": "Title",
        "marker": {
          "type": "text",
          "description": "Title",
          "defaultValue": "",
          "original": "&Title \\ text&",
          "indices": [
            2121,
            2134
          ]
        }
      },
      "[/div]\r\n          ",
      {
        "type": "group",
        "description": "Subtitle",
        "markerStart": {
          "type": "group",
          "description": "Subtitle",
          "original": "&Subtitle \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            2153,
            2179
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[div=font-size: .9rem; display: inline; background: var(--darkColor); color: var(--lightColor); text-transform: uppercase; padding: 1px 5px; font-family: var(--aFont);]",
          {
            "type": "text",
            "description": "Subtitle Text",
            "marker": {
              "type": "text",
              "description": "Subtitle Text",
              "defaultValue": "",
              "original": "&Subtitle Text \\ text&",
              "indices": [
                2348,
                2369
              ]
            }
          },
          "[/div][br][/br]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            2385,
            2389
          ]
        }
      },
      ""
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        2390,
        2394
      ]
    }
  },
  "\r\n        [/div]\r\n      [/div]\r\n      ",
  {
    "type": "group",
    "description": "Second Screen",
    "markerStart": {
      "type": "group",
      "description": "Second Screen",
      "original": "&Second Screen \\ group&",
      "repeat": false,
      "indices": [
        2433,
        2455
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[div=display: block; position: relative; height: 100%; width: 100%; scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden;]\r\n        [div=position: absolute; width: 100px; height: 100px; top: calc(23% + 5px); right: 10%; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; color: var(--darkColor); font-family: var(--aFont); font-size: 3rem; mix-blend-mode: darken;]\r\n          01\r\n        [/div]\r\n        [div=position: absolute; top: 0px; height: 100%; left: 25%; width: 65%; background: var(--darkColor); mix-blend-mode: darken; transform: translate3d(0,0,0);]\r\n          [div=position: absolute; width: 65%; height: 5px; background: var(--lightColor); top: 23%; right: 0%;] [/div]\r\n          [div=position: absolute; width: 100px; height: 100px; background: var(--lightColor); top: calc(23% + 5px); right: 0%;] [/div]\r\n          [div=position: absolute; width: 60%; color: var(--blendColor); font-size: 4rem; line-height: .9; text-align: right; right: 5%; bottom: 5%; font-family: var(--aFont); text-transform: uppercase; pointer-events: none;]\r\n            ",
      {
        "type": "text",
        "description": "short quote or lyric",
        "marker": {
          "type": "text",
          "description": "short quote or lyric",
          "defaultValue": "",
          "original": "&short quote or lyric \\ text&",
          "indices": [
            3566,
            3594
          ]
        }
      },
      "\r\n          [/div]\r\n        [/div]\r\n        [div=position: absolute; top: 60%; right: 13.25%; color: var(--glowColor); font-size: 4rem; line-height: .9; text-transform: uppercase; font-family: var(--aFont); transform: translateY(-50%);]\r\n          ",
      {
        "type": "text",
        "description": "title",
        "marker": {
          "type": "text",
          "description": "title",
          "defaultValue": "",
          "original": "&title \\ text&",
          "indices": [
            3843,
            3856
          ]
        }
      },
      "\r\n        [/div]\r\n        [div=transform: translate(-50%,-50%); top: 45%; left: 27%; position: absolute; pointer-events: none; font-size: 0px; box-shadow: -25px -25px var(--darkColor); width: clamp(250px,25%,375px);]\r\n          [img]",
      {
        "type": "text",
        "description": "Image URL (suggested vertical ratio)",
        "marker": {
          "type": "text",
          "description": "Image URL (suggested vertical ratio)",
          "defaultValue": "",
          "original": "&Image URL (suggested vertical ratio) \\ text&",
          "indices": [
            4090,
            4134
          ]
        }
      },
      "[/img]\r\n          you can use any vertical ratio image\r\n        [/div]\r\n        [div=position: absolute; z-index: 3; height: 100%; left: 50%; transform: translateX(-50%); width: clamp(250px,40%,40%); top: 0px; overflow: hidden; box-sizing: border-box;]\r\n          [div=display: block; width: calc(100% + 50px); height: 100%; padding-left: 3px; padding-right: 50px; overflow-x: hidden; overflow-y: scroll; color: var(--lightColor); text-shadow: -1px -1px 0px var(--darkColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4; box-sizing: border-box;]\r\n            [div=display: block; height: 30%;][/div]\r\n            ",
      {
        "type": "group",
        "description": "Second Screen Contents",
        "markerStart": {
          "type": "group",
          "description": "Second Screen Contents",
          "original": "&Second Screen Contents \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            4786,
            4826
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[div=display: block; margin-bottom: .5em;]",
          {
            "type": "content",
            "description": "Paragraph",
            "marker": {
              "type": "content",
              "description": "Paragraph",
              "original": "&Paragraph \\ content&",
              "indices": [
                4869,
                4889
              ]
            }
          },
          "[/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            4896,
            4900
          ]
        }
      },
      "\r\n            [div=display: block; height: 8%;][/div]\r\n          [/div]\r\n        [/div]\r\n      [/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        5002,
        5006
      ]
    }
  },
  "\r\n      ",
  {
    "type": "group",
    "description": "Role Area",
    "markerStart": {
      "type": "group",
      "description": "Role Area",
      "original": "&Role Area \\ group&",
      "repeat": false,
      "indices": [
        5015,
        5033
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[div=display: block; height: 100%; width: 100%; scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden; box-sizing: border-box; position: relative;]\r\n        [div=display: flex; flex-flow: row nowrap; height: calc(100% - 1em); width: 100%; overflow-y: hidden; overflow-x: scroll; gap: 15px; box-sizing: border-box; padding: 5% 0px 0px 1.5em; scroll-snap-type: both proximity;]\r\n          ",
      {
        "type": "group",
        "description": "Role Slot",
        "markerStart": {
          "type": "group",
          "description": "Role Slot",
          "original": "&Role Slot \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            5437,
            5464
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[div=--roleIMG: url(",
          {
            "type": "text",
            "description": "Character Image URL",
            "marker": {
              "type": "text",
              "description": "Character Image URL",
              "defaultValue": "",
              "original": "&Character Image URL \\ text&",
              "indices": [
                5485,
                5512
              ]
            }
          },
          ");flex: 1 0 30%; min-width: 300px; display: block; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; position: relative;]\r\n            [div=position: absolute; display: flex; flex-flow: column nowrap; justify-content: flex-end; top: 0px; left: 0px; height: 100%; width: calc(100% - 50px); background: var(--darkColor); text-transform: uppercase; writing-mode: vertical-lr; color: var(--blendColor); font-size: 3.75rem; line-height: .9; transform: rotate(180deg); font-family: var(--aFont); pointer-events: none; text-align: right; mix-blend-mode: darken;]\r\n              ",
          {
            "type": "text",
            "description": "Role Title",
            "marker": {
              "type": "text",
              "description": "Role Title",
              "defaultValue": "",
              "original": "&Role Title \\ text&",
              "indices": [
                6101,
                6119
              ]
            }
          },
          "[br][/br]",
          {
            "type": "text",
            "description": "Character Name",
            "marker": {
              "type": "text",
              "description": "Character Name",
              "defaultValue": "",
              "original": "&Character Name \\ text&",
              "indices": [
                6129,
                6151
              ]
            }
          },
          "\r\n            [/div]\r\n            [div=position: absolute; top: 13%; left: 30%; width: 70%; padding-top: 95%; overflow: hidden; transform: translate3d(0,0,0); max-width: 300px; box-sizing:]\r\n              [div=position: absolute; top: -10px; left: -10px; height: calc(100% + 20px); width: calc(100% + 20px); background-image: linear-gradient(rgba(44, 44, 44, .4), rgba(44, 44, 44, .4)), var(--roleIMG); background-position: center center; background-size: cover; filter: blur(5px);] [/div]\r\n              [div=position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: url(https://i.imgur.com/UdjBt1F.png); mix-blend-mode: soft-light; opacity: .5;] [/div]\r\n              [div=position: absolute; height: calc(100% - 70px); width: calc(100% - 70px); top: 23px; left: 23px; background: var(--roleIMG) no-repeat center center/cover; box-shadow: 25px 25px 0px var(--darkColor);] [/div]\r\n            [/div]\r\n            [div=position: absolute; bottom: 10%; left: 12.5%; width: calc(75% - 50px); box-sizing: border-box; overflow: hidden; height: 50%;]\r\n              [div=display: block; position: relative; width: calc(100% + 50px); height: 100%; padding-right: 50px; overflow-x: hidden; overflow-y: auto; color: var(--lightColor); text-shadow: -1px -1px 0px var(--darkColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4; box-sizing: border-box;]\r\n                [div=display: block; margin-bottom: .5em; width: 100%;]\r\n                  ",
          {
            "type": "content",
            "description": "Role Description",
            "marker": {
              "type": "content",
              "description": "Role Description",
              "original": "&Role Description \\ content&",
              "indices": [
                7646,
                7673
              ]
            }
          },
          "\r\n                [/div]\r\n                [div=display: block; height: 30%;][/div]\r\n              [/div]\r\n            [/div]\r\n          [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            7816,
            7820
          ]
        }
      },
      "\r\n        [/div]\r\n        [div=position: absolute; font-family: var(--sFont); bottom: 10%; right: 5%; text-shadow: 0px 0px 10px var(--glowColor); color: var(--lightColor);font-size: 8rem; transform: rotate(-5deg); line-height: .8; text-align: right; pointer-events: none;]",
      {
        "type": "text",
        "description": "Roles Text",
        "marker": {
          "type": "text",
          "description": "Roles Text",
          "defaultValue": "",
          "original": "&Roles Text \\ text&",
          "indices": [
            8093,
            8111
          ]
        }
      },
      "[/div]\r\n      [/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        8132,
        8136
      ]
    }
  },
  "\r\n      ",
  {
    "type": "group",
    "description": "Final Screen",
    "markerStart": {
      "type": "group",
      "description": "Final Screen",
      "original": "&Final Screen \\ group&",
      "repeat": false,
      "indices": [
        8145,
        8166
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[div=display: flex; position: relative; flex-flow: row wrap; height: 100%; padding-right: 50px; width: calc(100% + 50px); scroll-snap-align: start; scroll-snap-stop: always; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; scroll-snap-type: both mandatory;]\r\n        [div=flex: .75 300px; height: 100%; position: relative; overflow: hidden; scroll-snap-align: end; scroll-snap-stop: always;]\r\n          [div=position: absolute; height: 100%; width: 5px; left: 20%; mix-blend-mode: darken; background: var(--darkColor)] [/div]\r\n          [div=position: absolute; height: 100%; top: 0px; left: calc(20% + 5px); width: calc(80% + 25px); overflow-x: hidden; overflow-y: scroll; padding-right: 30px; box-sizing: border-box;]\r\n            [div=display: block; height: 15%;][/div]\r\n            ",
      {
        "type": "group",
        "description": "Text Block",
        "markerStart": {
          "type": "group",
          "description": "Text Block",
          "original": "&Text Block \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            8967,
            8995
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[div=display: block; margin-bottom: 25px; box-sizing: border-box; padding: 15px; background: var(--darkColor); color: var(--lightColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4;]",
          {
            "type": "content",
            "description": "Text Block",
            "marker": {
              "type": "content",
              "description": "Text Block",
              "original": "&Text Block \\ content&",
              "indices": [
                9216,
                9237
              ]
            }
          },
          "[/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            9244,
            9248
          ]
        }
      },
      "\r\n          [/div]\r\n        [/div]\r\n        [div=flex: 1.25 300px;] [/div]\r\n        [div=flex: 2 300px; height: 100%; position: relative; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always;]\r\n          [div=position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; background: var(--darkColor); mix-blend-mode: darken; transform: translate3d(0,0,0);]\r\n            [div=position: absolute; width: 65%; height: 5px; background: var(--lightColor); top: 70%; left: 0%;] [/div]\r\n            [div=position: absolute; width: 100px; height: 100px; color: var(--lightColor); font-family: var(--aFont); top: calc(70% + 5px); left: 0%; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; font-size: 3rem;]03[/div]\r\n            [div=position: absolute; width: calc(100% - 160px); top: calc(70% + 35px); left: 130px; display: flex; flex-flow: row wrap; gap: 5px; font-family: var(--aFont); text-align: center; text-transform: uppercase;]\r\n              ",
      {
        "type": "group",
        "description": "Links",
        "markerStart": {
          "type": "group",
          "description": "Links",
          "original": "&Links \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            10249,
            10272
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[div=flex: 1 auto; background-color: var(--blendColor); padding: 5px 3px; box-sizing: border-box; font-weight: bold; color: var(--darkColor);]\r\n                [url=",
          {
            "type": "text",
            "description": "Link URL",
            "marker": {
              "type": "text",
              "description": "Link URL",
              "defaultValue": "",
              "original": "&Link URL \\ text&",
              "indices": [
                10438,
                10454
              ]
            }
          },
          "][div=display: inline-block; color: var(--darkColor);]",
          {
            "type": "text",
            "description": "Link Name",
            "marker": {
              "type": "text",
              "description": "Link Name",
              "defaultValue": "",
              "original": "&Link Name \\ text&",
              "indices": [
                10509,
                10526
              ]
            }
          },
          "[/div][/url]\r\n              [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            10561,
            10565
          ]
        }
      },
      "\r\n            [/div]\r\n          [/div]\r\n          ",
      {
        "type": "group",
        "description": "Final Text",
        "markerStart": {
          "type": "group",
          "description": "Final Text",
          "original": "&Final Text \\ group&",
          "repeat": false,
          "indices": [
            10616,
            10635
          ]
        },
        "repeat": false,
        "originalChildren": [
          "[div=position: absolute; height: 55%; width: 100%; overflow-x: hidden; overflow-y: scroll; left: 30px; top: 7.5%; color: var(--lightColor); text-shadow: -1px -1px 0px var(--darkColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4; box-sizing: border-box; padding-right: calc(40px + 1em); padding-left: 1.5em;]\r\n            ",
          {
            "type": "group",
            "description": "Paragraph Block",
            "markerStart": {
              "type": "group",
              "description": "Paragraph Block",
              "original": "&Paragraph Block \\ group \\ repeat&",
              "repeat": true,
              "indices": [
                10996,
                11029
              ]
            },
            "repeat": true,
            "originalChildren": [
              "[div=display: block; margin-bottom: .5em;]",
              {
                "type": "content",
                "description": "Paraph",
                "marker": {
                  "type": "content",
                  "description": "Paraph",
                  "original": "&Paraph \\ content&",
                  "indices": [
                    11072,
                    11089
                  ]
                }
              },
              "[/div]"
            ],
            "children": [],
            "markerEnd": {
              "type": "end",
              "description": "end",
              "original": "&end&",
              "indices": [
                11096,
                11100
              ]
            }
          },
          "\r\n          [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            11119,
            11123
          ]
        }
      },
      "\r\n        [/div]\r\n      [/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        11154,
        11158
      ]
    }
  },
  "\r\n    [/div]\r\n    ",
  {
    "type": "group",
    "description": "Navigation",
    "markerStart": {
      "type": "group",
      "description": "Navigation",
      "original": "&Navigation \\ group&",
      "repeat": false,
      "indices": [
        11177,
        11196
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[div=position: absolute; z-index: 4; bottom: 0px; left: 0px; width: 100%; background: var(--darkColor); font-family: var(--aFont); text-transform: uppercase; letter-spacing: .15em; font-size: .95rem; box-sizing: border-box; text-align: right; padding: 8px 3%; mix-blend-mode: darken;]\r\n      [url=",
      {
        "type": "text",
        "description": "Bottom Right Link URL",
        "marker": {
          "type": "text",
          "description": "Bottom Right Link URL",
          "defaultValue": "",
          "original": "&Bottom Right Link URL \\ text&",
          "indices": [
            11494,
            11523
          ]
        }
      },
      "][div=display: inline-block; color: var(--lightColor);]=",
      {
        "type": "text",
        "description": "Bottom Right Link Name",
        "marker": {
          "type": "text",
          "description": "Bottom Right Link Name",
          "defaultValue": "",
          "original": "&Bottom Right Link Name \\ text&",
          "indices": [
            11580,
            11610
          ]
        }
      },
      "[/div][/url]\r\n    [/div]\r\n    [div=position: absolute; z-index: 5; top: 0px; left: 0px; height: 100%; background: var(--darkColor); font-family: var(--aFont); text-transform: uppercase; writing-mode: vertical-lr; font-size: .95rem; letter-spacing: .15em; box-sizing: border-box; padding: 0px 8px 15% 8px; gap: 5px; display: flex; flex-flow: row nowrap; justify-content: space-evenly; align-items: center; mix-blend-mode: darken;]\r\n      ",
      {
        "type": "group",
        "description": "Left Links",
        "markerStart": {
          "type": "group",
          "description": "Left Links",
          "original": "&Left Links \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            12048,
            12076
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[url=",
          {
            "type": "text",
            "description": "Link URL",
            "marker": {
              "type": "text",
              "description": "Link URL",
              "defaultValue": "",
              "original": "&Link URL \\ text&",
              "indices": [
                12082,
                12098
              ]
            }
          },
          "][div=display: inline-block; transform: rotate(180deg); color: var(--lightColor);]",
          {
            "type": "text",
            "description": "Link Name",
            "marker": {
              "type": "text",
              "description": "Link Name",
              "defaultValue": "",
              "original": "&Link Name \\ text&",
              "indices": [
                12181,
                12198
              ]
            }
          },
          "[/div][/url]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            12211,
            12215
          ]
        }
      },
      "\r\n    [/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        12228,
        12232
      ]
    }
  },
  "\r\n  [/div]\r\n[/nobr]"
]

[]

nightowl(ic).template 1.0

By glucoseguardian

Variable Set-Up

Background Image URL

Main Accent Color

Title Card

Title

Subtitle

Subtitle Text

Second Screen

short quote or lyric

title

Image URL (suggested vertical ratio)

Second Screen Contents

Paragraph

Role Area

Role Slot

Character Image URL

Role Title

Character Name

Role Description

Roles Text

Final Screen

Text Block

Links

Link URL

Link Name

Final Text

Paragraph Block

Paraph

Navigation

Bottom Right Link URL

Bottom Right Link Name

Left Links

Link URL

Link Name

Output