Skip to content

Instantly share code, notes, and snippets.

@JT5D

JT5D/index.html

Created December 6, 2025 21:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JT5D/743963ca0567c8f0895039052f70e640 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JT5D/743963ca0567c8f0895039052f70e640 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. JT5D created this gist Dec 6, 2025.
    8 changes: 8 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    <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>
    25 changes: 25 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    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'))
    }
    59 changes: 59 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    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;
    }
    1 change: 1 addition & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&amp;display=swap" rel="stylesheet" />
    7 changes: 7 additions & 0 deletions tubes-cursor-webgl-webgpu.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Tubes Cursor (WebGL, WebGPU)
    ----------------------------
    This effect has been made with ThreeJS and can run with WebGPU or WebGL.

    A [Pen](https://codepen.io/JaT5/pen/ZYWmqvz) by [JaT5](https://codepen.io/JaT5) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/ZYWmqvz).