ridebus-website/modules/home/header.tsx

import styles from '@/modules/home/home.module.scss';
import useLocale from '@/utils/useLocale';
import { LocalesMap } from '@/utils/useLocale';
import clsx from 'clsx';
import { manrope, caveat } from '@/styles/fonts';
import ThinStarBig from '@/assets/images/thin-star-big.svg';
import ThickRoundStar5 from '@/assets/images/thick-round-star-5.svg';
import thickRoundStar6Url from '@/assets/images/thick-round-star-6.svg?url';
import ridebusFlat from '@/assets/images/cities-backdrop.jpg';
import Image from 'next/image';
import { Gradients } from '@/components/gradients';
import { useEffect, useRef, Fragment } from 'react';
import useScroll from '@/utils/useScroll';
import { TopBar } from '@/components/topBar';
import useFrame from '@/utils/useFrame';
import useMediaQuery from '@/utils/useMediaQuery';

const locales: LocalesMap = {
  ru: {
    slogan_line: (
      <>
        <span>Приложение,</span>
        <span>которое</span>
        <span>поможет</span>
        <div>
          <span>вам</span>
          <div className={styles.thinStarBig}>
            <ThinStarBig />
          </div>
        </div>
        <span>с</span>
        <span className={styles.spendWord}>лёгкостью</span>
        <span>смотреть</span>
        <span>расписание</span>
        <span className={clsx(caveat.className, styles.wiselyWord)}>транспорта</span>
      </>
    ),
  },
  en: {
    slogan_line: (
      <>
        <span>Small</span>
        <span>app</span>
        <span>that</span>
        <span>helps</span>
        <div>
          <span>you</span>
          <div className={styles.thinStarBig}>
            <ThinStarBig />
          </div>
        </div>
        <span className={styles.spendWord}>conveniently</span>
        <span>view</span>
        <span className={clsx(caveat.className, styles.wiselyWord)}>
          public
        </span>
        <span className={clsx(caveat.className, styles.wiselyWord)}>
          transport
        </span>
        <span className={clsx(caveat.className, styles.wiselyWord)}>
          schedules
        </span>
      </>
    ),
  },
};

export default function Header() {
  const t = useLocale(locales);
  const sloganLineRef = useRef<HTMLSpanElement>(null);
  const transitionToBackgoundRef = useRef<HTMLDivElement>(null);
  const thickRoundStar6MaskRef = useRef<HTMLDivElement>(null);
  const thickRoundStar6ImageRef = useRef<HTMLImageElement>(null);
  const thickRoundStar5 = useRef<HTMLDivElement>(null);
  const breakpoint600 = false;//useMediaQuery('(max-width: 600px)');

  useScroll((scrollY, deltaTime, time) => {
    const childs: HTMLSpanElement[] = [
      ...Array.from(sloganLineRef.current?.children || []),
    ] as HTMLSpanElement[];

    childs.forEach((child, index) => {
      const rawOffset = Math.min(-scrollY * 2 + index * 50, 0);
      const offset = Math.max(-Math.pow(rawOffset / 50, 2), -500);
      const rotateDirection = index % 2 === 0 ? 1 : -1;

      child.style.transform = `translate3D(0px, ${offset}px, 0px) rotate(${(offset / 10) * rotateDirection}deg)`;
    });

    if (transitionToBackgoundRef.current && scrollY + 300 < window.innerHeight) {
      transitionToBackgoundRef.current.style.height = `${scrollY + 300}px`;
    }

    if (thickRoundStar6MaskRef.current && scrollY - 300 < window.innerHeight) {
      thickRoundStar6MaskRef.current.style.transform = `translate3D(0px, ${scrollY / 6}px, 0px) rotate(${scrollY / 8 + (time * 0.01) % 360}deg)`;
    }

    if (thickRoundStar6ImageRef.current && scrollY - 300 < window.innerHeight) {
      thickRoundStar6ImageRef.current.style.transform = `rotate(${-scrollY / 8 - (time * 0.01) % 360}deg) translate3d(0,0,0)`;
    }

    if (thickRoundStar5.current && scrollY - 300 < window.innerHeight) {
      thickRoundStar5.current.style.transform = `translate3D(-50%, -50%,0) rotate(${-scrollY / 6 - 10}deg)`;
    }
  }, { accelerator: 0.06 });

  return (
    <Fragment>
      <header className={styles.header}>
        <TopBar />
        <div
          className={styles.thickRoundStar6}
          ref={thickRoundStar6MaskRef}
          style={{ maskImage: `url(${thickRoundStar6Url.src})` }}
        >
          <Image
            ref={thickRoundStar6ImageRef}
            height={400}
            width={400}
            placeholder="blur"
            alt=""
            src={ridebusFlat}
          />
        </div>
        <h1 className={clsx(styles.slogan, manrope.className)}>
          <span ref={sloganLineRef} className={styles.line1}>
            {t('slogan_line')}
          </span>
        </h1>
        <div className={styles.gradientContainer}>
          <div
            ref={transitionToBackgoundRef}
            className={styles.transitionToBackgound}
          />
          {!breakpoint600 && <Gradients />}
        </div>
      </header>
      <div className={styles.thickRoundStar5}>
        <div ref={thickRoundStar5}>
          <ThickRoundStar5 />
        </div>
      </div>
    </Fragment>
  );
}