Pixel Transition
Карточка рассыпается на пиксели и собирается во что-то другое: обложка и оборот, фото и подпись, тариф и цена.
зависимости 0файлы tsx + cssпараметры 5react 18+
Кейс 01Доставка продуктов
3×быстрее первый экран после переписывания
X 0000 Y 0000↳ Наведите на карточку или коснитесь её
Пульт05 параметров
01gridSize
Пикселей по стороне.
02pixelColor
Цвет пикселей.
03duration
ms
Длительность всего перехода.
04trigger
Что переворачивает карточку.
05aspectRatio
Ширина / высота.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
gridSize | number | 12 | Пикселей по стороне. |
pixelColor | string | "#b6e24c" | Цвет пикселей. |
duration | number | 600 | Длительность всего перехода. |
trigger | 'hover' | 'click' | "hover" | Что переворачивает карточку. |
aspectRatio | number | 0.8 | Ширина / высота. |
first | ReactNode | — | Показывается в покое. |
second | ReactNode | — | Открывается при наведении или касании. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |