:root {
  color-scheme: light dark;
  --bg: light-dark(white, black);
  --fg: light-dark(black, white);
  --padding: min(2svi, 1rem);
  font-size: 16px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: normal;
  user-select: none;
}

body {
  margin: 0;
  width: 100svi;
  height: 100svb;
  overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  cursor: none;
  background: var(--bg);
}

#highlighter {
  display: none;
}

main {
  font-size: 4rem;
  width: 150svi;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;

  p {
    text-transform: uppercase;
    white-space: nowrap;
    animation: slide-left 100s ease-in-out infinite both alternate-reverse;
    translate: var(--start) 0;

    &:nth-child(odd) {
      animation-direction: alternate;
    }
  }
}

.mouse-cursor-overlay {
  --mask-circle-size: 15vw;
  --dot-size: 1px;
  --dot-spacing: 3px;
  width: 200vw;
  height: 200vh;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  position: fixed;
  backdrop-filter: blur(8px);
  transition: translate 600ms cubic-bezier(0.075, 0.82, 0.165, 1);
  background-image: radial-gradient(transparent, var(--bg) var(--dot-size));
  background-size: var(--dot-spacing) var(--dot-spacing);
  mask-image: radial-gradient(
    circle,
    transparent var(--mask-circle-size),
    black var(--mask-circle-size)
  );
  mask-size: 100% 100%;
  mask-position: calc(var(--x) - 50vw) calc(var(--y) - 50vh);
  transition: all 600ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

@keyframes slide-left {
  from {
    translate: var(--start) 0;
  }
  to {
    translate: calc(var(--start) - 100%) 0;
  }
}
Background Blur Mask Cursor
