ホバー

CSSとJSで作る、カーソルに追従する光の残像

投稿日 2026/02/18

更新日 2026/2/10

ヒーローセクションに、手触りのある動きを足したい。

このサンプルは、画面全体のキャンバス上に発光チューブを描画し、カーソルの動きに合わせて軌跡が追従するトレーサー演出です。クリックで配色がランダムに変わるため、触って楽しい「インタラクティブ背景」として使えます。

Preview プレビュー

Code コード

HTML

<div id="kumonosu-app">
	<canvas id="kumonosu-canvas"></canvas>
	<div class="kumonosu-hero">
		<h1>KUMONOSU<br>TRACER</h1>
	</div>
</div>

CSS

body, html, #kumonosu-app {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #000;
}
body {
	touch-action: none;
}
#kumonosu-app {
	font-family: "Montserrat", sans-serif;
}
.kumonosu-hero {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	/* マウスイベントをキャンバスに透過 */
}
h1 {
	margin: 0;
	padding: 0;
	color: white;
	text-shadow: 0 0 20px rgba(0, 0, 0, 1);
	line-height: 1.1;
	user-select: none;
	font-size: 80px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
}
#kumonosu-canvas {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
/* モバイル対応の調整 */
@media (max-width: 600px) {
	h1 {
		font-size: 40px;
	}
}

JavaScript

// Licence CC BY-NC-SA 4.0
import TubesCursor from "https://cdn.jsdelivr.net/npm/threejs-components@0.0.19/build/cursors/tubes1.min.js"

// エフェクトの初期化
// getElementById の引数も変更後の ID に合わせています
const app = TubesCursor(document.getElementById('kumonosu-canvas'), {
    tubes: {
        // 初期の色指定（赤と青）
        colors: ["#ff0000", "#0000ff", "#ff0055"],
        lights: {
            intensity: 200,
            colors: ["#ff0000", "#0066ff", "#ff3300", "#0000ff"]
        }
    }
})

// クリック時に色をランダムに変更
document.body.addEventListener('click', () => {
    const colors = randomColors(3)
    const lightsColors = randomColors(4)
    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'))
}