25.11.2025 08:50
alex_kali 0 186 Источник

В прошлой статье я шаг за шагом собирал 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%.

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

  1. форкнуть код,

  2. выбросить всё лишнее,

  3. настроить разметку, стили и анимации под задачу,

  4. не ждать, пока автор библиотеки смержит ваши хотелки.

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

  • адаптировать под новые версии зависимостей,

  • учитывать чужие edge-кейсы,

  • следить за обратной совместимостью.

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

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

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

  • есть базовая логика 3D-таймлайна;

  • есть React-обёртка;

  • есть форма для настройки конфига в реальном времени.

Дальше вы:

  1. Забираете код:
    https://gitlab.com/alex_kali/education/-/tree/main/src/modules/timeline3d/final

  2. Встраиваете Timeline3DWrapper в свой проект.

  3. Подрезаете/переписываете всё, что не подходит под ваш дизайн и задачи.

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

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

Комментарии (0)