DEV Community

Alessandro Rabitti
Alessandro Rabitti

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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
})
Enter fullscreen mode Exit fullscreen mode

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())
Enter fullscreen mode Exit fullscreen mode

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
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

This function needs to be associated to the mouse events.

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

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

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`
})
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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'
}
Enter fullscreen mode Exit fullscreen mode

Better ideas? Curious to hear them.

πŸ‘‹ While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay