diff --git a/components/DemoAnimation.js b/components/DemoAnimation.js
index 107e483c6b5..6e302c74d35 100644
--- a/components/DemoAnimation.js
+++ b/components/DemoAnimation.js
@@ -44,7 +44,7 @@ export default function DemoAnimation({ className = '' }) {
     const common = (
       <>
         <div>
-          <span className="text-teal-400">asyncapi:</span> 2.6.0
+          <span className="text-teal-400">asyncapi:</span> 3.0.0
         </div>
         <div>
           <span className="text-teal-400">info:</span>
@@ -85,10 +85,34 @@ export default function DemoAnimation({ className = '' }) {
           <span className="text-teal-400">channels:</span>
         </div>
         <div>
-          <span className="text-yellow-300">&nbsp;&nbsp;user/signedup:</span>
+          <span className="text-yellow-300">&nbsp;&nbsp;userSignedup:</span>
         </div>
         <div>
-          <span className="text-purple-400">&nbsp;&nbsp;&nbsp;&nbsp;subscribe:</span>
+          <span className="text-purple-400">&nbsp;&nbsp;&nbsp;&nbsp;address:</span><span className="text-teal-200">'user/signedup'</span>
+        </div>
+        <div>
+          <span className="text-teal-400">&nbsp;&nbsp;&nbsp;&nbsp;messages:</span>
+        </div>
+        <div>
+          <span className="text-yellow-300">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;userSignedupMessage:</span>
+        </div>
+        <div>
+          <span className="text-teal-200">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ref:</span><span className="text-teal-200">'#/components/messages/UserSignedUp'</span>
+        </div>
+        <div>
+          <span className="text-teal-400">operations:</span>
+        </div>
+        <div>
+          <span className="text-yellow-300">&nbsp;&nbsp;processUserSignups:</span>
+        </div>
+        <div>
+          <span className="text-purple-400">&nbsp;&nbsp;&nbsp;&nbsp;action:</span><span className="text-teal-200">'receive'</span>
+        </div>
+        <div>
+          <span className="text-teal-400">&nbsp;&nbsp;&nbsp;&nbsp;channel:</span>
+        </div>
+        <div>
+          <span className="text-teal-200">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ref:</span><span className="text-teal-200"> '#/channels/userSignedup'</span>
         </div>
         <Typing.Delay ms={500} />
       </>,
@@ -99,12 +123,6 @@ export default function DemoAnimation({ className = '' }) {
   function renderUntilMessagePayload(callback) {
     return renderTyping(
       <>
-        <div>
-          <span className="text-teal-400">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message:</span>
-        </div>
-        <div>
-          <span className="text-teal-200">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ref:</span><span className="text-teal-200"> '#/components/messages/UserSignedUp'</span>
-        </div>
         <div>
           <span className="text-teal-400">components:</span>
         </div>
@@ -242,7 +260,7 @@ export default function DemoAnimation({ className = '' }) {
             </div>
 
             <div className={transitionClassNames(showChannelsAndOperation)}>
-              <span className="px-3 py-2 mr-2 bg-green-500 text-white font-bold rounded">SUB</span> <span className="text-lg text-gray-700">user/signedup</span>
+              <span className="px-3 py-2 mr-2 bg-green-500 text-white font-bold rounded">RECEIVES</span> <span className="text-lg text-gray-700">user/signedup</span>
             </div>
 
             <div className={transitionClassNames(showUntilMessagePayload)}>