スポットライトUI ジェネレーター

<!-- スポットライトをあてる対象要素 -->
<div class="spotlight-area">
	<h3>スポットライトUI デモ</h3>
	<p>エリア内でマウスを動かすと、カーソルの周囲が丸く照らされます。</p>
</div>

.spotlight-area {
	position: relative; /* 子要素の配置基準および疑似要素の基準となる設定 */
	width: 100%;
	min-height: 300px;
	padding: 40px 20px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #ffffff;
	background-color: #111111; /* 基本となる背景色 */
	overflow: hidden; /* 疑似要素のはみ出しを防ぐ設定 */
}

/* スポットライトを表現するためのマスク用疑似要素 */
.spotlight-area::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none; /* マスクの下にあるボタンなどのクリックイベントを阻害しない設定 */
	/* 放射状グラデーションを使ってスポットライトの中心（透明）から周囲（暗転）を構築 */
	background: radial-gradient(
		circle {{radius}}px at var(--x, 50%) var(--y, 50%),
		rgba(0, 0, 0, 0) 0px, /* 中心点は完全に透明 */
		rgba(0, 0, 0, 0) {{inner_radius}}px, /* ぼかしの開始位置まで透明を維持 */
		rgba(0, 0, 0, {{mask_opacity}}) calc({{inner_radius}}px + {{blur}}px) /* ぼかしの終了位置に向かって指定の不透明度へ */
	);
	transition: background 0.1s ease-out; /* 追従をなめらかに見せるためのトランジション */
}

(() => {
	// 対象となるスポットライトエリアを取得
	const area = document.querySelector('.spotlight-area');
	if (!area) return;

	// マウスが動いた際に対象エリア内での座標を算出してCSSカスタムプロパティを更新
	area.addEventListener('mousemove', (e) => {
		const rect = area.getBoundingClientRect();
		const x = e.clientX - rect.left; /* エリア内の相対X座標 */
		const y = e.clientY - rect.top;  /* エリア内の相対Y座標 */
		area.style.setProperty('--x', `${x}px`);
		area.style.setProperty('--y', `${y}px`);
	});

	// タッチデバイスのジェスチャー操作に対応するイベントリスナー
	area.addEventListener('touchmove', (e) => {
		if (e.touches.length > 0) {
			const rect = area.getBoundingClientRect();
			const x = e.touches[0].clientX - rect.left; /* タッチ位置の相対X座標 */
			const y = e.touches[0].clientY - rect.top;  /* タッチ位置の相対Y座標 */
			area.style.setProperty('--x', `${x}px`);
			area.style.setProperty('--y', `${y}px`);
		}
	}, { passive: true }); // パッシブイベントリスナーでスクロールパフォーマンスを向上
})();