Shopify Curved Marquee – Animated Text on Path

                    <!-- 
========================================
Section Name: Curved Marquee
Tech Stack: Liquid, HTML, CSS, JavaScript, SVG
What This Section Does: 
- Displays animated text that follows a curved SVG path.
- Features customizable text segments with optional links.
- Includes adjustable animation speed, colors, font sizes, and line width.
- Fully responsive design with specific font size controls for different devices.

Promotion: 
Add visual interest to your Shopify store with a curved marquee animation. Create eye-catching text that moves along a customizable path. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
<div class="curved-marquee-section" style="background-color: {{ section.settings.background_color }};">
  <div class="marquee-container">
    <svg width="100%" height="200" viewBox="0 0 1000 100">
      <defs>
        <path id="text-path" d="M -50 50 Q 200 -50, 400 50 Q 600 150, 800 50 Q 1000 -50, 1200 50" fill="transparent"/>
      </defs>

      <path d="M -50 50 Q 200 -50, 400 50 Q 600 150, 800 50 Q 1000 -50, 1200 50" fill="none" stroke="{{ section.settings.line_color }}" stroke-width="{{ section.settings.line_width }}"/>

      <text font-size="{{ section.settings.font_size }}" fill="{{ section.settings.text_color }}" font-family="{{ section.settings.font_family }}" class="uppercase-text" text-anchor="middle" dominant-baseline="middle">
        <textPath id="marquee-text" href="#text-path">
          <!-- Text will be added via JavaScript -->
        </textPath>
      </text>
    </svg>
  </div>
</div>

<style>
  .curved-marquee-section {
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
    font-family: {{ section.settings.font_family }}, sans-serif;
  }

  .marquee-container {
    width: 100%;
    overflow: hidden;
  }

  .uppercase-text {
    text-transform: uppercase;
  }

  .marquee-link {
    text-decoration: none;
    color: inherit;
  }

  @media (max-width: 768px) {
    #marquee-text {
      font-size: {{ section.settings.font_size_tablet }};
    }
  }

  @media (max-width: 480px) {
    #marquee-text {
      font-size: {{ section.settings.font_size_mobile }};
    }
  }
</style>

<script>
  function startMarquee(id, pathId, content, speed) {
    const textPath = document.getElementById(id);
    const path = document.getElementById(pathId);
    const pathLength = path.getTotalLength();
    textPath.innerHTML = content;

    let offset = 0;

    function animateText() {
      offset -= speed;
      if (offset < -pathLength) {
        offset = 0;
      }
      textPath.setAttribute('startOffset', `${offset}px`);
      requestAnimationFrame(animateText);
    }

    animateText();
  }

  document.addEventListener('DOMContentLoaded', () => {
    let textContent = '';
    {% for block in section.blocks %}
      {% if block.type == 'text_segment' %}
        {% if block.settings.link != blank %}
          textContent += '<a href="{{ block.settings.link }}" class="marquee-link" {% if block.settings.open_in_new_tab %}target="_blank"{% endif %}>{{ block.settings.text | escape }}</a>    ';
        {% else %}
          textContent += '{{ block.settings.text | escape }}    ';
        {% endif %}
      {% endif %}
    {% endfor %}
    
    // Repeat the text to ensure it fills the path
    textContent = textContent.repeat(20);
    
    startMarquee('marquee-text', 'text-path', textContent, {{ section.settings.animation_speed }});
  });
</script>

{% schema %}
{
  "name": "Curved Marquee",
  "settings": [
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#f0f0f0"
    },
    {
      "type": "color",
      "id": "line_color",
      "label": "Line Color",
      "default": "#B5F652"
    },
    {
      "type": "range",
      "id": "line_width",
      "min": 1,
      "max": 40,
      "step": 0.5,
      "unit": "rem",
      "label": "Line Width",
      "default": 2.5
    },
    {
      "type": "text",
      "id": "font_family",
      "label": "Font Family",
      "default": "Rubik"
    },
    {
      "type": "range",
      "id": "font_size",
      "min": 0.5,
      "max": 10,
      "step": 0.1,
      "unit": "rem",
      "label": "Font Size",
      "default": 0.8
    },
    {
      "type": "range",
      "id": "font_size_tablet",
      "min": 0.5,
      "max": 5,
      "step": 0.1,
      "unit": "rem",
      "label": "Font Size (Tablet)",
      "default": 2
    },
    {
      "type": "range",
      "id": "font_size_mobile",
      "min": 0.5,
      "max": 5,
      "step": 0.1,
      "unit": "rem",
      "label": "Font Size (Mobile)",
      "default": 4
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#020203"
    },
    {
      "type": "range",
      "id": "animation_speed",
      "min": 0.5,
      "max": 5,
      "step": 0.5,
      "label": "Animation Speed",
      "default": 2
    }
  ],
  "blocks": [
    {
      "type": "text_segment",
      "name": "Text Segment",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "label": "Text",
          "default": "Buy tickets"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link (Optional)"
        },
        {
          "type": "checkbox",
          "id": "open_in_new_tab",
          "label": "Open in new tab",
          "default": true
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Curved Marquee",
      "category": "Text",
      "blocks": [
        {
          "type": "text_segment",
          "settings": {
            "text": "Buy tickets"
          }
        },
        {
          "type": "text_segment",
          "settings": {
            "text": "Learn more"
          }
        }
      ]
    }
  ]
}
{% endschema %}