Интерфейсы В деталях
Warp Carousel: карточки с эффектом линзы
Карусель Louis Studios: карточки вращаются в объёме, растягиваются у краёв и подсвечивают фон. Попробуйте движение и настройте силу искажения.
Автопрокрутка отключена по настройкам вашего устройства. Используйте стрелки для смены карточек.
Промпт для внедрения 550 ₽
Готовая инструкция для AI-редактора с кодом Warp Carousel и примером использования. Разовая покупка открывает этот промпт в вашем аккаунте.
Один выбранный промпт. Оплата через ЮKassa. Демо можно смотреть бесплатно.
Войдите по email, чтобы сохранить покупку и вернуться к промпту с другого устройства.
Что здесь интересно
Центральная карточка остаётся читаемой, а соседние уходят в глубину. У краёв появляется эффект широкой линзы: цвет растягивается, контуры расходятся, свечение меняет оттенок вместе с карточкой.
В примере сохранены демонстрационные надписи и числа автора. Это часть оформления, а не показатели AxDigital и не замеры производительности.
Где использовать
Такое движение подойдёт для избранных проектов, возможностей продукта или короткой подборки. Дайте посетителю остановить анимацию и самостоятельно выбрать карточку.
Для длинного каталога удобнее обычная сетка. Здесь лучше работают несколько крупных карточек с коротким текстом.
Как подключить компонент
Исходный компонент написан на React и TypeScript. Рисует через WebGL 2, а если он недоступен - использует Canvas 2D. Для этого примера Tailwind не нужен.
import { WarpCarousel } from "@/components/ui/warp-carousel";
export function Example() {
return (
<div style={{ height: 560 }}>
<WarpCarousel ariaLabel="Примеры проектов" />
</div>
);
}Основные настройки: cards - содержание карточек, autoplay - автопрокрутка, interval - интервал в секундах, warp - сила эффекта от 0 до 1. В Astro компонент подключается с директивой client:visible.
Демо учитывает системную настройку уменьшения движения: автопрокрутка выключается, переходы доступны через стрелки.
