diff --git a/public/images/gab-animation/name/1.png b/public/images/gab-animation/name/1.png
new file mode 100644
index 0000000..2838643
Binary files /dev/null and b/public/images/gab-animation/name/1.png differ
diff --git a/public/images/gab-animation/name/2.png b/public/images/gab-animation/name/2.png
new file mode 100644
index 0000000..4fdd5d1
Binary files /dev/null and b/public/images/gab-animation/name/2.png differ
diff --git a/public/images/gab-animation/name/3.png b/public/images/gab-animation/name/3.png
new file mode 100644
index 0000000..626f081
Binary files /dev/null and b/public/images/gab-animation/name/3.png differ
diff --git a/public/images/gab-animation/name/4.png b/public/images/gab-animation/name/4.png
new file mode 100644
index 0000000..e48b364
Binary files /dev/null and b/public/images/gab-animation/name/4.png differ
diff --git a/public/images/gab-animation/name/5.png b/public/images/gab-animation/name/5.png
new file mode 100644
index 0000000..4e306dd
Binary files /dev/null and b/public/images/gab-animation/name/5.png differ
diff --git a/src/scss/keyframes/_common.scss b/src/scss/keyframes/_common.scss
index f2b1b02..f512338 100644
--- a/src/scss/keyframes/_common.scss
+++ b/src/scss/keyframes/_common.scss
@@ -18,6 +18,14 @@
   from { transform: translateX(100%); }
   to   { transform: translateX(0%); }
 }
+@keyframes slide-top {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0%); }
+}
+@keyframes slide-bottom {
+  from { transform: translateY(-100%); }
+  to   { transform: translateY(0%); }
+}
 @keyframes scale10 {
   from { transform: scale(1); }
   to   { transform: scale(10); }
diff --git a/src/scss/keyframes/pc/_gab-animation.scss b/src/scss/keyframes/pc/_gab-animation.scss
index ae3e5f1..236db49 100644
--- a/src/scss/keyframes/pc/_gab-animation.scss
+++ b/src/scss/keyframes/pc/_gab-animation.scss
@@ -124,3 +124,14 @@
   from { transform: scale(3) rotate(35deg); opacity: 0; }
   to   { transform: scale(0.7) rotate(-8deg); opacity: 1; }
 }
+
+@keyframes gab-animation__fall-paint-1 {
+  0%   { top: -100px; transform: scaleX(1); }
+  60%  { transform: scaleX(1); }
+  100% { top: calc(50% - 70px); transform: scaleX(1.2); }
+}
+@keyframes gab-animation__fall-paint-2 {
+  0%   { top: -100px; transform: scaleX(1); }
+  60%  { transform: scaleX(1); }
+  100% { top: calc(50% - 30px); transform: scaleX(1.2); }
+}
diff --git a/src/scss/modules/pc/_gab-animation.scss b/src/scss/modules/pc/_gab-animation.scss
index 8951433..d0d1aa6 100644
--- a/src/scss/modules/pc/_gab-animation.scss
+++ b/src/scss/modules/pc/_gab-animation.scss
@@ -230,6 +230,83 @@
     }
   }
 
+  .gab-animation__palette {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    
+    .paint {
+      position: absolute; top: -100px;
+      width: 100px; height: 100px;
+      border-radius: 50%;
+      background-color: $theme-bg;
+
+      div {
+        position: absolute;
+        top: 50%;
+        overflow: hidden;
+
+        &::after {
+          content: ""; display: block;
+          position: absolute;
+          top: 0; left: 0;
+          width: 100%; height: 100%;
+          background-color: $theme-bg;
+          transform: translateY(-100%);
+        }
+      }
+      div:nth-child(1) {
+        left: calc(50% - 5px);
+        width: 10px; height: 120px;
+        &::after { border-radius: 10px; }
+      }
+      div:nth-child(2) {
+        left: 2px;
+        width: 18px; height: 70px;
+        &::after { border-radius: 15px; }
+      }
+      div:nth-child(3) {
+        right: 20px;
+        width: 15px; height: 75px;
+        &::after { border-radius: 10px; }
+      }
+      div:nth-child(4) {
+        right: 0px;
+        width: 10px; height: 50px;
+        &::after { border-radius: 10px; }
+      }
+
+      .char {
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%; height: 100%;
+        border-radius: 50%;
+        overflow: hidden;
+        background-size: 80%;
+        background-position: center;
+        background-repeat: no-repeat;
+
+        &::after {
+          content: ""; display: block;
+          position: absolute;
+          top: 0; left: 0;
+          width: 100%; height: 100%;
+          background-color: $theme-bg;
+        }
+      }
+      .char-1 { background-image: url(../images/gab-animation/name/1.png); }
+      .char-2 { background-image: url(../images/gab-animation/name/2.png); }
+      .char-3 { background-image: url(../images/gab-animation/name/3.png); }
+      .char-4 { background-image: url(../images/gab-animation/name/4.png); }
+      .char-5 { background-image: url(../images/gab-animation/name/5.png); }
+    }
+    .paint:nth-child(1) { left: calc(50% - 330px); }
+    .paint:nth-child(2) { left: calc(50% - 190px); }
+    .paint:nth-child(3) { left: calc(50% - 50px); }
+    .paint:nth-child(4) { left: calc(50% + 90px); }
+    .paint:nth-child(5) { left: calc(50% + 230px); }
+  }
+
   /*************************************************************************************************
    * animation
    *************************************************************************************************/
@@ -390,5 +467,48 @@
         div:nth-child(2):after { animation: slide-right 0.7s ease 7.8s forwards; }
       }
     }
+
+    .gab-animation__palette {
+      .paint:nth-child(1) {
+        animation: gab-animation__fall-paint-1 0.2s ease 9s forwards;
+        div:nth-child(1):after { animation: slide-bottom 2s ease 9.2s forwards; }
+        div:nth-child(2):after { animation: slide-bottom 1s ease 9.2s forwards; }
+        div:nth-child(3):after { animation: slide-bottom 1.8s ease 9.2s forwards; }
+        div:nth-child(4):after { animation: slide-bottom 0.9s ease 9.2s forwards; }
+        .char:after { animation: slide-top 1.8s ease-out 9.2s reverse forwards; }
+      }
+      .paint:nth-child(2) {
+        animation: gab-animation__fall-paint-2 0.2s ease 10s forwards;
+        div:nth-child(1):after { animation: slide-bottom 2s ease 10.2s forwards; }
+        div:nth-child(2):after { animation: slide-bottom 1s ease 10.2s forwards; }
+        div:nth-child(3):after { animation: slide-bottom 1.8s ease 10.2s forwards; }
+        div:nth-child(4):after { animation: slide-bottom 0.9s ease 10.2s forwards; }
+        .char:after { animation: slide-top 1.8s ease-out 10.2s reverse forwards; }
+      }
+      .paint:nth-child(3) {
+        animation: gab-animation__fall-paint-1 0.2s ease 8.5s forwards;
+        div:nth-child(1):after { animation: slide-bottom 2s ease 8.7s forwards; }
+        div:nth-child(2):after { animation: slide-bottom 1s ease 8.7s forwards; }
+        div:nth-child(3):after { animation: slide-bottom 1.8s ease 8.7s forwards; }
+        div:nth-child(4):after { animation: slide-bottom 0.9s ease 8.7s forwards; }
+        .char:after { animation: slide-top 1.8s ease-out 8.7s reverse forwards; }
+      }
+      .paint:nth-child(4) {
+        animation: gab-animation__fall-paint-2 0.2s ease 10.5s forwards;
+        div:nth-child(1):after { animation: slide-bottom 2s ease 10.7s forwards; }
+        div:nth-child(2):after { animation: slide-bottom 1s ease 10.7s forwards; }
+        div:nth-child(3):after { animation: slide-bottom 1.8s ease 10.7s forwards; }
+        div:nth-child(4):after { animation: slide-bottom 0.9s ease 10.7s forwards; }
+        .char:after { animation: slide-top 1.8s ease-out 10.7s reverse forwards; }
+      }
+      .paint:nth-child(5) {
+        animation: gab-animation__fall-paint-1 0.2s ease 9.5s forwards;
+        div:nth-child(1):after { animation: slide-bottom 2s ease 9.7s forwards; }
+        div:nth-child(2):after { animation: slide-bottom 1s ease 9.7s forwards; }
+        div:nth-child(3):after { animation: slide-bottom 1.8s ease 9.7s forwards; }
+        div:nth-child(4):after { animation: slide-bottom 0.9s ease 9.7s forwards; }
+        .char:after { animation: slide-top 1.8s ease-out 9.7s reverse forwards; }
+      }
+    }
   }
 }