Две фигуры — плашка и шарик — лежат под общим SVG-фильтром. Их можно хватать и таскать мышью, и когда они сближаются, края начинают тянуться друг к другу и сливаются, как капли жидкости.
При появлении плашка вырастает из шарика и отрывается вверх, оставляя между ними тягучую перемычку. Сила размытия, контраст и порог альфы задают, насколько вязкой выглядит жидкость.
Скопируйте эти файлы в components/gooey-drag/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { GooeyDrag } from "@/components/gooey-drag/gooey-drag";
export function Playground() {
return (
<div className="relative h-[600px]">
<GooeyDrag hint="Тяните фигуры" blur={6} color="#66d9e8" />
</div>
);
}hint?Подсказка над фигурами
Тип string·По умолчанию "Тяните фигуры и смотрите эффект"
filterId?Идентификатор SVG-фильтра
Тип string·По умолчанию "astraGooeyFilter"
blur?Сила размытия
Тип number·По умолчанию 4.4
matrix?Контраст слияния
Тип number·По умолчанию 20
alpha?Порог альфа-канала
Тип number·По умолчанию -7
color?Цвет фигур, по умолчанию цвет темы
Тип string
ballSize?Размер шарика в пикселях, по умолчанию 48
Тип number
className?Классы корневого блока
Тип string