В прошлой статье я шаг за шагом собирал 3D-таймлайн-слайдер с перспективной сеткой, плавной прокруткой и переключением категорий на чистом TypeScript и CSS.

Эта заметка — небольшое дополнение к тому решению, уже под React.

Что изменилось

🔗 Демо: http://142.111.244.241:3000/timeline3d/final
💻 Код: https://gitlab.com/alex_kali/education/-/tree/main/src/modules/timeline3d/final

Я взял исходный компонент из прошлой статьи и:

допилил сам слайдер, подчистил конфиг и структуру;
обернул всё в React-компонент;
добавил форму для настройки параметров в реальном времени — можно менять конфиг и сразу смотреть, как слайдер реагирует.

В итоге в React-проекте это используется примерно так:

<Timeline3DWrapper
  data={data}
  Card={DemoCard}
  config={config}
/>

data — ваши события/таймлайн,
Card — React-компонент карточки,
config — настройки слайдера (которые можно крутить через форму).

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

Почему это не библиотека

Изначальный план был классический:
«Есть прикольный слайдер → оформить его как библиотеку → выложить в npm».

Но когда начинаешь примерять компонент к реальным проектам, всплывают нюансы:

дизайн почти всегда свой, и слайдер приходится жёстко подгонять под конкретный UI;
логика анимаций, переходов и формат данных тоже часто отличаются;
универсальный API для всех кейсов превращает компонент в тяжёлого монстра с кучей опций, из которых вы всё равно используете 10–20%.

В итоге в живом проекте почти всегда проще:

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

Плюс остаётся вопрос поддержки. Такой компонент — не «маленький хелпер», который можно забыть после релиза. Его нужно:

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

У меня просто нет ресурса регулярно заниматься поддержкой настолько сложного компонента как отдельной библиотеки — и честнее сразу это сказать.

Что я предлагаю вместо библиотеки

Вместо npm-пакета — рабочий пример и исходники, которые удобно форкать:

есть базовая логика 3D-таймлайна;
есть React-обёртка;
есть форма для настройки конфига в реальном времени.

Дальше вы:

Забираете код:
https://gitlab.com/alex_kali/education/-/tree/main/src/modules/timeline3d/final
Встраиваете Timeline3DWrapper в свой проект.
Подрезаете/переписываете всё, что не подходит под ваш дизайн и задачи.

Компонент изначально задумывался как пример сложной UI-механики, а не магическая коробка «под любые случаи жизни».

Если вы ещё не читали первую часть — лучше начать с неё, там разбирается основная логика и базовая реализация на TypeScript и CSS.

3D-таймлайн-слайдер под React