График строится сам, пока вы прокручиваете. Четыре способа доставки Китай → Россия выходят на оси «срок × цена» по одному, соединяются плавной кривой, а в финале подсвечивается зона оптимума. Короткий ответ: да — но не всегда нужно платить за скорость.
По горизонтали — срок доставки в днях, по вертикали — цена за килограмм. Любой способ — это одна точка на этом поле. Чем выше — тем дороже, чем правее — тем дольше.
Слева вверху: дороже всех, но и быстрее всех. Образцы, электроника, всё, что нужно «вчера».
Точка резко падает вниз: цена почти вдвое ниже авиа, а срок прибавляет всего неделю-полторы. Рабочий вариант для регулярных поставок.
Ещё дешевле и чуть дольше. Большие партии по понятному расписанию — без сюрпризов по срокам.
Справа внизу: минимальная цена за килограмм для крупного тоннажа — ценой самого долгого срока.
Соединяем точки — и зависимость видна целиком: за каждый сэкономленный доллар платишь днями в пути. Падение от авиа к авто самое крутое, дальше выигрыш в цене замедляется.
Зона авто и ж/д даёт почти морскую цену при сроке вдвое короче. Платить за авиа стоит, только когда время важнее денег. Подберём плечо под вашу партию — а не «как у всех».
position: sticky, а подписи-шаги справе прокручиваются мимо. Каждый шаг — свой ScrollTrigger (toggleActions), который проявляет очередную стадию: оси рисуются через DrawSVGPlugin (stroke-dasharray), точки всплывают (scale/opacity), цены отсчитываются count-up, соединяющая кривая рисуется тем же DrawSVG, а в финале выезжает зона оптимума. Связанный scatter нарисован вручную в SVG (без чарт-либы) — точки и сетка посчитаны под оси срок 0–48 дн × цена 0–8 $/кг. Всё в gsap.matchMedia(): при prefers-reduced-motion: reduce анимаций нет — график показан в финальном виде (оси и кривая отрисованы, все точки и цены на месте, зона оптимума видна), подписи показаны, Lenis и ScrollTrigger не запускаются.