Рисующаяся линия — толстая линия за контентом дорисовывается при прокрутке

Что это за эффект

За фотографиями и текстом секции петляет толстая линия. Пока человек листает страницу, линия рисуется вниз вслед за ним: её кончик держится в одной точке экрана. При прокрутке назад линия стирается. Сама кривая подстраивается под размер блока, поэтому линия одинаковой толщины и на широком экране, и на телефоне.

Эффект повторяет пример Codegrid «Scroll-Powered SVG Stroke», только без GSAP и ScrollTrigger.

Где использовать

• Лендинг продукта: линия ведёт взгляд от одного блока преимуществ к другому.
• Рассказ по шагам: путь, история компании, этапы работы.
• Портфолио: живой акцент в длинной ленте проектов.

Как добавить на сайт

Через ИИ-агента — самый простой путь. Эти эффекты сделаны в первую очередь для тех, кто собирает сайт вместе с ИИ-агентом: Claude Code, Cursor или любым другим. Настройте эффект на примере выше, нажмите «Скопировать код» и вставьте его в чат агента с одной фразой: «Сделай мне такой эффект на сайте». В скопированном коде уже есть описание эффекта и инструкция для агента. Он сам перенесёт стили, разметку и скрипт и подставит ваш контент. Ваши настройки сохранятся.

Вручную. «Скачать код» даёт готовую HTML-страницу с вашими настройками. «Скопировать код» копирует только стили, разметку и скрипт. Скрипт без зависимостей.

<section class="stroke">
  <svg viewBox="0 0 1378 2760" fill="none" aria-hidden="true">
    <path stroke="#ff5f0a" d="M639.7 100C639.7 100 105.7 100 199.7 601.5…"/>
  </svg>
  <!-- ваш контент поверх линии -->
</section>

createScrollStroke(document.querySelector('.stroke'), { width: 14, anchor: 0.6 });

Форму линии можно нарисовать в Figma или любом векторном редакторе. Скрипту нужен путь с абсолютными координатами (команды M, L, C, S, Q, T), а viewBox задаёт, в каком прямоугольнике он нарисован.

Настройки

• Толщина линии — доля ширины блока.
• Кончик линии — в какой точке экрана держится кончик, пока линия рисуется.
• Отступ по бокам — насколько изгибы отходят от краёв блока.
• Начало линии — где по высоте блока начинается линия.
• Плавность — насколько мягко линия догоняет прокрутку.

Доступность и производительность

Линия декоративная и скрыта от скринридеров. Если в системе включено «Уменьшить движение», линия сразу нарисована целиком. При прокрутке меняется только stroke-dashoffset одного пути, а когда прокрутка стоит, скрипт не работает.

Частые вопросы

Как поменять цвет? Цвет задаёт атрибут stroke у пути или CSS.

Можно ли поставить линию поверх контента? Да, поставьте SVG после контента или дайте ему z-index. Обычно линия лучше смотрится за контентом.