Tubes Cursor (WebGL, WebGPU)

index.html

<div id="app">
  <canvas id="canvas"></canvas>
  <div class="hero">
    <h1>Tubes</h1>
    <h2>Cursor</h2>
    <a target="_blank" href="https://www.framer.com/@kevin-levron/">Framer Component</a>
  </div>
</div>

script.js

// Licence CC BY-NC-SA 4.0
// Attribution — You must give appropriate credit.
// Non Commercial — You may not use the material for commercial purposes.

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'))
}

style.css

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;
}

styles

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&amp;display=swap" rel="stylesheet" />

tubes-cursor-webgl-webgpu.markdown

Tubes Cursor (WebGL, WebGPU)

This effect has been made with ThreeJS and can run with WebGPU or WebGL.

A Pen by Kevin Levron on CodePen.

License.