Урок 10 · React Vibe & Motion UI · SI Academy

УРОК 10

React Vibe & Великолепная Семёрка: Motion UI 2026

10.1Пружинная физика вместо линейных анимаций

ОДНА КРИВАЯ · ДОРОГОЕ ОЩУЩЕНИЕ

Интерфейс выглядит дорого, когда элементы двигаются как физические предметы: резкий старт и мягкое торможение. В чистом CSS это одна кривая cubic-bezier(0.16, 1, 0.3, 1). Нажмите кнопку и сравните три шарика.

▶ Запустить / вернуть

LINEAR

EASE

SPRING · 0.16, 1, 0.3, 1

css · spring token

:root { --spring: cubic-bezier(0.16, 1, 0.3, 1); }
.card { transition: transform .6s var(--spring), opacity .6s var(--spring); }
.card:hover { transform: translateY(-4px) scale(1.01); }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }

10.2Motion для React

FRAMER-MOTION · НАСТОЯЩАЯ ПРУЖИНА

В React-проектах ставьте библиотеку Motion (бывший framer-motion): она считает пружину по массе и жёсткости, а не по кривой.

terminal · install

$ npm install motion

jsx · glow card

import { motion } from "motion/react";

export function GlowCard({ children }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 24 }}
      whileInView={{ opacity: 1, y: 0 }}
      whileHover={{ y: -4, scale: 1.01 }}
      transition={{ type: "spring", stiffness: 260, damping: 24 }}
      viewport={{ once: true }}
    >
      {children}
    </motion.div>
  );
}

10.3Примитивы Magic UI

BENTO · BORDER BEAM · GLASS

Bento Grid: сетка карточек разного размера вместо одинаковых колонок.
Border Beam: луч света бежит по рамке и показывает главный блок.
Glassmorphism: backdrop-filter: blur(16px) saturate(180%) поверх градиентного меша.
Floating Dock и Kinetic Typography: панель действий снизу и текст, который собирается по буквам.

Готовые React-компоненты: magicui.design ↗. Для одного HTML-файла повторяйте их на чистом CSS, как в блоке ниже.

BORDER BEAMАнимация угла conic-gradient через @property: ноль JavaScript, ноль библиотек.

GLASSРазмытие 16px и насыщенность 180% над радиальным мешем.

SPRING HOVERНаведите курсор: карточка поднимается по пружинной кривой.

BENTOШирокие и узкие ячейки создают иерархию без лишних заголовков.

10.4Vibe Lab V3.0: арена компонентов

SPOTLIGHT · BORDER BEAM · SPRING · WEB AUDIO

Шесть категорий по мотивам библиотек Семёрки: дешифровка и волновой текст, 3D-карточка с бликом, золотые искры на Canvas, лампа, бегущий луч, переливающаяся кнопка, пружина и магнит, Bento с подсветкой соседей и граф узлов. У каждого компонента есть кнопка «Код»: копируйте и вставляйте в свой проект.

ОТКРЫТЬ VIBE LAB V3.0 ↗

10.5Великолепная Семёрка UI библиотек мира

SOTA MOTION-FIRST REACT & VANILLA ARSENAL

Библиотека	Ключевая фишка	Назначение	Ссылка
01 React Bits	Canvas-шейдеры, Hyperspeed, SplitText	Кинетическая типографика и частицы	reactbits.dev ↗
02 Aceternity UI	Sparkles, Lamp, Background Beams, 3D Card	Глубокие 3D-фоны и неоновые акценты	ui.aceternity.com ↗
03 Skiper UI	Kinetic Carousels, Reveal Stacks	Плавный скролл и адаптивные карточки	skiper-ui.com ↗
04 Magic UI	Border Beam, Bento Grid, Shimmer Button	Визуальный стандарт стартапов (16k+ ★)	magicui.design ↗
05 Animate UI	Spring Physics, Layout Transitions	Субпиксельные микро-интеракции	animate-ui.com ↗
06 UI Layouts	Full Sections, Bento Hero, Pricing Grids	Готовые анимированные экраны под ключ	ui-layouts.com ↗
07 Kokonut UI	100+ тактильных кнопок и инпутов	Микро-компоненты с haptic-откликом	kokonutui.com ↗
✨ React Vibe	Hub Flow, Interactive Stream, Nodes	Интерактивные графы и потоки данных	reactvibe.com ↗

terminal · universal install

npm i framer-motion lucide-react clsx tailwind-merge cva @tabler/icons-react