Showcase Vibe — это интерактивная демонстрация приёмов vibe coding: анимаций, эффектов и UI-компонентов.
Демонстрация возможностей современного фронтенда: motion, интерактив и аккуратная визуальная проработка.
Демо анимаций
3 типа анимаций в одном блоке: поочерёдное появление при входе в viewport, отзыв на курсор и тач (spring-физика) и прогресс-бар от скролла.
3D flip-карточки
На десктопе карточки переворачиваются при наведении, на мобильном — по tap.
Пружина от курсора
Курсор двигает внутренний элемент с физикой spring.
Скролл-бар (от прогресса)
Индикатор синхронизирован с прогрессом скролла этой карточки.
ОТ СКРОЛЛА
Интерактивные компоненты
Каждый блок управляет своим состоянием: кликай, тяни, считай, проверяй, как ведёт себя интерфейс.
Кнопка с конфетти
Нажатие запускает взрыв конфетти через холст.
Кнопка-морфинг
Переходы состояния: ожидание → загрузка → готово.
Слайдер с анимацией
Анимированный трек и динамический цвет по текущему значению.
Счётчик
Кнопки +/- обновляют значение, а число анимируется пружиной.
0
Современные техники UI
4 карточки с разными визуальными техниками. Наведи на каждую, чтобы увидеть уникальный hover.
Стеклянный эффект
Размытие backdrop + прозрачный слой + светящийся контур.
Неоновое свечение
Неоновое свечение усиливается на hover.
Плавающий градиент
Фон-карточка с бесконечным движением градиента.
Северное сияние
Слоистая цветовая анимация в стиле северного сияния.
Адаптивные макеты
Переключай устройство и смотри, как макет плавно меняет структуру: сетка → компактная сетка → вертикальный стек.
Текущий режим: ПК
ПК