04Rotated stamp badges

<main class="stage">
  <section class="scol">
    <span class="scol__badge scol__badge--lemon">
      <span class="scol__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256" fill="currentColor"><path d="M229.06,108.79l-48.7,42,14.88,62.79a8.4,8.4,0,0,1-12.52,9.17L128,189.09,73.28,222.74a8.4,8.4,0,0,1-12.52-9.17l14.88-62.79-48.7-42A8.46,8.46,0,0,1,31.73,94L95.64,88.8l24.62-59.6a8.36,8.36,0,0,1,15.48,0l24.62,59.6L224.27,94A8.46,8.46,0,0,1,229.06,108.79Z" opacity="0.2"/><path d="M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z"/></svg>
      </span>
      <span class="scol__word">BEST</span>
    </span>
    <span class="scol__badge scol__badge--lime">
      <span class="scol__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256" fill="currentColor"><path d="M96,240l16-80L48,136,160,16,144,96l64,24Z" opacity="0.2"/><path d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z"/></svg>
      </span>
      <span class="scol__word">NEW</span>
    </span>
    <span class="scol__badge scol__badge--blush">
      <span class="scol__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256" fill="currentColor"><path d="M232,102c0,66-104,122-104,122S24,168,24,102A54,54,0,0,1,78,48c22.59,0,41.94,12.31,50,32,8.06-19.69,27.41-32,50-32A54,54,0,0,1,232,102Z" opacity="0.2"/><path d="M178,40c-20.65,0-38.73,8.88-50,23.89C116.73,48.88,98.65,40,78,40a62.07,62.07,0,0,0-62,62c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,228.66,240,172,240,102A62.07,62.07,0,0,0,178,40ZM128,214.8C109.74,204.16,32,155.69,32,102A46.06,46.06,0,0,1,78,56c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,155.61,146.24,204.15,128,214.8Z"/></svg>
      </span>
      <span class="scol__word">PICK</span>
    </span>
    <span class="scol__badge scol__badge--sheet">
      <span class="scol__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256" fill="currentColor"><path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"/><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"/></svg>
      </span>
      <span class="scol__word">2026</span>
    </span>
  </section>
</main>

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

// 콜라주·맥시멀 팔레트 (01 과 같은 값). 레몬·라임·블러시는 밝아서 ink 글자만 얹는다
$cg-cream: #fbf3e4;
$cg-sheet: #ffffff;
$cg-ink:   #241d2e;
$cg-coral: #bb7f74;
$cg-lemon: #d1c8a3;
$cg-lime:  #bfce9c;
$cg-blush: #ffb3c7;

$serif: Georgia, "Nanum Myeongjo", "Times New Roman", serif;

$duration: $dur-loop;    // 배지 네 개가 한 바퀴 다 찍히는 한 주기
$easing: $ease-pop;      // 도장은 끝에서 튄다
$color: $cg-lemon;       // 첫 배지의 면 색

@include stage($cg-cream);

.scol {
  display: flex;
  align-items: center;
  gap: $sp-3;
}

// 도장 배지 — 점선 테두리가 스탬프 가장자리, 기울기는 배지마다 고정
.scol__badge {
  box-sizing: border-box;
  width: 66px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: $sp-1;
  border: 2px dashed rgba($cg-ink, .55);
  border-radius: 50%;
  color: $cg-ink;
  box-shadow: 0 4px 0 rgba($cg-ink, .16);
  animation-name: stampPress;
  animation-duration: $duration;
  animation-timing-function: $easing;
  animation-iteration-count: infinite;
}
.scol__badge--lemon { --rot: -12deg; background: $cg-lemon; }
.scol__badge--lime  { --rot: 8deg;   background: $cg-lime;  animation-delay: -.5s; }
.scol__badge--blush { --rot: -6deg;  background: $cg-blush; animation-delay: -1s; }
.scol__badge--sheet { --rot: 10deg;  background: $cg-sheet; animation-delay: -1.5s; }

.scol__icon { font-size: 22px; line-height: 1; }
.scol__word {
  font-family: $serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .1em;
}

// 데모: 눌렸다(0.55) 튀어 오른(1.16) 뒤 제자리. 기울기는 keyframe 마다 다시 써야 유지된다
@keyframes stampPress {
  0%, 55%, 100% { transform: rotate(var(--rot)) scale(1); }
  8%            { transform: rotate(var(--rot)) scale(.55); }
  20%           { transform: rotate(var(--rot)) scale(1.16); }
  32%           { transform: rotate(var(--rot)) scale(1); }
}

@media (max-width: 360px), (max-height: 230px) {
  .scol { gap: $sp-2; }
  .scol__badge { width: 52px; }
  .scol__icon { font-size: 16px; }
  .scol__word { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .scol__badge { animation: none !important; transform: rotate(var(--rot)); }
}

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

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

.scol {
  display: flex;
  align-items: center;
  gap: 12px;
}

.scol__badge {
  box-sizing: border-box;
  width: 66px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px dashed rgba(36, 29, 46, 0.55);
  border-radius: 50%;
  color: #241d2e;
  box-shadow: 0 4px 0 rgba(36, 29, 46, 0.16);
  animation-name: stampPress;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1);
  animation-iteration-count: infinite;
}

.scol__badge--lemon {
  --rot: -12deg;
  background: #d1c8a3;
}

.scol__badge--lime {
  --rot: 8deg;
  background: #bfce9c;
  animation-delay: -0.5s;
}

.scol__badge--blush {
  --rot: -6deg;
  background: #ffb3c7;
  animation-delay: -1s;
}

.scol__badge--sheet {
  --rot: 10deg;
  background: #ffffff;
  animation-delay: -1.5s;
}

.scol__icon {
  font-size: 22px;
  line-height: 1;
}

.scol__word {
  font-family: Georgia, "Nanum Myeongjo", "Times New Roman", serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.1em;
}

@keyframes stampPress {
  0%, 55%, 100% {
    transform: rotate(var(--rot)) scale(1);
  }
  8% {
    transform: rotate(var(--rot)) scale(0.55);
  }
  20% {
    transform: rotate(var(--rot)) scale(1.16);
  }
  32% {
    transform: rotate(var(--rot)) scale(1);
  }
}
@media (max-width: 360px), (max-height: 230px) {
  .scol {
    gap: 8px;
  }
  .scol__badge {
    width: 52px;
  }
  .scol__icon {
    font-size: 16px;
  }
  .scol__word {
    font-size: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scol__badge {
    animation: none !important;
    transform: rotate(var(--rot));
  }
}

import type { CSSProperties, ReactNode } from "react";
import styles from "./StickerBadgesCollage.module.scss";

export type StickerBadge = { word: string; bg?: string; rot?: string; icon?: ReactNode };
export type StickerBadgesCollageProps = {
  badges?: StickerBadge[];
  /** 배지끼리 어긋나는 간격(ms) */
  stagger?: number;
  duration?: number;
  easing?: string;
  color?: string;
};

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

const defaultBadges: StickerBadge[] = [
  { word: "BEST", bg: "#ffd93d", rot: "-12deg" },
  { word: "NEW", bg: "#b6e34f", rot: "8deg" },
  { word: "PICK", bg: "#ffb3c7", rot: "-6deg" },
  { word: "2026", bg: "#ffffff", rot: "10deg" },
];

export default function StickerBadgesCollage({
  badges = defaultBadges,
  stagger = 500,
  duration = 2000,
  easing = "cubic-bezier(.2, 1.4, .4, 1)",
  color = "#ffd93d",
}: StickerBadgesCollageProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <section className={styles.scol} style={vars}>
      {badges.map((b, i) => {
        const bv: BadgeVars = {
          "--rot": b.rot ?? "0deg",
          background: b.bg ?? "#fff",
          animationDelay: `${-stagger * i}ms`,
        };
        return (
          <span key={b.word} className={styles.badge} style={bv}>
            <span className={styles.icon} aria-hidden="true">{b.icon}</span>
            <span className={styles.word}>{b.word}</span>
          </span>
        );
      })}
    </section>
  );
}