Обычный border-radius даёт резкий переход от прямой стороны к дуге. Этот фильтр размывает фигуру и снова обрезает её по порогу прозрачности, и углы становятся плавными, как у иконок в iOS. Фильтр подключается к любому элементу через CSS filter.
В панели «Настройка» можно включать и выключать фильтр, менять размеры блока, силу размытия, контраст матрицы и порог альфы и сразу видеть, как меняется форма.
Скопируйте эти файлы в components/squircle-filter/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { SquircleFilter } from "@/components/squircle-filter/squircle-filter";
export function Card() {
return (
<>
<SquircleFilter id="squircle" blurValue={10} colorMatrixValue={20} alphaValue={-7} />
<div className="h-[200px] w-[300px] rounded-2xl bg-foreground" style={{ filter: "url(#squircle)" }} />
</>
);
}id?Идентификатор фильтра для url(#id)
Тип string·По умолчанию "SquiCircleFilter"
blurValue?Сила размытия
Тип number·По умолчанию 10
colorMatrixValue?Контраст альфа-канала
Тип number·По умолчанию 20
alphaValue?Порог альфа-канала
Тип number·По умолчанию -7
hint?Подсказка над фигурой
Тип string·По умолчанию "сквиркл на svg-фильтре"
filterOn?Фильтр включён при старте
Тип boolean·По умолчанию true
initialWidth?Ширина фигуры
Тип number·По умолчанию 300
initialHeight?Высота фигуры
Тип number·По умолчанию 200
initialBlur?Размытие
Тип number·По умолчанию 10
initialMatrix?Контраст матрицы
Тип number·По умолчанию 20
initialAlpha?Порог альфы
Тип number·По умолчанию -7
radius?Скругление фигуры в пикселях, по умолчанию 16
Тип number
color?Цвет фигуры, по умолчанию цвет темы
Тип string
className?Классы корневого блока
Тип string