Линия за прокруткой
Толстая петляющая SVG-линия дорисовывается по мере прокрутки страницы, обвивая заголовок и уходя вниз к подвалу.
Установка
npm install motionpnpm add motionyarn add motionbun add motionФайлы
scroll-stroke.tsx
Крупный заголовок обвивает толстая петляющая линия. Пока вы прокручиваете страницу, она дорисовывается дальше: закручивается вокруг текста, уходит вниз по всей высоте секции и заканчивается у подвала.
Длина линии напрямую связана с прогрессом прокрутки, поэтому при движении назад она так же плавно укорачивается. Цвет, толщина и начальная длина штриха задаются пропсами.
Скопируйте эти файлы в components/scroll-stroke/:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { useScroll } from "motion/react";
import { useRef } from "react";
import { ScrollStroke } from "@/components/scroll-stroke/scroll-stroke";
export function Hero() {
const sectionRef = useRef<HTMLElement>(null);
const { scrollYProgress } = useScroll({ target: sectionRef });
return (
<section ref={sectionRef} className="relative h-[350vh] overflow-hidden">
<ScrollStroke scrollYProgress={scrollYProgress} color="#66d9e8" strokeWidth={20} className="absolute top-0" />
</section>
);
}scrollYProgressПрогресс прокрутки от 0 до 1
Тип MotionValue<number>
color?Цвет линии
Тип string·По умолчанию "var(--color-brand)"
strokeWidth?Толщина линии
Тип number·По умолчанию 20
startLength?Доля линии, видимая до начала прокрутки
Тип number·По умолчанию 0.5
className?Классы SVG
Тип string