Animated HTML Elements

{
  "name": "animated-html-elements",
  "resolution": "hd",
  "duration": 5,
  "frameRate": 30,
  "backgroundColor": "#101828",
  "visuals": [
    {
      "type": "SVG",
      "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><circle class=\"spinner-arc\" cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#22d3ee\" stroke-width=\"10\" stroke-dasharray=\"180 72\" stroke-linecap=\"round\"/></svg>",
      "width": 200,
      "height": 200,
      "x": 180,
      "y": 260,
      "enterBegin": 0,
      "exitEnd": 5,
      "customCode": {
        "css": ".spinner-arc { transform-box: fill-box; transform-origin: center; animation: spin 1.5s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }"
      },
      "track": 0
    },
    {
      "type": "TEXT",
      "html": "<div class=\"badge\">LIMITED OFFER</div>",
      "x": 480,
      "y": 320,
      "enterBegin": 0,
      "exitEnd": 5,
      "style": {
        "fontFamily": "Poppins"
      },
      "customCode": {
        "css": ".badge { color: #ffffff; font-size: 72px; padding: 20px 40px; background: #e11d48; border-radius: 16px; animation: pulse 1s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }"
      },
      "track": 1
    },
    {
      "type": "TEXT",
      "html": "<div class=\"price\">$9.99</div>",
      "x": 600,
      "y": 480,
      "enterBegin": 0,
      "exitEnd": 5,
      "style": {
        "fontFamily": "Poppins"
      },
      "customCode": {
        "css": ".price { color: #fbbf24; font-size: 64px; font-weight: 700; }",
        "js": "document.querySelector('.price').animate([{ transform: 'translateY(0)' }, { transform: 'translateY(-30px)' }, { transform: 'translateY(0)' }], { duration: 800, iterations: Infinity, easing: 'ease-in-out' });"
      },
      "track": 2
    }
  ],
  "audios": []
}