03色紙の帯カードグリッド

<main class="stage">
  <section class="cardpaper">
    <article class="cardpaper__card cardpaper__card--coral">
      <span class="cardpaper__ic" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="m224 80l-96 56l-96-56l96-56Z" opacity=".2"/><path d="M230.91 172a8 8 0 0 1-2.91 10.91l-96 56a8 8 0 0 1-8.06 0l-96-56A8 8 0 0 1 36 169.09l92 53.65l92-53.65a8 8 0 0 1 10.91 2.91M220 121.09l-92 53.65l-92-53.65a8 8 0 0 0-8 13.82l96 56a8 8 0 0 0 8.06 0l96-56a8 8 0 1 0-8.06-13.82M24 80a8 8 0 0 1 4-6.91l96-56a8 8 0 0 1 8.06 0l96 56a8 8 0 0 1 0 13.82l-96 56a8 8 0 0 1-8.06 0l-96-56A8 8 0 0 1 24 80m23.88 0L128 126.74L208.12 80L128 33.26Z"/></g></svg>
      </span>
      <h2 class="cardpaper__t">重ねる</h2>
      <p class="cardpaper__d">奥行きは層でつくる</p>
    </article>
    <article class="cardpaper__card cardpaper__card--sky">
      <span class="cardpaper__ic" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M224 32c0 32.81-31.64 67.43-58.64 91.05A84.4 84.4 0 0 0 133 90.64c23.57-27 58.19-58.64 91-58.64" opacity=".2"/><path d="M232 32a8 8 0 0 0-8-8c-44.08 0-89.31 49.71-114.43 82.63A60 60 0 0 0 32 164c0 30.88-19.54 44.73-20.47 45.37A8 8 0 0 0 16 224h76a60 60 0 0 0 57.37-77.57C182.3 121.31 232 76.08 232 32M92 208H34.63C41.38 198.41 48 183.92 48 164a44 44 0 1 1 44 44m32.42-94.45q5.14-6.66 10.09-12.55A76.2 76.2 0 0 1 155 121.49q-5.9 4.94-12.55 10.09a60.5 60.5 0 0 0-18.03-18.03m42.7-2.68a92.6 92.6 0 0 0-22-22c31.78-34.53 55.75-45 69.9-47.91c-2.85 14.16-13.37 38.13-47.9 69.91"/></g></svg>
      </span>
      <h2 class="cardpaper__t">色を塗る</h2>
      <p class="cardpaper__d">色は3色まで</p>
    </article>
    <article class="cardpaper__card cardpaper__card--leaf">
      <span class="cardpaper__ic" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="m194.82 151.43l-55.09 20.3l-20.3 55.09a7.92 7.92 0 0 1-14.86 0l-20.3-55.09l-55.09-20.3a7.92 7.92 0 0 1 0-14.86l55.09-20.3l20.3-55.09a7.92 7.92 0 0 1 14.86 0l20.3 55.09l55.09 20.3a7.92 7.92 0 0 1 0 14.86" opacity=".2"/><path d="M197.58 129.06L146 110l-19-51.62a15.92 15.92 0 0 0-29.88 0L78 110l-51.62 19a15.92 15.92 0 0 0 0 29.88L78 178l19 51.62a15.92 15.92 0 0 0 29.88 0L146 178l51.62-19a15.92 15.92 0 0 0 0-29.88ZM137 164.22a8 8 0 0 0-4.74 4.74L112 223.85L91.78 169a8 8 0 0 0-4.78-4.78L32.15 144L87 123.78a8 8 0 0 0 4.78-4.78L112 64.15L132.22 119a8 8 0 0 0 4.74 4.74L191.85 144ZM144 40a8 8 0 0 1 8-8h16V16a8 8 0 0 1 16 0v16h16a8 8 0 0 1 0 16h-16v16a8 8 0 0 1-16 0V48h-16a8 8 0 0 1-8-8m104 48a8 8 0 0 1-8 8h-8v8a8 8 0 0 1-16 0v-8h-8a8 8 0 0 1 0-16h8v-8a8 8 0 0 1 16 0v8h8a8 8 0 0 1 8 8"/></g></svg>
      </span>
      <h2 class="cardpaper__t">貼る</h2>
      <p class="cardpaper__d">影で留める</p>
    </article>
  </section>
</main>

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

// 페이퍼컷 팔레트
$paper-base:   #fbf6ec;
$paper-sheet:  #ffffff;
$paper-ink:    #2a2320;
$paper-stone:  #5c5048;
$paper-coral:  #b97b71;
$paper-sky:    #6a8db5;
$paper-leaf:   #2b7d5a;
$paper-butter: #d6c9ab;
$paper-edge:   #e7dccb;

$duration: $dur-loop;   // 카드 한 장이 들렸다 앉는 주기. 셋은 같은 주기를 시차로 나눠 쓴다
$easing: $ease-spring;  // 위로 뜰 때만 살짝 탄력
$color: $paper-sheet;   // 카드 본체는 흰 종이, 색은 머리띠에만

@include stage($paper-butter);

.cardpaper {
  display: flex;
  gap: $sp-3;
  align-items: stretch;   // 세 장의 높이를 맞춘다. flex-end 로 두면 글 길이만큼 아랫단이 어긋난다
}
.cardpaper__card {
  box-sizing: border-box;
  position: relative;
  width: 120px;
  padding: $sp-6 $sp-3 $sp-4;
  border-radius: $r-card;
  background: $color;
  box-shadow: 0 6px 0 rgba($paper-ink, .16);
  animation: cardPeel $duration $easing infinite;
}
// 카드 위 오려 붙인 머리띠 — 카드마다 다른 색종이
.cardpaper__card::before {
  content: "";
  position: absolute;
  left: $sp-3;
  right: $sp-3;
  top: -8px;
  height: $sp-4;
  border-radius: $r-xs;
}
.cardpaper__card--coral::before { background: $paper-coral; }
.cardpaper__card--sky::before   { background: $paper-sky; }
.cardpaper__card--leaf::before  { background: $paper-leaf; }

.cardpaper__card--sky  { animation-delay: -.22s; }
.cardpaper__card--leaf { animation-delay: -.44s; }

.cardpaper__ic {
  display: block;
  font-size: 26px;
  line-height: 1;
  margin-bottom: $sp-2;
}
.cardpaper__card--coral .cardpaper__ic { color: $paper-coral; }
.cardpaper__card--sky   .cardpaper__ic { color: $paper-sky; }
.cardpaper__card--leaf  .cardpaper__ic { color: $paper-leaf; }

.cardpaper__t {
  margin: 0 0 $sp-1;
  color: $paper-ink;
  font-weight: 800; font-size: 15px; line-height: 1.2;
  font-family: inherit;
}
.cardpaper__d {
  margin: 0;
  color: $paper-stone;
  font-weight: 500; font-size: 12px; line-height: 1.35;
  font-family: inherit;
}

// 데모: 세 장이 0.22초씩 어긋나 차례로 들린다 — 겹쳐 붙인 종이가 한 장씩 떨어지는 것처럼
@keyframes cardPeel {
  0%, 100% { transform: translateY(0) rotate(0deg); box-shadow: 0 6px 0 rgba($paper-ink, .16); }
  45%      { transform: translateY(-14px) rotate(-2deg); box-shadow: 0 18px 8px rgba($paper-ink, .12); }
}

@media (max-width: 340px), (max-height: 220px) {
  .cardpaper { gap: $sp-2; }
  .cardpaper__card { width: 84px; padding: $sp-5 $sp-2 $sp-3; }
  .cardpaper__ic { font-size: 20px; margin-bottom: $sp-1; }
  .cardpaper__t { font-size: 13px; }
  .cardpaper__d { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cardpaper__card { animation: none !important; transform: none; }
}

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

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

.cardpaper {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.cardpaper__card {
  box-sizing: border-box;
  position: relative;
  width: 120px;
  padding: 24px 12px 16px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 6px 0 rgba(42, 35, 32, 0.16);
  animation: cardPeel 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.cardpaper__card::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: -8px;
  height: 16px;
  border-radius: 4px;
}

.cardpaper__card--coral::before {
  background: #b97b71;
}

.cardpaper__card--sky::before {
  background: #6a8db5;
}

.cardpaper__card--leaf::before {
  background: #2b7d5a;
}

.cardpaper__card--sky {
  animation-delay: -0.22s;
}

.cardpaper__card--leaf {
  animation-delay: -0.44s;
}

.cardpaper__ic {
  display: block;
  font-size: 26px;
  line-height: 1;
  margin-bottom: 8px;
}

.cardpaper__card--coral .cardpaper__ic {
  color: #b97b71;
}

.cardpaper__card--sky .cardpaper__ic {
  color: #6a8db5;
}

.cardpaper__card--leaf .cardpaper__ic {
  color: #2b7d5a;
}

.cardpaper__t {
  margin: 0 0 4px;
  color: #2a2320;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
  font-family: inherit;
}

.cardpaper__d {
  margin: 0;
  color: #5c5048;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.35;
  font-family: inherit;
}

@keyframes cardPeel {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    box-shadow: 0 6px 0 rgba(42, 35, 32, 0.16);
  }
  45% {
    transform: translateY(-14px) rotate(-2deg);
    box-shadow: 0 18px 8px rgba(42, 35, 32, 0.12);
  }
}
@media (max-width: 340px), (max-height: 220px) {
  .cardpaper {
    gap: 8px;
  }
  .cardpaper__card {
    width: 84px;
    padding: 20px 8px 12px;
  }
  .cardpaper__ic {
    font-size: 20px;
    margin-bottom: 4px;
  }
  .cardpaper__t {
    font-size: 13px;
  }
  .cardpaper__d {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cardpaper__card {
    animation: none !important;
    transform: none;
  }
}

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

export type PaperCard = { title: string; desc: string; band: "coral" | "sky" | "leaf"; icon: "stack" | "brush" | "sparkle" };

export type CardGridPaperProps = {
  cards?: PaperCard[];
  /** 한 주기(기본 2000ms) */
  duration?: number;
  easing?: string;
  /** 카드 한 장이 늦게 들리는 간격(ms) */
  stagger?: number;
};

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

const ICON: Record<PaperCard["icon"], ReactNode> = {
  stack: <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="m224 80l-96 56l-96-56l96-56Z" opacity=".2"/><path d="M230.91 172a8 8 0 0 1-2.91 10.91l-96 56a8 8 0 0 1-8.06 0l-96-56A8 8 0 0 1 36 169.09l92 53.65l92-53.65a8 8 0 0 1 10.91 2.91M220 121.09l-92 53.65l-92-53.65a8 8 0 0 0-8 13.82l96 56a8 8 0 0 0 8.06 0l96-56a8 8 0 1 0-8.06-13.82M24 80a8 8 0 0 1 4-6.91l96-56a8 8 0 0 1 8.06 0l96 56a8 8 0 0 1 0 13.82l-96 56a8 8 0 0 1-8.06 0l-96-56A8 8 0 0 1 24 80m23.88 0L128 126.74L208.12 80L128 33.26Z"/></g></svg>,
  brush: <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M224 32c0 32.81-31.64 67.43-58.64 91.05A84.4 84.4 0 0 0 133 90.64c23.57-27 58.19-58.64 91-58.64" opacity=".2"/><path d="M232 32a8 8 0 0 0-8-8c-44.08 0-89.31 49.71-114.43 82.63A60 60 0 0 0 32 164c0 30.88-19.54 44.73-20.47 45.37A8 8 0 0 0 16 224h76a60 60 0 0 0 57.37-77.57C182.3 121.31 232 76.08 232 32M92 208H34.63C41.38 198.41 48 183.92 48 164a44 44 0 1 1 44 44m32.42-94.45q5.14-6.66 10.09-12.55A76.2 76.2 0 0 1 155 121.49q-5.9 4.94-12.55 10.09a60.5 60.5 0 0 0-18.03-18.03m42.7-2.68a92.6 92.6 0 0 0-22-22c31.78-34.53 55.75-45 69.9-47.91c-2.85 14.16-13.37 38.13-47.9 69.91"/></g></svg>,
  sparkle: <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="m194.82 151.43l-55.09 20.3l-20.3 55.09a7.92 7.92 0 0 1-14.86 0l-20.3-55.09l-55.09-20.3a7.92 7.92 0 0 1 0-14.86l55.09-20.3l20.3-55.09a7.92 7.92 0 0 1 14.86 0l20.3 55.09l55.09 20.3a7.92 7.92 0 0 1 0 14.86" opacity=".2"/><path d="M197.58 129.06L146 110l-19-51.62a15.92 15.92 0 0 0-29.88 0L78 110l-51.62 19a15.92 15.92 0 0 0 0 29.88L78 178l19 51.62a15.92 15.92 0 0 0 29.88 0L146 178l51.62-19a15.92 15.92 0 0 0 0-29.88ZM137 164.22a8 8 0 0 0-4.74 4.74L112 223.85L91.78 169a8 8 0 0 0-4.78-4.78L32.15 144L87 123.78a8 8 0 0 0 4.78-4.78L112 64.15L132.22 119a8 8 0 0 0 4.74 4.74L191.85 144ZM144 40a8 8 0 0 1 8-8h16V16a8 8 0 0 1 16 0v16h16a8 8 0 0 1 0 16h-16v16a8 8 0 0 1-16 0V48h-16a8 8 0 0 1-8-8m104 48a8 8 0 0 1-8 8h-8v8a8 8 0 0 1-16 0v-8h-8a8 8 0 0 1 0-16h8v-8a8 8 0 0 1 16 0v8h8a8 8 0 0 1 8 8"/></g></svg>,
};

const BAND: Record<PaperCard["band"], string> = { coral: styles.bandCoral, sky: styles.bandSky, leaf: styles.bandLeaf };

export default function CardGridPaper({
  cards = [
    { title: "겹치기", desc: "깊이는 층으로", band: "coral", icon: "stack" },
    { title: "칠하기", desc: "색은 세 가지만", band: "sky", icon: "brush" },
    { title: "붙이기", desc: "그림자로 고정", band: "leaf", icon: "sparkle" },
  ],
  duration = 2000,
  easing = "cubic-bezier(.2,.8,.2,1)",
  stagger = 220,
}: CardGridPaperProps) {
  return (
    <section className={styles.cardpaper}>
      {cards.map((c, i) => {
        const vars: Vars = {
          "--duration": `${duration}ms`, "--easing": easing, "--delay": `${-stagger * i}ms`,
        };
        return (
          <article key={c.title} className={`${styles.card} ${BAND[c.band]}`} style={vars}>
            <span className={styles.ic} aria-hidden="true">{ICON[c.icon]}</span>
            <h2 className={styles.t}>{c.title}</h2>
            <p className={styles.d}>{c.desc}</p>
          </article>
        );
      })}
    </section>
  );
}