Spotlight Card
Поверхность, подсвеченная курсором: мягкий свет внутри и более яркий отблеск на рамке.
зависимости 0файлы tsx + cssпараметры 6react 18+
Мгновенный отклик
Каждый параметр живой. Двигаете фейдер, видите результат, копируете код. Вот и весь процесс.
X 0000 Y 0000↳ Ведите по карточке или потяните её
Пульт06 параметров
01spotlightColor
Свет внутри карточки (8-значный hex для прозрачности).
02borderGlow
Свет на рамке.
03size
px
Диаметр пятна света.
04background
Фон карточки.
05borderColor
Цвет рамки в покое.
06radius
px
Скругление углов.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
spotlightColor | string | "#b6e24c26" | Свет внутри карточки (8-значный hex для прозрачности). |
borderGlow | string | "#cfee8acc" | Свет на рамке. |
size | number | 420 | Диаметр пятна света. |
background | string | "#121211" | Фон карточки. |
borderColor | string | "#ffffff14" | Цвет рамки в покое. |
radius | number | 20 | Скругление углов. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |