From 38785cce94abf87ed58b832fa25adeb17b0b0edc Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 23 Nov 2025 13:14:20 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D1=8B=20=D0=BD=D0=B0=D0=B7=D0=B2=D0=B0=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=8F=20=D0=BF=D0=B5=D1=80=D0=B8=D0=BE=D0=B4=D0=BE=D0=B2=20?=
 =?UTF-8?q?=D1=81=20=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8=D0=B5=D0=B9?=
 =?UTF-8?q?=20=D0=BF=D0=BE=D1=8F=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CircleTimeline/CircleTimeline.module.scss | 23 +++++++++--
 .../ui/CircleTimeline/CircleTimeline.tsx      | 39 +++++++++++++++++--
 2 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/src/widgets/TimeFrameSlider/ui/CircleTimeline/CircleTimeline.module.scss b/src/widgets/TimeFrameSlider/ui/CircleTimeline/CircleTimeline.module.scss
index c44ddf0..0e1f208 100644
--- a/src/widgets/TimeFrameSlider/ui/CircleTimeline/CircleTimeline.module.scss
+++ b/src/widgets/TimeFrameSlider/ui/CircleTimeline/CircleTimeline.module.scss
@@ -20,7 +20,7 @@
     margin-top: -28px;
     margin-left: -28px;
 
-    border: 25px solid transparent; 
+    border: 25px solid transparent;
     border-radius: 50%;
 
     background: var(--color-text);
@@ -46,15 +46,30 @@
         background-clip: padding-box;
     }
 
-    &:hover .label,
-    &.active .label {
+    &:hover .number,
+    &.active .number {
         display: block;
     }
 
-    .label {
+    .number {
         display: none;
 
         color: var(--color-text);
         font-size: 20px;
     }
+
+    .title {
+        position: absolute;
+        left: 100%;
+
+        margin-left: 20px;
+
+        color: var(--color-text);
+        font-weight: 700;
+        font-size: 20px;
+        white-space: nowrap;
+
+        opacity: 0;
+        visibility: hidden;
+    }
 }
\ No newline at end of file
diff --git a/src/widgets/TimeFrameSlider/ui/CircleTimeline/CircleTimeline.tsx b/src/widgets/TimeFrameSlider/ui/CircleTimeline/CircleTimeline.tsx
index e72302c..35ab81b 100644
--- a/src/widgets/TimeFrameSlider/ui/CircleTimeline/CircleTimeline.tsx
+++ b/src/widgets/TimeFrameSlider/ui/CircleTimeline/CircleTimeline.tsx
@@ -67,6 +67,9 @@ export const CircleTimeline = memo(function CircleTimeline({
   // Реф для массива точек периодов
   const pointsRef = useRef<(HTMLDivElement | null)[]>([])
 
+  // Реф для заголовков периодов
+  const titlesRef = useRef<(HTMLSpanElement | null)[]>([])
+
   /**
    * Эффект для анимации поворота круга и контр-поворота точек
    * Запускается при изменении rotation
@@ -82,16 +85,38 @@ export const CircleTimeline = memo(function CircleTimeline({
     }
 
     // Контр-поворот точек, чтобы текст оставался читаемым
-    pointsRef.current.forEach((point) => {
+    pointsRef.current.forEach((point, index) => {
       if (point) {
         gsap.to(point, {
           rotation: -rotation,
           duration: 0,
           ease: ANIMATION_EASE,
         })
+
+        // Анимация заголовка
+        const title = titlesRef.current[index]
+        if (title) {
+          // Сбрасываем предыдущие анимации для этого элемента
+          gsap.killTweensOf(title)
+
+          if (index === activeIndex) {
+            gsap.to(title, {
+              opacity: 1,
+              visibility: 'visible',
+              duration: 0.5,
+              delay: ANIMATION_DURATION, // Ждем окончания вращения
+            })
+          } else {
+            gsap.to(title, {
+              opacity: 0,
+              visibility: 'hidden',
+              duration: 0.2,
+            })
+          }
+        }
       }
     })
-  }, [rotation])
+  }, [rotation, activeIndex])
 
   /**
    * Мемоизированный расчет позиций точек на круге
@@ -138,7 +163,15 @@ export const CircleTimeline = memo(function CircleTimeline({
             aria-label={`Period ${index + 1}: ${period.label}`}
             aria-current={index === activeIndex ? 'true' : 'false'}
           >
-            <span className={styles.label}>{index + 1}</span>
+            <span className={styles.number}>{index + 1}</span>
+            <span
+              className={styles.title}
+              ref={(el) => {
+                titlesRef.current[index] = el
+              }}
+            >
+              {period.label}
+            </span>
           </div>
         )
       })}