Result

パスワードの長さに応じて背景画像が鮮明になっていく、というUI

ぶっちゃけ現在の主流である、テキストと色で強度を明示するのが現状は最適解に思えますが1つの方法として、パスワードの強度に合わせて何かしらコンテンツを変化させる明示方法は悪くないように思えます

レイアウトやUI次第ではスマホでは明示テキストを見逃す可能性もありますというか実際どこかで体験した記憶がるので分かりやすく施工するに越したことは無いですよね

JSはバニラで書かれてます

javascript

const password = document.getElementById('password');
const background = document.getElementById('background');

password.addEventListener('input', (e) => {
	const input = e.target.value;
	const length = input.length;
	const blurValue = 20 - length * 2;
	const blur = `blur(${blurValue}px)`;
	background.style.filter = blur;
});

blurを初期は20pxで設定し、1文字入力されるごとに2pxずつ減らしていく。10文字で0pxになります

これはパスの長さを強度と前提し、画像にblurを使用する形で強度を明示していますが、パスワードの長さや強度でコンテンツを変化させるのは地味ながら効果的に感じました

実際のパスワードの強度として長さ＝強いという訳ではないんですがブルートフォースアタックの類には効果的なので長いに越したことはありませんね

css

.background {
	background-image: url('bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: absolute;
	top: -20px;
	left: -20px;
	bottom: -20px;
	right: -20px;
	filter: blur(20px);
	z-index: -1;
}

html

<div class="background" id="background"></div>

<div class="bg-white rounded p-10 text-center shadow-md">
	<h1 class="text-3xl">サインイン</h1>
	<p class="text-sm text-gray-700">パスワードの長さに応じて画像が鮮明になります</p>
	<div class="my-4 text-left">
		<label class="text-gray-800">メールアドレス:</label>
		<input type="email" class="border block w-full p-2 mt-2 rounded" placeholder="hogehoge@example.com" />
	</div>
	<div class="my-4 text-left">
		<label class="text-gray-800">パスワード</label>
		<input id="password" type="password" class="border block w-full p-2 mt-2 rounded" placeholder="強いと思うパスワードを入力して下さい" />
	</div>
</div>

via

Image Password Strength