Интерактивные элементы для сайтов

Выберите, как будет работать ваш сайт.

Галереи, навигация, текст, фоны и формы. Все примеры работают прямо на странице — наведите курсор, нажмите или прокрутите внутри карточки.

4 примера

Текст

Для заголовков, коротких сообщений и акцентов, которые хочется заметить.

Все категории ↑
Объёмный заголовокВедите курсором
Текст, который реагирует на курсорДвигайте курсором по слову
Фраза с раскрытиемНаведите на фразу
Текст из символовСимволы собираются в сообщение

2 примера

Фоны и взаимодействие

Для первого экрана, промо-блоков и областей, которые реагируют на движение пользователя.

Все категории ↑
Фон, который реагирует на движениеДвигайте курсором
Живой цветной фонГрадиент реагирует на движение

34 компонентов React Bits

Компоненты

Готовые интерактивные блоки для навигации, карточек, галерей, интерфейсов и продуктовых сценариев. Порядок сохранён по React Bits.

Все категории ↑
Morph SliderПеретаскивайте изображение
Drift WallНаведите на карточку
Specular ButtonНаведите и нажмите
Option WheelПрокрутите или используйте клавиши
Curved InputВведите текст и отправьте
Line SidebarВыберите раздел
Scroll StackПрокрутите внутри карточки
Bubble MenuОткройте меню
Magic BentoДвигайте курсором по карточкам
Reflective CardНаведите на карту
Card NavОткройте меню
StackПеретащите верхнюю карточку
Pill NavНаведите на пункт
Tilted CardНаклоняйте курсором
MasonryАдаптивная раскладка изображений
Glass SurfaceПрокрутите внутри блока
Chroma GridДвигайте курсором по сетке
FolderНажмите на папку
Staggered MenuОткройте меню
Profile CardНаклоняйте карточку
DockНаведите на иконки
Gooey NavПереключайте пункты
Flying PostersПеретаскивайте постеры
Card SwapКарточки меняются автоматически
Glass IconsНаведите на иконки
Decay CardНаведите на изображение
Flowing MenuНаведите на строку
Elastic SliderПотяните ползунок
Infinite MenuПеретаскивайте сферу
Bounce CardsНаведите на карточку

27 примеров

Анимации

Полная коллекция интерактивных эффектов из официального раздела React Bits Animations.

Все категории ↑
Scroll ExpandПрокрутите внутри кадра
Elastic MeshНаведите и потяните сетку
Ripple DistortionДвигайте курсором по изображению
Swarm CursorВедите курсором внутри блока
Halftone RevealНаведите на изображение
Cursor GridДвигайте курсором и нажмите
Orbit ImagesИзображения движутся по траектории
Pixel TransitionНаведите или нажмите
AntigravityДвигайте курсором
Logo LoopНаведите, чтобы остановить
Target CursorНаведите на элементы
Magic RingsНаведите и нажмите
Magnet LinesДвигайте курсором
Gradual BlurПрокрутите содержимое
Click SparkНажмите внутри блока
MagnetПодведите курсор к кнопке
StrandsСветовые нити движутся автоматически
Sticker PeelПотяните наклейку
Pixel TrailВедите курсором
CubesНаведите или нажмите
Metallic PaintМеталлическая заливка логотипа
Shape BlurДвигайте курсором
CrosshairПеремещайте курсор
Image TrailБыстро двигайте курсором
Splash CursorДвигайте и нажимайте
Meta BallsДвигайте курсором
Blob CursorДвигайте курсором

1 пример

Анимированные иконки

Для кнопок, меню и состояний интерфейса: одна иконка плавно превращается в другую и помогает показать действие без лишнего текста.

Все категории ↑
Переходы между иконкамиВыберите иконки и настройте движение

Новая заявка

Расскажите о вашей задаче —
предложим решение

Оставьте заявку, и мы свяжемся с вами, чтобы обсудить проект и предложить оптимальный сценарий решения ваших задач.

Какие услуги вас интересуют?