diff --git a/app/src/assets/scss/protyle/_protyle.scss b/app/src/assets/scss/protyle/_protyle.scss
index 0c67773d1..fa1d48ced 100644
--- a/app/src/assets/scss/protyle/_protyle.scss
+++ b/app/src/assets/scss/protyle/_protyle.scss
@@ -377,7 +377,7 @@
   }
 
   &[custom-riff-decks] {
-    box-shadow: 3px 0px 0px -1px var(--b3-protyle-inline-mark-background)
+    box-shadow: -3px 0px 0px -1px var(--b3-protyle-inline-mark-background) inset;
   }
 
   &__icon {
diff --git a/app/src/assets/scss/protyle/_wysiwyg.scss b/app/src/assets/scss/protyle/_wysiwyg.scss
index a0a655cda..75e4577bf 100644
--- a/app/src/assets/scss/protyle/_wysiwyg.scss
+++ b/app/src/assets/scss/protyle/_wysiwyg.scss
@@ -16,7 +16,7 @@
     position: relative;
 
     &[custom-riff-decks] {
-      box-shadow: 3px 0px 0px -1px var(--b3-protyle-inline-mark-background);
+      box-shadow: -3px 0px 0px -1px var(--b3-protyle-inline-mark-background) inset;
     }
 
     [spellcheck] {
diff --git a/app/src/assets/scss/util/_keyframes.scss b/app/src/assets/scss/util/_keyframes.scss
index 526594a02..a082e97b9 100644
--- a/app/src/assets/scss/util/_keyframes.scss
+++ b/app/src/assets/scss/util/_keyframes.scss
@@ -1,3 +1,12 @@
+@keyframes addCard {
+  0% {
+    box-shadow: -100vw 0px 0px -1px var(--b3-protyle-inline-mark-background) inset;
+  }
+  100% {
+    box-shadow: -3px 0px 0px -1px var(--b3-protyle-inline-mark-background) inset;
+  }
+}
+
 @keyframes fadeIn {
   0% {
     opacity: 0;
diff --git a/app/src/protyle/wysiwyg/transaction.ts b/app/src/protyle/wysiwyg/transaction.ts
index 5b6623fbc..5009f6ab9 100644
--- a/app/src/protyle/wysiwyg/transaction.ts
+++ b/app/src/protyle/wysiwyg/transaction.ts
@@ -450,7 +450,11 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, focus: b
                     nodeAttrHTML += refElement.outerHTML;
                 }
                 if (data.new["custom-riff-decks"]) {
+                    protyle.title.element.style.animation = "addCard 450ms linear";
                     protyle.title.element.setAttribute("custom-riff-decks", data.new["custom-riff-decks"]);
+                    setTimeout(() => {
+                        protyle.title.element.style.animation = "";
+                    }, 450)
                 } else {
                     protyle.title.element.removeAttribute("custom-riff-decks");
                 }
@@ -473,7 +477,7 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, focus: b
             }
             return;
         }
-        protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${operation.id}"]`).forEach(item => {
+        protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${operation.id}"]`).forEach((item: HTMLElement) => {
             if (item.getAttribute("data-type") === "NodeThematicBreak") {
                 return;
             }
@@ -482,6 +486,12 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, focus: b
             });
             Object.keys(data.new).forEach(key => {
                 item.setAttribute(key, data.new[key]);
+                if (key === "custom-riff-decks") {
+                    item.style.animation = "addCard 450ms linear";
+                    setTimeout(() => {
+                        item.style.animation = "";
+                    }, 450)
+                }
             });
             const refElement = item.lastElementChild.querySelector(".protyle-attr--refcount");
             if (refElement) {