How to make Neon Cursor Using Html and css
Introduction
This project implements a visually engaging web application that features an interactive neon cursor effect using Three.js. The application creates a captivating experience for users by utilizing an animated background and an immersive cursor effect. The design emphasizes aesthetics and user interaction, providing a modern and engaging user experience.
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="app"></div>
</body>
<script type="module">
import {neonCursor} from "https://unpkg.com/threejs-toys@0.0.8/build/threejs-toys.module.cdn.min.js";
window.addEventListener('DOMContentLoaded', () => {
neonCursor({
el: document.getElementById('app'),
shaderPoints: 50,
curvePoints: 15,
curveLerp:0.5,
radius1:1,
radius1:5,
velocityTreshold:10,
sleepRadiusX:100,
sleepRadiusY:100,
sleepTimeCoefx:0.0025,
sleepTimeCoefY:0.0025
});
});
</script>
</html>
CSS
body,html,#app{
margin: 0;
width: 100%;
height:100%;
}
#app{
overflow: hidden;
touch-action: pan-up;
color: #ffffff;
text-align: center;
text-shadow: 0 0 5px #ffffff,0 0 20px #000,0 0 30px #000;
}
#app canvas{
display: block;
position: fixed;
z-index: -1;
top: 0;
}
JS :
import {neonCursor} from "https://unpkg.com/threejs-toys@0.0.8/build/threejs-toys.module.cdn.min.js";
window.addEventListener('DOMContentLoaded', () => {
neonCursor({
el: document.getElementById('app'),
shaderPoints: 10,
curvePoints: 15,
curveLerp:0.5,
radius1:1,
radius1:5,
velocityTreshold:10,
sleepRadiusX:100,
sleepRadiusY:100,
sleepTimeCoefx:0.0025,
sleepTimeCoefY:0.0025
});
});
Conclusion
This project effectively combines modern web technologies to create a visually stunning and interactive user experience. The use of Three.js for the neon cursor, combined with a thoughtful card structure and engaging animations, results in a captivating design. The focus on clean text styling and a contrasting color scheme ensures that the content remains accessible and visually appealing. Overall, the design stands out, providing users with an immersive and enjoyable interaction.
