This effect has been made with ThreeJS and can run with WebGPU or WebGL.
Created
December 6, 2025 21:37
-
-
Save JT5D/743963ca0567c8f0895039052f70e640 to your computer and use it in GitHub Desktop.
Tubes Cursor (WebGL, WebGPU)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import TubesCursor from "https://cdn.jsdelivr.net/npm/[email protected]/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')) | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment