CP — Компоненты№ 041

Magic Bento

Бенто-сетка, подсвеченная курсором: мягкий свет идёт по карточкам, рамки ловят отблеск, а клик пускает кольцо.

зависимости 0файлы tsx + cssпараметры 7react 18+

live/magic-bento

Инсайты

Что пользователи делают на самом деле, а не что говорят.

Доставка

Выкладка во все сторы из одного пайплайна.

Качество

Сгруппированы, расшифрованы, по приоритету.

Команда

Комментарии прямо на сборке.

Процессы

Рутина выполняется сама.

Доверие

Ключи всегда остаются на сервере.

X 0000 Y 0000↳ Ведите по сетке, кликните по карточке

Пульт07 параметров

01glowColor

Цвет света.

02spotlightRadius

Радиус света.

03spotlight

Мягкий свет по всей сетке.

04borderGlow

Рамки ловят свет.

05tilt

Карточки наклоняются к курсору.

06ripple

Кольцо по клику.

07background

Фон карточек.

01 Пропсы

Проп	Тип	По умолчанию	Описание
`glowColor`	`string`	`"#b6e24c"`	Цвет света.
`spotlightRadius`	`number`	`320`	Радиус света.
`spotlight`	`boolean`	`true`	Мягкий свет по всей сетке.
`borderGlow`	`boolean`	`true`	Рамки ловят свет.
`tilt`	`boolean`	`false`	Карточки наклоняются к курсору.
`ripple`	`boolean`	`true`	Кольцо по клику.
`background`	`string`	`"#0e0e0d"`	Фон карточек.
`cards`	`MagicBentoCard[]`	—	{ title, description, label?, span?: 'normal' \| 'wide' \| 'tall' \| 'big' }
`className`	`string`	—	Передаётся корневому элементу.
`style`	`CSSProperties`	—	Передаётся корневому элементу.