Custom Hover Cursor

<html lang="ru">
  <head>
    <title>Custom Hover Cursor</title>

    <style>
      * {
        cursor: none !important;
      }

      .custom-cursor {
        position: fixed;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: rgba(209, 203, 191, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.07);
        backdrop-filter: blur(10px);
        pointer-events: none !important;
        transform: translate(-50%, -50%);
        transition:
          width 0.3s,
          height 0.3s,
          background-color 0.3s;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        line-height: 22px;
        font-size: 16px;
        opacity: 0;
      }

      .custom-cursor .cursor-text {
        display: none;
      }

      .hover-cursor {
        cursor: none !important; /* Убедитесь, что это указано на основном элементе */
      }

      .cursor-hover {
        cursor: none !important; /* Переопределяет системный курсор даже в увеличенном состоянии */
        width: 96px;
        height: 96px;
        background-color: rgba(209, 203, 191, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.07);
      }
    </style>
  </head>
  <body class="antialiased font-medium">
     <a class="hover-cursor cursor-none" href="#">Link</a>

    <div class="custom-cursor">
      <span class="cursor-text"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="w-16 h-16"
          ><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg
        ></span
      >
    </div>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const cursor = document.querySelector('.custom-cursor') as HTMLElement
        const cursorText = document.querySelector('.cursor-text') as HTMLElement
        const hoverElements = document.querySelectorAll('.hover-cursor')

        if (cursor && cursorText) {
          document.addEventListener('mousemove', (e) => {
            cursor.style.top = `${e.clientY}px`
            cursor.style.left = `${e.clientX}px`
            cursor.style.opacity = '1'
          })

          hoverElements.forEach((element) => {
            element.addEventListener('mouseenter', () => {
              cursor.classList.add('cursor-hover')
              cursorText.style.display = 'block'
              element.classList.add('cursor-enabled')
            })

            element.addEventListener('mouseleave', () => {
              cursor.classList.remove('cursor-hover')
              cursorText.style.display = 'none'
              element.classList.remove('cursor-enabled')
            })
          })
        } else {
          console.error('Cursor element or cursor text element not found!')
        }
      })
    </script>
  </body>
</html>

Версия 2

---
import About from '../components/content/About.astro'
import Articles from '../components/content/Articles.astro'
import Education from '../components/content/Education.astro'
import Projects from '../components/content/Projects.astro'
import Skills from '../components/content/Skills.astro'
import Work from '../components/content/Work.astro'
import Footer from '../components/Footer.astro'
import Header from '../components/Header.astro'
---

<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <link
      rel="icon"
      type="image/svg+xml"
      href="/favicon.svg"
    />
    <meta
      name="viewport"
      content="width=device-width"
    />
    <meta
      name="robots"
      content="noindex, follow"
    />
    <meta
      name="robots"
      content="all"
    />
    <meta
      name="robots"
      content="noarchive"
    />
    <meta
      name="yandex"
      content="noindex"
    />
    <title>CV | Fubon</title>

    <style>
      .custom-cursor {
        position: fixed;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: rgba(209, 203, 191, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.07);
        backdrop-filter: blur(10px);
        pointer-events: none;
        transform: translate(-50%, -50%);
        transition:
          opacity 0.3s ease,
          width 0.3s,
          height 0.3s,
          background-color 0.3s;
        z-index: 1000;
        display: flex; /* Должен быть видим изначально, но с opacity */
        align-items: center;
        justify-content: center;
        color: #fff;
        line-height: 22px;
        font-size: 16px;
        opacity: 0; /* Начальное состояние (скрыто) */
      }

      .hover-cursor {
        cursor: none !important; /* Убираем системный курсор при наведении */
      }

      .cursor-hover {
        opacity: 1; /* Плавно появляется */
        width: 96px;
        height: 96px;
        background-color: rgba(209, 203, 191, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.07);
      }

      .custom-cursor svg {
        width: 12px; /* Исходный маленький размер */
        height: 12px;
        transition: transform 0.3s ease; /* Плавный переход для иконки */
      }

      .cursor-hover svg {
        transform: scale(6); /* Увеличить иконку */
      }
    </style>
  </head>
  <body class="antialiased font-medium">
    <div class="max-w-2xl w-full mx-auto space-y-4 md:space-y-10">
      <Header />

      <div class="px-4 md:px-6 space-y-6 md:space-y-10">
        <About />
        <Projects />
        <Skills />
        <Work />
        <Education />
        <Articles />

        <Footer />
      </div>
    </div>

    <div class="custom-cursor">
      <span class="cursor-text">
        <svg
          class="stroke-1"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round">
          <path d="M7 7h10v10"></path>
          <path d="M7 17 17 7"></path>
        </svg>
      </span>
    </div>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const cursor = document.querySelector('.custom-cursor') as HTMLElement
        const hoverElements = document.querySelectorAll('.hover-cursor')

        if (cursor) {
          document.addEventListener('mousemove', (e) => {
            cursor.style.top = `${e.clientY}px`
            cursor.style.left = `${e.clientX}px`
          })

          hoverElements.forEach((element) => {
            element.addEventListener('mouseenter', () => {
              cursor.classList.add('cursor-hover') // Плавное появление
            })

            element.addEventListener('mouseleave', () => {
              cursor.classList.remove('cursor-hover') // Плавное исчезновение
            })
          })
        } else {
          console.error('Cursor element not found!')
        }
      })
    </script>
  </body>
</html>