Над областью лежит прозрачный холст, и курсор при движении рисует на нём линию. Быстрые рывки разбиваются на короткие отрезки, поэтому след остаётся гладким даже при резком движении мыши.
В режиме затухания каждый отрезок постепенно исчезает, и за курсором тянется короткий хвост. Можно включить рисование только с зажатой кнопкой и собственный кружок-курсор, а когда мышь покидает область, холст очищается. На сенсорных экранах эффект отключается.
Скопируйте эти файлы в components/drawing-cursor/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { DrawingCursor } from "@/components/drawing-cursor/drawing-cursor";
export function Canvas() {
return (
<div className="h-[600px] bg-sky-300">
<DrawingCursor type="drawAlways" strokeColor="#fff" strokeWidth={2} followEffect />
</div>
);
}type?Рисовать всегда или только с зажатой кнопкой
Тип "drawAlways" | "drawOnHold"
strokeColor?Цвет линии
Тип string·По умолчанию "#000000"
strokeWidth?Толщина линии
Тип number·По умолчанию 1
followEffect?След постепенно тает
Тип boolean·По умолчанию false
fadeMs?Время затухания отрезка в миллисекундах
Тип number·По умолчанию 500
customCursor?Показывать кружок-курсор
Тип boolean·По умолчанию false
children?Содержимое поверх холста
Тип ReactNode
className?Классы корневого блока
Тип string