How to add a radial gradient around the mouse cursor on the background of a page in Vue.js

In order to spice up a website, I decide to implement a radial gradient that shines around the cursor, on every mouse movement along the screen view. The following implementation is adapted to a Vue.js project built with TypeScript.

In order to achieve this result, I also want to use, for simplicity, a library for device detection, and my choice goes to ua-parser-js, precisely the version 2.0.0.

The second and coral step is the creation of a gradient component, that must be the main container of all the view, since it will be the area where the gradient will be shining.

// src/components/Gradient.vue

<script lang="ts">
import { computed, ref, onMounted, onUnmounted } from 'vue'
import { isMobile } from '../utils/device'

export default {
  name: 'GradientView',
  setup() {
    const getViewCentrePosition = () => ({
      x: window.innerWidth / 2,
      y: window.innerHeight / 2
    })

    const cursorPositionRef = ref(getViewCentrePosition())

    const updateCursorPosition = (event: MouseEvent) => {
      if (!isMobile()) {
        cursorPositionRef.value = {
          x: event.clientX,
          y: event.clientY
        }
      }
    }

    onMounted(() => {
      if (!isMobile()) {
        window.addEventListener('mousemove', updateCursorPosition)
      }
    })

    onUnmounted(() => {
      if (!isMobile()) {
        window.removeEventListener('mousemove', updateCursorPosition)
      }
    })

    const gradientPosition = computed(() => {
      return `${cursorPositionRef.value.x}px ${cursorPositionRef.value.y}px`
    })

    return {
      gradientPosition
    }
  },
  data() {
    return {
      isMobileClass: isMobile()
    }
  }
}
</script>

<template>
  <div
    :class="{ 'gradient--desktop': !isMobileClass, gradient: true }"
    :style="{ '--gradient-position': gradientPosition }"
  >
    <slot />
  </div>
</template>

<style scoped lang="scss">
div {
  .gradient.gradient--desktop {
    background-image: radial-gradient(
      circle at var(--gradient-position, 50% 50%),
      var(--tertiary-color),
      var(--secondary-color) 20%
    );
    width: 100vw;
    height: 100vh;
    overflow: scroll;

    @media (prefers-color-scheme: dark) {
      background-image: radial-gradient(
        circle at var(--gradient-position, 50% 50%),
        var(--tertiary-color),
        var(--primary-color) 20%
      );
    }
  }
}
</style>

Let's understand the code. In the script section I have a function that simply returns the initial position, the centre of the screen view. It could be handled differently, for example hidden, or on the top left position that can appear with an animation after the first mouse trigger. It is an implementation choice. For simplicity I add it at the centre of the view.

const getViewCentrePosition = () => ({
  x: window.innerWidth / 2,
  y: window.innerHeight / 2
})

Then I create a reactive reference to the object that will be in use to track cursor mouse movements, occurring through the mouse events.

const cursorPositionRef = ref(getViewCentrePosition())

Then I implement the function that is in charge of updating the reactive reference object, after every cursor mouse movement.

const updateCursorPosition = (event: MouseEvent) => {
  if (!isMobile()) {
    cursorPositionRef.value = {
      x: event.clientX,
      y: event.clientY
    }
  }
}

This function needs to be associated to the mouse events.

onMounted(() => {
  if (!isMobile()) {
    window.addEventListener('mousemove', updateCursorPosition)
  }
})

onUnmounted(() => {
  if (!isMobile()) {
    window.removeEventListener('mousemove', updateCursorPosition)
  }
})

And finally I compute the reactive value of the gradient position, that will be provided to the css of the element itself.

const gradientPosition = computed(() => {
  return `${cursorPositionRef.value.x}px ${cursorPositionRef.value.y}px`
})

Note that in most of the parts above described, I do make a check if the detected device is on mobile or not, to avoid useless computations where unnecessary.

Afterwards in the template I create the html of the gradient, that behaves as a full page wrapper for the content, and I also apply the relative css, only if needed.

<template>
  <div
    :class="{ 'gradient--desktop': !isMobileClass, gradient: true }"
    :style="{ '--gradient-position': gradientPosition }"
  >
    <slot />
  </div>
</template>

And this is the css. I offer here a solution for a website that implements light and dark theme, and I make use of two colors for the transition, on the external part I use --primary-color and --secondary-color colors, while the internal part is setup for both themes as --tertiary-color. But, choice and tuning, is yours.

<style scoped lang="scss">
.gradient.gradient--desktop {
  background-image: radial-gradient(
    circle at var(--gradient-position, 50% 50%),
    var(--tertiary-color),
    var(--secondary-color) 20%
  );
  width: 100vw;
  height: 100vh;
  overflow: scroll;

  @media (prefers-color-scheme: dark) {
    background-image: radial-gradient(
      circle at var(--gradient-position, 50% 50%),
      var(--tertiary-color),
      var(--primary-color) 20%
    );
  }
}
</style>

At last, this is the only utility in use, as previously mentioned, to detect the device.

// src/utils/device.ts

import { UAParser } from 'ua-parser-js'

export const isMobile = (): boolean => {
  const uap = new UAParser()
  return uap.getDevice().type === 'mobile'
}

Better ideas? Curious to hear them.

The above is the detailed content of How to add a radial gradient around the mouse cursor on the background of a page in Vue.js. For more information, please follow other related articles on the PHP Chinese website!