Tilt Card
Карточка наклоняется в 3D к курсору, по ней бежит блик, а тень следует за светом.
зависимости 0файлы tsx + css + tsпараметры 8react 18+
№ 07 — Сторона АСигнал и шум
X 0000 Y 0000↳ Ведите по карточке или потяните её
Пульт08 параметров
01maxTilt
deg
Максимальный поворот.
02perspective
px
Меньше — драматичнее.
03scale
Масштаб при наведении.
04smoothing
Как быстро догоняет.
05reverse
Наклоняться от курсора.
06glare
Движущийся блик.
07glareOpacity
Сила блика.
08shadow
Тень, которая смещается с наклоном.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
maxTilt | number | 14 | Максимальный поворот. |
perspective | number | 900 | Меньше — драматичнее. |
scale | number | 1.04 | Масштаб при наведении. |
smoothing | number | 0.12 | Как быстро догоняет. |
reverse | boolean | false | Наклоняться от курсора. |
glare | boolean | true | Движущийся блик. |
glareOpacity | number | 0.35 | Сила блика. |
shadow | boolean | true | Тень, которая смещается с наклоном. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |