{
  "name": "Customer testimonial (vertical, animated)",
  "template": {
    "merge": [
      {
        "find": "HEADLINE",
        "replace": "What our customers say"
      },
      {
        "find": "QUOTE",
        "replace": "We went from a two-day turnaround on every product video to a workflow that runs itself. It just works."
      },
      {
        "find": "NAME",
        "replace": "Priya Raman"
      },
      {
        "find": "ROLE_COMPANY",
        "replace": "Head of Marketing, Northwind Outdoors"
      },
      {
        "find": "RATING_NUM",
        "replace": "5"
      },
      {
        "find": "ACCENT",
        "replace": "#22D3EE"
      }
    ],
    "timeline": {
      "background": "#060A14",
      "fonts": [
        {
          "src": "https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTfvlaQc78lA2.ttf"
        },
        {
          "src": "https://fonts.gstatic.com/s/playfairdisplay/v40/nuFiD-vYSZviVYUb_rj3ij__anPXPTvSgWE_-xU.ttf"
        }
      ],
      "tracks": [
        {
          "clips": [
            {
              "asset": {
                "type": "rich-text",
                "text": "{{HEADLINE}}",
                "font": {
                  "family": "UcCo3FwrK3iLTfvlaQc78lA2",
                  "size": 32,
                  "weight": "600",
                  "color": "{{ACCENT}}"
                },
                "align": {
                  "horizontal": "left",
                  "vertical": "top"
                },
                "style": {
                  "letterSpacing": 5,
                  "textTransform": "uppercase"
                },
                "animation": {
                  "preset": "fadeIn",
                  "duration": 0.6
                }
              },
              "start": 1,
              "length": 10.5,
              "width": 880,
              "height": 60,
              "position": "top",
              "offset": {
                "x": 0,
                "y": -0.215
              },
              "transition": {
                "out": "fade"
              }
            }
          ]
        },
        {
          "clips": [
            {
              "asset": {
                "type": "rich-text",
                "text": "{{QUOTE}}",
                "font": {
                  "family": "nuFiD-vYSZviVYUb_rj3ij__anPXPTvSgWE_-xU",
                  "size": 68,
                  "weight": "500",
                  "color": "#F8FAFC"
                },
                "align": {
                  "horizontal": "left",
                  "vertical": "middle"
                },
                "style": {
                  "lineHeight": 1.22
                },
                "animation": {
                  "preset": "ascend",
                  "duration": 0.8,
                  "direction": "up"
                }
              },
              "start": 1.3,
              "length": 10.2,
              "width": 880,
              "height": 640,
              "position": "center",
              "offset": {
                "x": 0,
                "y": -0.02
              },
              "transition": {
                "out": "fade"
              }
            }
          ]
        },
        {
          "clips": [
            {
              "asset": {
                "type": "rich-text",
                "text": "{{NAME}}",
                "font": {
                  "family": "UcCo3FwrK3iLTfvlaQc78lA2",
                  "size": 44,
                  "weight": "700",
                  "color": "#F8FAFC"
                },
                "align": {
                  "horizontal": "left",
                  "vertical": "middle"
                },
                "animation": {
                  "preset": "fadeIn",
                  "duration": 0.6
                }
              },
              "start": 3.2,
              "length": 8.3,
              "width": 880,
              "height": 60,
              "position": "bottom",
              "offset": {
                "x": 0,
                "y": 0.235
              },
              "transition": {
                "out": "fade"
              }
            }
          ]
        },
        {
          "clips": [
            {
              "asset": {
                "type": "rich-text",
                "text": "{{ROLE_COMPANY}}",
                "font": {
                  "family": "UcCo3FwrK3iLTfvlaQc78lA2",
                  "size": 32,
                  "weight": "400",
                  "color": "#A5B4C4"
                },
                "align": {
                  "horizontal": "left",
                  "vertical": "middle"
                },
                "animation": {
                  "preset": "fadeIn",
                  "duration": 0.6
                }
              },
              "start": 3.5,
              "length": 8,
              "width": 880,
              "height": 50,
              "position": "bottom",
              "offset": {
                "x": 0,
                "y": 0.2
              },
              "transition": {
                "out": "fade"
              }
            }
          ]
        },
        {
          "clips": [
            {
              "asset": {
                "type": "html5",
                "html": "<div id=\"wrap\">\n  <div class=\"blob\" id=\"b1\"></div><div class=\"blob\" id=\"b2\"></div><div class=\"blob\" id=\"b3\"></div>\n  <div id=\"grid\"></div>\n  <div id=\"bar\"></div>\n  <svg id=\"qmark\" viewBox=\"0 0 100 100\"><path d=\"M18 62c0-18 11-32 30-40l4 7c-11 5-17 12-18 21 6-1 12 1 16 6 4 5 4 12-1 17-5 6-14 7-21 2-7-4-10-8-10-13zm42 0c0-18 11-32 30-40l4 7c-11 5-17 12-18 21 6-1 12 1 16 6 4 5 4 12-1 17-5 6-14 7-21 2-7-4-10-8-10-13z\"/></svg>\n  <div id=\"stars\"></div>\n</div>",
                "css": "html,body{margin:0;width:1080px;height:1920px;overflow:hidden;background:#060A14}\n#wrap{position:relative;width:1080px;height:1920px;overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,#0E1B33 0%,#060A14 60%)}\n.blob{position:absolute;width:900px;height:900px;border-radius:50%;filter:blur(90px);opacity:.55;mix-blend-mode:screen}\n#b1{left:-300px;top:-200px;background:{{ACCENT}};opacity:.28}\n#b2{left:420px;top:300px;background:#4C6FFF;opacity:.30}\n#b3{left:-100px;top:1150px;background:#0EA5A0;opacity:.26}\n#grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:120px 120px;mask-image:radial-gradient(80% 70% at 50% 45%,#000 40%,transparent 100%);-webkit-mask-image:radial-gradient(80% 70% at 50% 45%,#000 40%,transparent 100%)}\n#bar{position:absolute;left:100px;top:378px;width:0;height:10px;border-radius:5px;background:{{ACCENT}}}\n#qmark{position:absolute;left:88px;top:560px;width:220px;height:220px;fill:{{ACCENT}};opacity:0;transform:translateY(24px)}\n#stars{position:absolute;left:100px;top:1330px;display:flex;gap:14px}\n#stars svg{width:52px;height:52px;opacity:0;transform:scale(.6)}",
                "js": "const n=Math.max(1,Math.min(5,parseInt(\"{{RATING_NUM}}\",10)||5));\nconst box=document.getElementById('stars');\nfor(let i=0;i<5;i++){const s=document.createElementNS('http://www.w3.org/2000/svg','svg');s.setAttribute('viewBox','0 0 24 24');\nconst p=document.createElementNS('http://www.w3.org/2000/svg','path');p.setAttribute('d','M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.4 6.1 20.6l1.3-6.6L2.5 9.4l6.6-.8z');\np.setAttribute('fill',i<n?'#FBBF24':'rgba(255,255,255,.22)');s.appendChild(p);box.appendChild(s);}\ngsap.to('#b1',{x:160,y:120,duration:12,ease:'sine.inOut'});\ngsap.to('#b2',{x:-220,y:-140,scale:1.15,duration:12,ease:'sine.inOut'});\ngsap.to('#b3',{x:140,y:-180,duration:12,ease:'sine.inOut'});\nconst tl=gsap.timeline({defaults:{ease:'power3.out'}});\ntl.to('#bar',{width:120,duration:0.6},0.5)\n  .to('#qmark',{opacity:1,y:0,duration:0.6},0.7)\n  .to('#stars svg',{opacity:1,scale:1,duration:0.33,stagger:0.13,ease:'back.out(1.4)'},2.6)\n  .to('#wrap',{opacity:0,duration:0.5},11.5);"
              },
              "start": 0,
              "length": 12,
              "width": 1080,
              "height": 1920,
              "fit": "none",
              "position": "center",
              "transition": {
                "in": "fade"
              }
            }
          ]
        }
      ]
    },
    "output": {
      "format": "mp4",
      "fps": 25,
      "size": {
        "width": 1080,
        "height": 1920
      }
    }
  }
}