Neon Cursor

Neon Cursor is an interactive web feature that utilizes HTML, CSS, and JavaScript to create a captivating and vibrant neon effect for the cursor on a webpage. By replacing the default cursor with a glowing neon pointer, the webpage becomes visually appealing and engaging.

The structure of the webpage is defined using HTML, while CSS is responsible for determining the layout, size, and positioning of elements. To achieve the neon effect, CSS properties such as background-color, box-shadow, and animation are employed. These properties work together to generate a luminous and glowing appearance for the cursor.

JavaScript plays a crucial role in controlling the behavior of the neon cursor. By utilizing event listeners, the position of the mouse is tracked, enabling real-time updates to the cursor’s appearance. The color and intensity of the neon effect can be adjusted dynamically based on the cursor’s coordinates or other user-defined parameters. This interactivity adds a dynamic and engaging element to the browsing experience.

The Neon Cursor feature enhances the visual aesthetics of a webpage, capturing the attention of users and elevating their overall browsing experience.

Demo

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

HTML – Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title> Neon Cursor- Anoncodes </title>
</head>

<body>
    <!-- Further code here -->

     <script src="script.js"></script>
</body>

</html>

Paste the below code in your `<body>` tag.

<div id="app">
  <div id="hero">
  
  </div>
</div>

CSS Code

Create a file style.css and paste the code below.

body, html, #app {
  margin: 0;
  width: 100%;
  height: 100%;
}

#app {
  overflow: hidden;
  touch-action: pan-up;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  text-shadow: 0 0 5px #ffffff, 0 0 20px #000, 0 0 30px #000;
}

#app h1 {
  --fontSize: 60px;
  --lineHeight: 80px;
  width: auto;
  height: calc(2 * var(--lineHeight));
  line-height: var(--lineHeight);
  margin: calc(50vh - var(--lineHeight)) auto 0;
  font-size: var(--fontSize);
  text-transform: uppercase;
}

#app a {
  margin-top: 10px;
  display: inline-block;
  text-decoration: none;
  color: #fff;
}

#app canvas {
  display: block;
  position: fixed;
  z-index: -1;
  top: 0;
}

Javascript Code

Create a file index.js and paste the code below.

import { neonCursor } from 'https://unpkg.com/threejs-toys@0.0.8/build/threejs-toys.module.cdn.min.js'

neonCursor({
  el: document.getElementById('app'),
  shaderPoints: 16,
  curvePoints: 80,
  curveLerp: 0.5,
  radius1: 5,
  radius2: 30,
  velocityTreshold: 10,
  sleepRadiusX: 100,
  sleepRadiusY: 100,
  sleepTimeCoefX: 0.0025,
  sleepTimeCoefY: 0.0025
})

Written By : @anoncodes

Code Credit : @soju22