06Blurred-background quote

<main class="stage">
  <figure class="test-a">
    <div class="test-a__orb test-a__orb--1" aria-hidden="true"></div>
    <div class="test-a__orb test-a__orb--2" aria-hidden="true"></div>
    <blockquote class="test-a__card">
      <p class="test-a__quote">"Our launch got twice as fast thanks to this."</p>
      <figcaption class="test-a__name">Kim Do-hyun · Product Lead</figcaption>
    </blockquote>
  </figure>
</main>

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

$duration: $dur-loop;
$easing: steps(4, jump-none);  // 부드러운 곡선은 블러 뒤에서 프레임 간 변화가 너무 작아 안 잡힌다
$color: $stage-orange;

@include stage($stage-yellow);

// 태그가 <figure> 라 UA 기본 margin(1em 40px)부터 지운다 — 안 지우면 320px 세로 넘침의 숨은 원인이 된다
.test-a { margin: 0; position: relative; box-sizing: border-box; width: clamp(240px, 82vw, 360px); padding: $sp-5; }
// 흐린 오로라 덩어리 두 개가 유리 카드 뒤에서 천천히 떠돈다
.test-a__orb { position: absolute; width: 50%; aspect-ratio: 1; border-radius: 50%; filter: blur(20px); opacity: 1; }
.test-a__orb--1 { background: radial-gradient($subject-blue 0%, $subject-blue 45%, transparent 72%); top: -8%; left: -8%; animation: floatA $duration $easing infinite; }
.test-a__orb--2 { background: radial-gradient($color 0%, $color 45%, transparent 72%); bottom: -8%; right: -6%; animation: floatB $duration $easing infinite; animation-delay: -1s; }

.test-a__card {
  // <blockquote> 의 UA 기본 margin(1em 40px)도 지운다
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: $r-card;
  padding: $sp-5;
  background: rgba($stage-ink, .22);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba($stage-paper, .18);
}
.test-a__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .25;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba($stage-paper, .6) .5px, transparent .5px),
    radial-gradient(rgba($stage-ink, .6) .5px, transparent .5px);
  background-size: 3px 3px, 5px 5px;
}
.test-a__quote { position: relative; z-index: 1; margin: 0 0 $sp-3; color: $stage-paper; font: 600 clamp(12px, 3vw, 13.5px)/1.5 -apple-system, "Segoe UI", "Noto Sans KR", sans-serif; }
.test-a__name { position: relative; z-index: 1; margin: 0; color: $stage-paper; font-weight: 600; font-size: clamp(10.5px, 2.4vw, 11.5px); line-height: 1.3; }

@keyframes floatA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(24px, 28px); } }
@keyframes floatB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-28px, -20px); } }

@media (prefers-reduced-motion: reduce) {
  .test-a__orb { animation: none; }
}

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

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

.test-a {
  margin: 0;
  position: relative;
  box-sizing: border-box;
  width: clamp(240px, 82vw, 360px);
  padding: 20px;
}

.test-a__orb {
  position: absolute;
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(20px);
  opacity: 1;
}

.test-a__orb--1 {
  background: radial-gradient(#2f6df6 0%, #2f6df6 45%, transparent 72%);
  top: -8%;
  left: -8%;
  animation: floatA 2s steps(4, jump-none) infinite;
}

.test-a__orb--2 {
  background: radial-gradient(#ff4d1f 0%, #ff4d1f 45%, transparent 72%);
  bottom: -8%;
  right: -6%;
  animation: floatB 2s steps(4, jump-none) infinite;
  animation-delay: -1s;
}

.test-a__card {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 20px;
  background: rgba(23, 20, 26, 0.22);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.test-a__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;
  mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255, 255, 255, 0.6) 0.5px, transparent 0.5px), radial-gradient(rgba(23, 20, 26, 0.6) 0.5px, transparent 0.5px);
  background-size: 3px 3px, 5px 5px;
}

.test-a__quote {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  color: #ffffff;
  font: 600 clamp(12px, 3vw, 13.5px)/1.5 -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}

.test-a__name {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #ffffff;
  font-weight: 600;
  font-size: clamp(10.5px, 2.4vw, 11.5px);
  line-height: 1.3;
}

@keyframes floatA {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(24px, 28px);
  }
}
@keyframes floatB {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-28px, -20px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .test-a__orb {
    animation: none;
  }
}

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

export type AuroraTestimonialProps = {
  quote?: string;
  name?: string;
  duration?: number;
  easing?: string;
  color?: string;
};

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

export default function AuroraTestimonial({
  quote = "Our launch got twice as fast thanks to this.",
  name = "Kim Do-hyun · Product Lead",
  duration = 2000,
  easing = "steps(4, jump-none)",
  color = "#ff4d1f",
}: AuroraTestimonialProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <figure className={styles.wrap} style={vars}>
      <div className={`${styles.orb} ${styles.orb1}`} aria-hidden="true" />
      <div className={`${styles.orb} ${styles.orb2}`} aria-hidden="true" />
      <blockquote className={styles.card}>
        <p className={styles.quote}>&ldquo;{quote}&rdquo;</p>
        <figcaption className={styles.name}>{name}</figcaption>
      </blockquote>
    </figure>
  );
}