07Sticker emboss logo

<main class="stage">
  <section class="emboss">
    <div class="emboss__shadow" aria-hidden="true"></div>
    <div class="emboss__sticker">
      <p class="emboss__brand">STUDIO</p>
      <p class="emboss__sub">QUALITY PRESS</p>
    </div>
    <p class="emboss__caption">Four shadow layers carve the relief</p>
  </section>
</main>

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

// 스큐어모픽 엠보싱 — text-shadow 네 겹(아래 밝게·위 어둡게·좌우 보정)으로 글자를 파낸다.
// 로고 글자색은 스티커 바탕과 거의 같게 — 명암은 그림자가 만든다 (진짜 음각의 원리)
$sticker-face: #f4ead7;    // 스티커 면
$sticker-rim:  #ffffff;    // 흰 테 (오려낸 자국)
$emboss-ink:   #e2d4b8;    // 로고 본체 — 면과 아주 가깝게
$emboss-dark:  rgba(96, 74, 48, .62);   // 위로 진 그늘
$emboss-light: rgba(255, 255, 255, .95); // 아래로 받은 빛

$duration: $dur-loop;    // 스티커가 내려와 붙고 다시 뜨는 한 주기
$easing: $ease-pop;      // 손으로 누르는 탄성
$color: $sticker-face;

@include stage($stage-orange);

.emboss {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $sp-4;
}

// 바닥 그림자 — 스티커가 높이 떠 있을 때 크고 연하다
.emboss__shadow {
  width: clamp(160px, 50vw, 216px);
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(23, 20, 26, .5), transparent 70%);
  animation: shadowShrink $duration $easing infinite;
}

// 스티커 — 흰 테를 두르고 살짝 기울여 붙인다
.emboss__sticker {
  box-sizing: border-box;
  width: clamp(176px, 54vw, 236px);
  padding: $sp-4 $sp-5;
  border: 6px solid $sticker-rim;
  border-radius: $r-card;
  background:
    radial-gradient(130% 130% at 30% 22%, rgba(255, 255, 255, .55), transparent 46%),
    $sticker-face;
  box-shadow: 0 4px 8px rgba(23, 20, 26, .28);
  text-align: center;
  animation: stickerApply $duration $easing infinite;
}

// 음각 로고 — 네 겹 text-shadow. 아래는 빛, 위는 그늘 → 파인 글자로 읽힌다
.emboss__brand {
  margin: 0;
  color: $emboss-ink;
  font-weight: 900; font-size: clamp(24px, 7vw, 38px); line-height: 1.05;
  font-family: inherit;
  letter-spacing: .12em;
  text-shadow:
    0 1px 0 $emboss-light,
    0 -1px 0 $emboss-dark,
    1px 0 0 rgba(255, 255, 255, .55),
    -1px 0 0 rgba(96, 74, 48, .35);
}
.emboss__sub {
  margin: $sp-1 0 0;
  color: $emboss-ink;
  font-weight: 700; font-size: clamp(9px, 2.4vw, 11px); line-height: 1;
  font-family: inherit;
  letter-spacing: .34em;
  text-shadow:
    0 1px 0 $emboss-light,
    0 -1px 0 $emboss-dark;
}
.emboss__caption {
  margin: 0;
  color: $subject-ink;
  font-weight: 700; font-size: clamp(11px, 2.8vw, 13px); line-height: 1;
  font-family: inherit;
}

// 24px 위·기울어짐·1.12배에서 내려와 −3도로 착지 → 살짝 들렸다 정착 → 다시 뜬다
@keyframes stickerApply {
  0%        { transform: translateY(-24px) rotate(-8deg) scale(1.12); }
  40%       { transform: translateY(0) rotate(-3deg) scale(1); }
  50%       { transform: translateY(-2px) rotate(-3.6deg) scale(1.01); }
  60%, 88%  { transform: translateY(0) rotate(-3deg) scale(1); }
  100%      { transform: translateY(-24px) rotate(-8deg) scale(1.12); }
}
// 그림자는 착지 순간 작고 진해진다
@keyframes shadowShrink {
  0%        { transform: scaleX(1.4); opacity: .55; }
  40%, 88%  { transform: scaleX(.9); opacity: .9; }
  100%      { transform: scaleX(1.4); opacity: .55; }
}

@media (max-width: 340px), (max-height: 220px) {
  .emboss__sticker { padding: $sp-3 $sp-4; border-width: 4px; }
  .emboss__caption { display: none; }
  .emboss { gap: $sp-3; }
}

@media (prefers-reduced-motion: reduce) {
  .emboss__sticker { animation: none !important; transform: rotate(-3deg); }
  .emboss__shadow { animation: none !important; transform: scaleX(.9); opacity: .9; }
}

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);
}

.emboss {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.emboss__shadow {
  width: clamp(160px, 50vw, 216px);
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(23, 20, 26, 0.5), transparent 70%);
  animation: shadowShrink 2s cubic-bezier(0.2, 1.4, 0.4, 1) infinite;
}

.emboss__sticker {
  box-sizing: border-box;
  width: clamp(176px, 54vw, 236px);
  padding: 16px 20px;
  border: 6px solid #ffffff;
  border-radius: 16px;
  background: radial-gradient(130% 130% at 30% 22%, rgba(255, 255, 255, 0.55), transparent 46%), #f4ead7;
  box-shadow: 0 4px 8px rgba(23, 20, 26, 0.28);
  text-align: center;
  animation: stickerApply 2s cubic-bezier(0.2, 1.4, 0.4, 1) infinite;
}

.emboss__brand {
  margin: 0;
  color: #e2d4b8;
  font-weight: 900;
  font-size: clamp(24px, 7vw, 38px);
  line-height: 1.05;
  font-family: inherit;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 -1px 0 rgba(96, 74, 48, 0.62), 1px 0 0 rgba(255, 255, 255, 0.55), -1px 0 0 rgba(96, 74, 48, 0.35);
}

.emboss__sub {
  margin: 4px 0 0;
  color: #e2d4b8;
  font-weight: 700;
  font-size: clamp(9px, 2.4vw, 11px);
  line-height: 1;
  font-family: inherit;
  letter-spacing: 0.34em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 -1px 0 rgba(96, 74, 48, 0.62);
}

.emboss__caption {
  margin: 0;
  color: #17141a;
  font-weight: 700;
  font-size: clamp(11px, 2.8vw, 13px);
  line-height: 1;
  font-family: inherit;
}

@keyframes stickerApply {
  0% {
    transform: translateY(-24px) rotate(-8deg) scale(1.12);
  }
  40% {
    transform: translateY(0) rotate(-3deg) scale(1);
  }
  50% {
    transform: translateY(-2px) rotate(-3.6deg) scale(1.01);
  }
  60%, 88% {
    transform: translateY(0) rotate(-3deg) scale(1);
  }
  100% {
    transform: translateY(-24px) rotate(-8deg) scale(1.12);
  }
}
@keyframes shadowShrink {
  0% {
    transform: scaleX(1.4);
    opacity: 0.55;
  }
  40%, 88% {
    transform: scaleX(0.9);
    opacity: 0.9;
  }
  100% {
    transform: scaleX(1.4);
    opacity: 0.55;
  }
}
@media (max-width: 340px), (max-height: 220px) {
  .emboss__sticker {
    padding: 12px 16px;
    border-width: 4px;
  }
  .emboss__caption {
    display: none;
  }
  .emboss {
    gap: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .emboss__sticker {
    animation: none !important;
    transform: rotate(-3deg);
  }
  .emboss__shadow {
    animation: none !important;
    transform: scaleX(0.9);
    opacity: 0.9;
  }
}

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

export type StickerEmbossLogoProps = {
  brand?: string;
  sub?: string;
  caption?: string;
  /** 한 주기(기본 2000ms) */
  duration?: number;
  easing?: string;
  color?: string;
};

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

export default function StickerEmbossLogo({
  brand = "STUDIO",
  sub = "QUALITY PRESS",
  caption = "네 겹 그림자로 음각을 낸다",
  duration = 2000,
  easing = "cubic-bezier(.2,1.4,.4,1)",
  color = "#f4ead7",
}: StickerEmbossLogoProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <section className={styles.emboss} style={vars}>
      <div className={styles.shadow} aria-hidden="true" />
      <div className={styles.sticker}>
        <p className={styles.brand}>{brand}</p>
        <p className={styles.sub}>{sub}</p>
      </div>
      <p className={styles.caption}>{caption}</p>
    </section>
  );
}