073段階パスワード強度バー

<main class="stage">
  <div class="fv7 is-demo">
    <input class="fv7__input" type="password" value="********" readonly>
    <div class="fv7__track">
      <span class="fv7__fill fv7__fill--weak"></span>
      <span class="fv7__fill fv7__fill--mid"></span>
      <span class="fv7__fill fv7__fill--strong"></span>
    </div>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// 강도 3단계가 같은 트랙 위에 겹쳐 있다: 각 단계는 scaleX 로 자라고(transform-origin:left), 단계마다 다른 색은 opacity 로 교차한다
$duration: $dur-loop;
$easing: $ease-spring;
$color: $subject-mint;

@include stage($stage-orange);

.fv7 { width: min(240px, 86vw); display: flex; flex-direction: column; gap: $sp-2; }
.fv7__input {
  box-sizing: border-box; width: 100%; padding: $sp-2 $sp-3; border-radius: $r-sm;
  border: 2px solid $subject-cream; background: rgba(255, 255, 255, .14);
  color: $subject-cream; font-weight: 400; font-size: 14px; line-height: 1; font-family: inherit;
}
.fv7__track { position: relative; height: 6px; border-radius: $r-xs; background: rgba(255, 255, 255, .25); overflow: hidden; }
.fv7__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  border-radius: $r-xs; transform-origin: left center; transform: scaleX(0); opacity: 0;
}
.fv7__fill--weak { background: $error-soft; }
.fv7__fill--mid { background: $stage-yellow; }
.fv7__fill--strong { background: $color; }
// 한 겹: 트랙 링은 overflow: hidden 바깥에서 파동을 그린다 (트랙 자체는 불변)
.fv7__track::after {
  content: ""; position: absolute; left: 0; top: -3px; bottom: -3px; width: 100%;
  border-radius: $r-xs; opacity: 0; pointer-events: none;
}

@keyframes fv7-weak { 0%, 6% { transform: scaleX(0); opacity: 0; } 14%, 30% { transform: scaleX(.32); opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes fv7-mid { 0%, 36% { transform: scaleX(.32); opacity: 0; } 44%, 62% { transform: scaleX(.64); opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes fv7-strong { 0%, 68% { transform: scaleX(.64); opacity: 0; } 78%, 96% { transform: scaleX(1); opacity: 1; } 100% { opacity: 0; transform: scaleX(0); } }

// 한 겹: 단계 도달 순간(weak 14% · mid 44% · strong 78%) 감쇠 scaleY 펄스 + 단계색 글로우 surge
@keyframes fv7-track-pulse {
  0%, 13% { transform: scaleY(1); }
  14% { transform: scaleY(1.15); } 17% { transform: scaleY(.95); } 20% { transform: scaleY(1.03); } 23% { transform: scaleY(1); }
  43% { transform: scaleY(1); }
  44% { transform: scaleY(1.15); } 47% { transform: scaleY(.95); } 50% { transform: scaleY(1.03); } 53% { transform: scaleY(1); }
  77% { transform: scaleY(1); }
  78% { transform: scaleY(1.15); } 81% { transform: scaleY(.95); } 84% { transform: scaleY(1.03); } 87% { transform: scaleY(1); }
  100% { transform: scaleY(1); }
}
@keyframes fv7-surge {
  0%, 12% { opacity: 0; box-shadow: 0 0 0 0 rgba($error-soft, 0); }
  14% { opacity: .9; box-shadow: 0 0 0 4px rgba($error-soft, .55); }
  22% { opacity: 0; box-shadow: 0 0 0 9px rgba($error-soft, 0); }
  42% { opacity: 0; box-shadow: 0 0 0 0 rgba($stage-yellow, 0); }
  44% { opacity: .9; box-shadow: 0 0 0 4px rgba($stage-yellow, .55); }
  52% { opacity: 0; box-shadow: 0 0 0 9px rgba($stage-yellow, 0); }
  76% { opacity: 0; box-shadow: 0 0 0 0 rgba($color, 0); }
  78% { opacity: .9; box-shadow: 0 0 0 4px rgba($color, .55); }
  86% { opacity: 0; box-shadow: 0 0 0 9px rgba($color, 0); }
  100% { opacity: 0; box-shadow: 0 0 0 0 rgba($error-soft, 0); }
}

.fv7.is-demo .fv7__fill--weak { animation: fv7-weak $duration $easing infinite; }
.fv7.is-demo .fv7__fill--mid { animation: fv7-mid $duration $easing infinite; }
.fv7.is-demo .fv7__fill--strong { animation: fv7-strong $duration $easing infinite; }
.fv7.is-demo .fv7__track { animation: fv7-track-pulse $duration $easing infinite; }
.fv7.is-demo .fv7__track::after { animation: fv7-surge $duration $easing infinite; }

@media (prefers-reduced-motion: reduce) {
  .fv7.is-demo .fv7__fill { animation: none !important; opacity: 0; }
  .fv7.is-demo .fv7__fill--strong { opacity: 1; transform: scaleX(1); }
  .fv7.is-demo .fv7__track,
  .fv7.is-demo .fv7__track::after { animation: none !important; }
  .fv7.is-demo .fv7__track::after { opacity: 0; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ff4d1f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.fv7 {
  width: min(240px, 86vw);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fv7__input {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 2px solid #fff7e6;
  background: rgba(255, 255, 255, 0.14);
  color: #fff7e6;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  font-family: inherit;
}

.fv7__track {
  position: relative;
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.fv7__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  border-radius: 4px;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
}

.fv7__fill--weak {
  background: #ffe0d8;
}

.fv7__fill--mid {
  background: #ffd23f;
}

.fv7__fill--strong {
  background: #4cd4a6;
}

.fv7__track::after {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  bottom: -3px;
  width: 100%;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
}

@keyframes fv7-weak {
  0%, 6% {
    transform: scaleX(0);
    opacity: 0;
  }
  14%, 30% {
    transform: scaleX(0.32);
    opacity: 1;
  }
  36%, 100% {
    opacity: 0;
  }
}
@keyframes fv7-mid {
  0%, 36% {
    transform: scaleX(0.32);
    opacity: 0;
  }
  44%, 62% {
    transform: scaleX(0.64);
    opacity: 1;
  }
  68%, 100% {
    opacity: 0;
  }
}
@keyframes fv7-strong {
  0%, 68% {
    transform: scaleX(0.64);
    opacity: 0;
  }
  78%, 96% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes fv7-track-pulse {
  0%, 13% {
    transform: scaleY(1);
  }
  14% {
    transform: scaleY(1.15);
  }
  17% {
    transform: scaleY(0.95);
  }
  20% {
    transform: scaleY(1.03);
  }
  23% {
    transform: scaleY(1);
  }
  43% {
    transform: scaleY(1);
  }
  44% {
    transform: scaleY(1.15);
  }
  47% {
    transform: scaleY(0.95);
  }
  50% {
    transform: scaleY(1.03);
  }
  53% {
    transform: scaleY(1);
  }
  77% {
    transform: scaleY(1);
  }
  78% {
    transform: scaleY(1.15);
  }
  81% {
    transform: scaleY(0.95);
  }
  84% {
    transform: scaleY(1.03);
  }
  87% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes fv7-surge {
  0%, 12% {
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(255, 224, 216, 0);
  }
  14% {
    opacity: 0.9;
    box-shadow: 0 0 0 4px rgba(255, 224, 216, 0.55);
  }
  22% {
    opacity: 0;
    box-shadow: 0 0 0 9px rgba(255, 224, 216, 0);
  }
  42% {
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(255, 210, 63, 0);
  }
  44% {
    opacity: 0.9;
    box-shadow: 0 0 0 4px rgba(255, 210, 63, 0.55);
  }
  52% {
    opacity: 0;
    box-shadow: 0 0 0 9px rgba(255, 210, 63, 0);
  }
  76% {
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(76, 212, 166, 0);
  }
  78% {
    opacity: 0.9;
    box-shadow: 0 0 0 4px rgba(76, 212, 166, 0.55);
  }
  86% {
    opacity: 0;
    box-shadow: 0 0 0 9px rgba(76, 212, 166, 0);
  }
  100% {
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(255, 224, 216, 0);
  }
}
.fv7.is-demo .fv7__fill--weak {
  animation: fv7-weak 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.fv7.is-demo .fv7__fill--mid {
  animation: fv7-mid 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.fv7.is-demo .fv7__fill--strong {
  animation: fv7-strong 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.fv7.is-demo .fv7__track {
  animation: fv7-track-pulse 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.fv7.is-demo .fv7__track::after {
  animation: fv7-surge 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .fv7.is-demo .fv7__fill {
    animation: none !important;
    opacity: 0;
  }
  .fv7.is-demo .fv7__fill--strong {
    opacity: 1;
    transform: scaleX(1);
  }
  .fv7.is-demo .fv7__track,
  .fv7.is-demo .fv7__track::after {
    animation: none !important;
  }
  .fv7.is-demo .fv7__track::after {
    opacity: 0;
  }
}

import type { CSSProperties } from "react";
import styles from "./PasswordStrengthFill.module.scss";

export type PasswordStrengthFillProps = { duration?: number; easing?: string; color?: string };
type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function PasswordStrengthFill({ duration = 2000, easing = "cubic-bezier(.2,.8,.2,1)", color = "#4cd4a6" }: PasswordStrengthFillProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  return (
    <div className={styles.fv7} style={vars}>
      <input className={styles.input} type="password" defaultValue="********" readOnly />
      <div className={styles.track}>
        <span className={`${styles.fill} ${styles.weak}`} />
        <span className={`${styles.fill} ${styles.mid}`} />
        <span className={`${styles.fill} ${styles.strong}`} />
      </div>
    </div>
  );
}