Let’s create a Tubes Cursor Animation using HTML, CSS, and JavaScript. This interactive visual effect replaces the normal cursor with smooth, glowing 3D tubes that follow your mouse and react to clicks, making the UI feel futuristic and alive.
We’ll use:
- HTML to set up the canvas and text layout.
- CSS to make the page full-screen, center the content, and style the typography.
- JavaScript (Three.js-based module) to render the animated tubes, handle cursor movement, lighting, and dynamic color changes on click.
This project is perfect for exploring creative coding, WebGL-based effects, and interactive visuals that instantly level up your website experience. ✨
HTML :
This HTML sets up a basic webpage for a cursor animation project. It defines the page structure, loads the Montserrat font and an external CSS file for styling, and creates a full-screen canvas where the animated “tubes cursor” effect is drawn using JavaScript. The text content (“Tubes Cursor”) is placed in a hero section above the canvas, and the JavaScript module (script.js) is loaded at the end to handle the animation and interactions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tubes Cursor | @coding.stella</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap'>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="app">
<canvas id="canvas"></canvas>
<div class="hero">
<h1>Tubes</h1>
<h2>Cursor</h2>
</div>
</div>
<script type="module" src="./script.js"></script>
</body>
</html>
CSS :
This CSS makes the page full screen, removes default margins, and uses the Montserrat font. It centers the hero text vertically and horizontally using flexbox, styles the headings with large white text and a glow effect, and prevents text selection. The canvas is fixed to cover the entire screen, staying behind the content to display the animation while everything fits perfectly on any screen size.
body,
html,
#app {
margin: 0;
width: 100%;
height: 100%;
}
body {
touch-action: none;
}
#app {
height: 100%;
font-family: "Montserrat", serif;
}
#app a {
text-decoration: none;
color: #fff;
}
.hero {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}
h1,
h2,
p {
margin: 0;
padding: 0;
color: white;
text-shadow: 0 0 20px rgba(0, 0, 0, 1);
line-height: 100%;
user-select: none;
}
h1 {
font-size: 80px;
font-weight: 700;
text-transform: uppercase;
}
h2 {
font-size: 60px;
font-weight: 500;
text-transform: uppercase;
}
#canvas {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
JavaScript:
This JavaScript imports a ready-made Three.js tubes cursor effect, attaches it to the canvas, and initializes it with custom tube and light colors. When the user clicks anywhere on the page, it generates random colors and updates both the tubes and lighting in real time. The helper function creates valid random hex colors, making the cursor animation change dynamically on each click.
import TubesCursor from "https://cdn.jsdelivr.net/npm/threejs-components@0.0.19/build/cursors/tubes1.min.js"
const app = TubesCursor(document.getElementById('canvas'), {
tubes: {
colors: ["#f967fb", "#53bc28", "#6958d5"],
lights: {
intensity: 200,
colors: ["#83f36e", "#fe8a2e", "#ff008a", "#60aed5"]
}
}
})
document.body.addEventListener('click', () => {
const colors = randomColors(3)
const lightsColors = randomColors(4)
console.log(colors, lightsColors)
app.tubes.setColors(colors)
app.tubes.setLightsColors(lightsColors)
})
function randomColors(count) {
return new Array(count)
.fill(0)
.map(() => "#" + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0'))
}
In conclusion, the Tubes Cursor project shows how a simple combination of HTML, CSS, and JavaScript can create a visually rich and interactive experience. By using a full-screen canvas and a Three.js-based cursor effect, you can turn basic mouse movement into smooth, animated 3D visuals ✨
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
