Бегущая строка

<ya-kit-section-layout
    palette={{settings.palette}}
    padding-top={{settings.section.paddingTop}}
    padding-bottom={{settings.section.paddingBottom}}
    h-padding-desktop={{settings.section.hPaddingDesktop}}
    h-padding-mobile={{settings.section.hPaddingTouch}}
    is-fullscreen={{settings.section.isFullscreen}} 
>
    <ya-kit-section-layout-row> 
        <ya-kit-v-stack gap="100" class="container {{if (settings.isBlurry) 'blurry'}}">
            <div class="text-scroll">
                {{#repeat 10}}
                    <span class="text-scroll-item anim-loop-left type-outline">
                        {{#each settings.modules as |module|}}
                        	<span>{{module.title}}</span>
                        {{/each}}
                    </span>
                {{/repeat}}
            </div>
            <div class="text-scroll">
                {{#repeat 10}}
                    <span class="text-scroll-item anim-loop-right">
                       {{#each settings.modules as |module|}}
                        	<span>{{module.title}}</span>
                        {{/each}}
                    </span>
                {{/repeat}}
            </div>
        </ya-kit-v-stack>
    </ya-kit-section-layout-row>
</ya-kit-section-layout>

.container {
    position: relative;
    overflow: hidden;
}

.container.blurry::before,
.container.blurry::after {
    content: "";
    position: absolute;
    width: 5%;
    height: 100%;
    top: 0;
    z-index: 1;
}

.container::before {
    left: 0;
    background: linear-gradient(to right, var(--ys-background-primary), transparent);
}

.container::after {
    right: 0;
    background: linear-gradient(to left, var(--ys-background-primary), transparent);
}

.text-scroll {
    grid: auto / auto-flow max-content;
    justify-content: center;
    display: grid;
    overflow: hidden;
}

.text-scroll-item {
    grid: auto / auto-flow auto max-content;
    place-items: center;
    display: grid;
    animation-duration: 20s;
    
    font-weight: 600;
    font-size: 48px;
    color: var(--ys-color-token-text-primary);
}

.text-scroll-item.type-outline {
    color: var(--ys-background-primary);
}

.text-scroll-item > span {
    padding: 0 3rem;
    -webkit-text-shadow: -1px -1px 0 var(--ys-color-token-text-primary), 1px -1px 0 var(--ys-color-token-text-primary), -1px 1px 0 var(--ys-color-token-text-primary), 1px 1px 0 var(--ys-color-token-text-primary);
    text-shadow: -1px -1px 0 var(--ys-color-token-text-primary), 1px -1px 0 var(--ys-color-token-text-primary), -1px 1px 0 var(--ys-color-token-text-primary), 1px 1px 0 var(--ys-color-token-text-primary);
}

.anim-loop-left {
    animation: loop-anim-left 30s linear infinite reverse;
    white-space: nowrap;
}

.anim-loop-right {
    animation: loop-anim-right 30s linear infinite reverse;
    white-space: nowrap;
}

@keyframes loop-anim-left {
    from {
        transform: translateZ(0);
    }
    to {
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes loop-anim-right {
    from {
        transform: translate3d(-100%, 0, 0);
    }
    to {
        transform: translateZ(0);
    }
}

 1
 2{
 3  "title": "",
 4  "type": "object",
 5  "properties": {
 6    "palette": {
 7      "$ref": "#/definitions/Palette",
 8      "title": "Палитра цветов"
 9    },
10    "isBlurry": {
11      "type": "boolean",
12      "title": "Размывать края",
13      "value": false
14    },
15    "section": {
16      "type": "object",
17      "title": "Размеры секции",
18      "required": [
19        "isFullscreen",
20        "paddingTop",
21        "paddingBottom"
22      ],
23      "properties": {
24        "isFullscreen": {
25          "$ref": "#/definitions/OptionalFlag",
26          "title": "Растянуть секцию на весь экран"
27        },
28        "hPaddingDesktop": {
29          "$ref": "#/definitions/SectionHPadding",
30          "title": "Отступ по краям на десктопе"
31        },
32        "hPaddingMobile": {
33          "$ref": "#/definitions/SectionHPaddingTouch",
34          "title": "Отступ по краям на телефоне"
35        },
36        "paddingTop": {
37          "$ref": "#/definitions/SectionVPadding",
38          "title": "Отступ над секцией"
39        },
40        "paddingBottom": {
41          "$ref": "#/definitions/SectionVPadding",
42          "title": "Отступ под секцией"
43        }
44      }
45    },
46    "modules": {
47      "type": "array",
48      "items": {
49        "type": "object",
50        "properties": {
51          "title": {
52            "type": "string",
53            "title": "Текст",
54            "default": ""
55          }
56        },
57        "required": [
58          "title"
59        ]
60      },
61      "title": "Модуль"
62    }
63  },
64  "required": ["isBlurry", "section", "modules"]
65}
66