React Bits: анимированные компоненты для сайтов — 6 примеров

Анимация помогает показать изменение состояния, выделить важную цифру или сделать карточку проекта выразительнее. Но для каждого такого эффекта не обязательно писать всю механику с нуля. React Bits — коллекция компонентов, исходники которых можно добавить в React-проект и настроить под свой сайт.

В этой статье — шесть бесплатных интерактивных примеров: появление текста, световой блик, счетчик, подсветка карточки, наклон изображения и анимированная рамка. Измените параметры, сравните результат на светлом и темном фоне и посмотрите код. Регистрация для демонстрации не нужна.

Демонстрация использует настоящие компоненты React Bits. Переключение примеров, поля настройки, повторный запуск и спокойный режим добавлены нашей оболочкой. В архиве доступны исходники демонстрации; сами компоненты устанавливаются из официального React Bits. Короткие JSX-фрагменты ниже показывают отдельные приемы подключения.

Что такое React Bits и где его использовать

В репозитории DavidHDev/react-bits собраны эффекты для текста, фонов, карточек и других элементов. У компонентов есть варианты на JavaScript и TypeScript, с обычным CSS или Tailwind. Выбирайте вариант, соответствующий вашему проекту: ради одной карточки не обязательно менять весь способ оформления сайта.

React Bits удобен как набор конкретных визуальных приемов. Для страницы услуг можно взять один эффект заголовка и одну карточку, а меню, форму и основную навигацию оставить привычными. Наш практический совет: сначала определите, чему анимация помогает, и только затем выбирайте компонент. Посетителю важнее прочитать предложение и выполнить действие, чем увидеть как можно больше эффектов.

Проект распространяется на условиях MIT + Commons Clause, а не обычной MIT. Актуальный текст разрешает использование в личных и коммерческих сайтах при соблюдении условий, но запрещает продажу, сублицензирование и перераспространение самих компонентов отдельно, набором или в виде переноса на другую платформу. Сохраняйте предусмотренные уведомления. Условия приведены в официальной лицензии. Бесплатность нашей демонстрации не означает, что все продукты и шаблоны автора бесплатны.

Установка: добавляем только нужные компоненты

Примеры рассчитаны на существующий React-проект со сборкой JSX. Возьмем варианты JS-CSS: JavaScript и обычные стили. Официальный реестр поддерживает установку через shadcn. Если этот инструмент еще не настроен, сначала выполните подготовку проекта по инструкции React Bits. Затем можно добавить выбранный компонент или все шесть:

npx shadcn@latest add @react-bits/BlurText-JS-CSS
npx shadcn@latest add @react-bits/ShinyText-JS-CSS
npx shadcn@latest add @react-bits/CountUp-JS-CSS
npx shadcn@latest add @react-bits/SpotlightCard-JS-CSS
npx shadcn@latest add @react-bits/TiltedCard-JS-CSS
npx shadcn@latest add @react-bits/StarBorder-JS-CSS

Названия вариантов соответствуют конфигурации официального реестра. Каталог, куда CLI положит файлы, зависит от настройки проекта. В JSX ниже для определенности считаем, что компоненты находятся в src/components, а примеры — в src/Examples.jsx. Исправьте пути импорта под свою структуру.

import { useEffect, useState } from 'react';
import BlurText from './components/BlurText';
import ShinyText from './components/ShinyText';
import CountUp from './components/CountUp';
import SpotlightCard from './components/SpotlightCard';
import TiltedCard from './components/TiltedCard';
import StarBorder from './components/StarBorder';

BlurText, CountUp и TiltedCard в выбранных версиях используют пакет motion с импортами из motion/react. У остальных трех примеров нет этой зависимости. При ручной установке понадобится npm install motion; при использовании CLI проверяйте добавленные зависимости. Не нужно устанавливать весь набор пакетов, с которым собран сайт документации React Bits. Обычный CSS каждого компонента также должен попасть в сборку.

Пример 1. BlurText: появление текста по словам

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

function WelcomeText() {
  return (
    <BlurText
      text="Практичные решения для вашего сайта"
      delay={80}
      animateBy="words"
      direction="top"
      stepDuration={0.3}
      className="welcome-text"
    />
  );
}

delay задает интервал между сегментами в миллисекундах, stepDuration — длительность шага в секундах. animateBy="letters" разбивает строку по символам; для длинного русского заголовка вариант по словам обычно спокойнее. В исходной реализации запуск происходит при появлении элемента в области просмотра. Кнопка повторения в нашей площадке пересоздает пример — это возможность оболочки, а не свойство replay компонента. Смотрите BlurText в документации и проверенную реализацию.

Пример 2. ShinyText: световой блик на надписи

Блик можно использовать для короткой надписи, названия продукта или выделенного статуса. Начните с умеренных цветов и достаточно длинного цикла. Если текст трудно прочитать в неподвижном состоянии, анимация этого не исправит: сначала обеспечьте контраст с фоном.

function HighlightText() {
  return (
    <ShinyText
      text="Сделано с вниманием к деталям"
      color="#155e63"
      shineColor="#f1c47b"
      speed={3}
      delay={1.2}
      disabled={false}
      className="highlight-text"
    />
  );
}

В проверенной версии speed выражен в секундах: большее значение делает проход медленнее. delay задает паузу между циклами, disabled отключает эффект. Компонент получил дополнительные настройки, поэтому старые примеры из сторонних подборок могут отличаться. Отталкивайтесь от официальной страницы ShinyText и исходника выбранной версии.

Пример 3. CountUp: выразительная цифра

Счетчик подходит для количества проектов, объема выполненных работ или достигнутого результата. У цифры должна быть понятная подпись. Числа для страницы берите из своих данных: эффект оформления не является источником статистики.

function ProjectsStat() {
  return (
    <p>
      <span aria-hidden="true">
        <CountUp from={0} to={1280} duration={2} separator=" " />
      </span>
      <span className="visually-hidden">1 280</span> проектов
    </p>
  );
}

Пробел в separator разделяет тысячи. Мы скрыли изменяющееся число от вспомогательных технологий и добавили устойчивый итоговый текст, чтобы не озвучивать каждый кадр. visually-hidden — стандартный служебный класс Bootstrap; в проекте без Bootstrap потребуется его собственный эквивалент. Внутри CountUp применяется пружинная анимация, поэтому duration не стоит использовать как точный таймер бизнес-процесса. Подробнее: CountUp и его исходник.

Пример 4. SpotlightCard: подсветка карточки

Световое пятно следует за указателем и помогает выделить карточку услуги или проекта. Содержимое остается обычным HTML: заголовок, описание и ссылка. Для действий используйте настоящую ссылку или кнопку внутри карточки; свечение само по себе не делает весь блок интерактивным.

function ServiceCard() {
  return (
    <SpotlightCard
      theme="light"
      spotlightColor="#168c8e"
      intensity={0.8}
      ambient={false}
      flare={false}
      style={{ padding: 24 }}
    >
      <h3>Разработка сайта</h3>
      <p>От идеи и структуры до работающей страницы.</p>
      <a href="/services/website/">Подробнее об услуге</a>
    </SpotlightCard>
  );
}

Сочетание theme, spotlightColor и intensity позволяет подобрать подсветку под фон. На телефоне основное содержимое и ссылка должны быть доступны без движения курсора. Мы рекомендуем воспринимать свет как украшение, а выбранное состояние обозначать дополнительно текстом или обычной рамкой. Свойства этой реализации: SpotlightCard, исходник компонента.

Пример 5. TiltedCard: карточка изображения с наклоном

Небольшой наклон добавляет глубины обложке проекта или карточке портфолио. Подготовьте изображение своего проекта по адресу /images/project-cover.jpg. Важную подпись выведем отдельным абзацем: она останется видимой и на сенсорном экране.

function ProjectPreview() {
  return (
    <div style={{ width: '100%', maxWidth: 320 }}>
      <TiltedCard
        imageSrc="/images/project-cover.jpg"
        altText="Первый экран сайта мастерской"
        containerWidth="100%"
        containerHeight="240px"
        imageWidth="100%"
        imageHeight="240px"
        rotateAmplitude={8}
        scaleOnHover={1.03}
        showMobileWarning={false}
        showTooltip={false}
      />
      <p>Сайт мастерской: каталог и запись на услугу</p>
    </div>
  );
}

rotateAmplitude ограничивает угол, scaleOnHover — увеличение при наведении. Отключение showMobileWarning только убирает встроенную надпись; оно не превращает управление мышью в мобильное. В нашей демонстрации для сенсорного устройства предусмотрена статичная карточка. Для собственного проекта сделайте такую же замену или оставьте изображение без наклона. Особенности видны на странице TiltedCard и в обработчиках исходного компонента.

Пример 6. StarBorder: акцентная рамка кнопки

Анимированная рамка подходит для одного важного действия: например, открытия подборки или перехода к форме. Сохраните обычный текст кнопки и заметный контур клавиатурного фокуса. Рамка украшает действие, а не заменяет его.

function ExamplesLink() {
  return (
    <StarBorder
      as="a"
      href="#blur-text"
      theme="light"
      color="#168c8e"
      duration={4}
      hover="none"
      sparkle={false}
      clickPulse={false}
      className="examples-link"
    >
      Посмотреть примеры
    </StarBorder>
  );
}

as="a" создает ссылку; для действия в приложении используйте as="button", type="button" и свой onClick. В проверенном исходнике скорость цикла задается числовым свойством duration, а не строкой speed="4s" из старых примеров. Сверяйтесь с StarBorder и выбранной реализацией.

.examples-link:focus-visible {
  outline: 3px solid #155e63;
  outline-offset: 5px;
}
.welcome-text, .highlight-text {
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  line-height: 1.2;
}

Спокойный режим, доступность и мобильный экран

У разных компонентов разные возможности. Нельзя считать всю коллекцию автоматически доступной или одинаково легкой. Проверяйте клавиатуру, контраст, подписи изображений и поведение на телефоне. Важный текст должен оставаться читаемым, даже если декоративный эффект выключен.

Настройку prefers-reduced-motion можно учитывать своей оберткой. Ниже — наш небольшой пример: при предпочтении уменьшенного движения показываем обычный заголовок, иначе запускаем BlurText. Настоящий h2 сохраняется для вспомогательных технологий. Этот код не является встроенным API React Bits.

function usePrefersReducedMotion() {
  const [reduce, setReduce] = useState(true);
  useEffect(() => {
    const query = window.matchMedia('(prefers-reduced-motion: reduce)');
    const update = () => setReduce(query.matches);
    update();
    query.addEventListener('change', update);
    return () => query.removeEventListener('change', update);
  }, []);
  return reduce;
}

function AccessibleTitle() {
  const reduce = usePrefersReducedMotion();
  const title = 'Решения, которыми удобно пользоваться';
  if (reduce) return <h2>{title}</h2>;
  return (
    <div>
      <h2 className="visually-hidden">{title}</h2>
      <div aria-hidden="true">
        <BlurText text={title} delay={80} animateBy="words" />
      </div>
    </div>
  );
}

На сенсорном устройстве не прячьте описание в подсказке при наведении. В анимации счетчика озвучивайте итог, а не промежуточные числа. Дайте пользователю возможность отключить длительные декоративные эффекты. В нашей площадке спокойный режим отключает движение целиком; в оригинальных компонентах поведение может отличаться.

Как перенести пример в свой проект

1. Выберите одну задачу. Например, подчеркнуть главный заголовок или оживить карточку портфолио.
2. Установите нужный компонент. Проверьте JSX, соседний CSS и зависимости; настройте свои пути импорта.
3. Добавьте реальные данные. Подмените пример текста, картинку, число и адрес ссылки.
4. Проверьте обычное состояние. Выключите движение, откройте страницу на телефоне и пройдите элементы клавишей Tab.
5. Оцените всю страницу. Несколько непрерывных эффектов одновременно могут отвлекать и расходовать ресурсы; проверьте устройство, на котором будут работать посетители.

Наша демонстрация проверена по исходникам React Bits на зафиксированном состоянии репозитория. Команды с @latest могут со временем устанавливать измененные версии, поэтому после обновления снова сравните свойства и результат. Начинать удобно с простой текстовой анимации, а затем добавлять эффекты по необходимости.

Для оформления страницы пригодятся и другие наши инструменты: генератор CSS-градиентов, скругления и тени и конструктор страниц Bootstrap 5. Они помогают подготовить фон и геометрию, а React Bits — добавить выбранную интеракцию в React-проект.