КарточкиProНовое
Голографическая карта
Карта с фольгой, как у коллекционных карточек. Наклоняется за курсором, по ней бегут полосы и блик.
Настройки
foilTint
foilTint2
foilHighlight
Основано на Holographic Foil (MIT лицензия) · Условия использования
Параметры
12 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| pattern | 'silver' | 'aurora' | 'gold' | 'oil' | 'prism' | "silver" | Материал фольги. |
| intensity | number | 0.6 | Яркость фольги, от 0 до 1. |
| glare | number | 0.5 | Сила блика, от 0 до 1. |
| sheenSpeed | number | 1 | Скорость блеска, который сам проходит по карте. |
| tilt | boolean | true | Наклонять карту за курсором. |
| foilOver | boolean | false | Класть фольгу поверх содержимого, например поверх картинки. |
| useDeviceOrientation | boolean | false | На телефоне наклонять по гироскопу, с запросом разрешения. |
| children | ReactNode | — | Содержимое карты. |
| className | string | — | Классы для обёртки. |
| foilTint | string | "#e5e5e5" | Главный цвет фольги. Пока все три цвета серые, работает выбранный узор. Любой яркий цвет печатает фольгу в ваших цветах. |
| foilTint2 | string | "#a3a3a3" | Второй цвет полос фольги. |
| foilHighlight | string | "#ffffff" | Самая светлая полоса фольги. |
Зависимости
Пакетов: 3
npm install motion clsx tailwind-merge