I’m trying to update the values to the passed to the neonInstance i have tried to change the value using different approaches it does change the value but the neonInstance doesn’t take thew given values as input.
The code works fine but a small dot remains in the middle of the page which is the cursor starting point i don’t want it to be visible when the cursor is not on the page so when i change the value of the shaderPoints parameter to 0 the cursor starting point disappears and when the value is set to 10 the cursor becomes visible(this is when i change the values manually) what i want is that when a person hovers the cursor over the page then the value of the shaderPoints gets set to 10 and as soon as the cursor leaves the page then the value is set to 0 so like only when the person comes on to the page only then it shows the cursor i have tried a few approaches trying to figure out a way to do this but to no success if anyone could guide me on what i am doing wrong and how i can achieve this also if there is any other approach that i can follow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body, html {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
touch-action: none;
}
body {
color: #ffffff;
font-family: 'Montserrat', sans-serif;
text-align: center;
text-shadow: 0 0 5px #ffffff, 0 0 20px #000, 0 0 30px #000;
}
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;
}
a {
margin-top: 10px;
display: inline-block;
text-decoration: none;
color: #fff;
}
canvas {
display: block;
position: fixed;
z-index: -1;
top: 0;
}
</style>
<script type="module">
import { neonCursor } from "https://unpkg.com/[email protected]/build/threejs-toys.module.cdn.min.js";
// Ensure that neonCursor is properly initialized
let neonInstance = neonCursor({
el: document.body, // Target the entire body
shaderPoints: 10, // Initial shaderPoints when cursor is outside
curvePoints: 40,
curveLerp: 0.7,
radius1: 3,
radius2: 19,
velocityTreshold: 1,
sleepRadiusX: 0,
sleepRadiusY: 0,
sleepTimeCoefX: 0.00,
sleepTimeCoefY: 0.00
});
console.log(neonInstance); // Debugging: check if neonInstance is initialized properly
document.body.addEventListener("mouseenter", function() {
console.log("mouseenter triggered");
if (neonInstance) {
var before = neonInstance.shaderPoints;
console.log("Before:", before);
// Update the neonInstance properties
neonInstance.shaderPoints = 10;
neonInstance.curvePoints = 40;
neonInstance.curveLerp = 0.7;
neonInstance.config.radius1 = 3;
neonInstance.config.radius2 = 19;
neonInstance.velocityTreshold = 1;
neonInstance.sleepRadiusX = 0;
neonInstance.sleepRadiusY = 0;
neonInstance.sleepTimeCoefX = 0.00;
neonInstance.sleepTimeCoefY = 0.00;
var after = neonInstance.shaderPoints;
console.log("After:", after);
} else {
console.log("neonInstance is not defined");
}
});
document.body.addEventListener("mouseleave", function() {
console.log("mouseleave triggered");
});
</script>
</head>
<body>
<h1>Your Neon Text</h1>
<a href="#">Your Link</a>
<canvas></canvas>
</body>
</html>
what i want is when the mouse enters the body of the website the cursor becomes visible and when the cursor it out of the webpage it should not be visible