docs: Speed up animation when moving internally

gadenbuie · gadenbuie · commit 376eba659ffc · 2025-06-02T14:20:25.000-04:00
diff --git a/docs/404.html b/docs/404.html
@@ -30,6 +30,19 @@
 </head>
 
 <body>
+  <script>
+    // Check if user is coming from within the same domain
+    document.addEventListener('DOMContentLoaded', function() {
+      const referrer = document.referrer;
+      debugger;
+
+      // Check if the referrer is from posit-dev.github.io/shinychat
+      if (referrer && referrer.includes('posit-dev.github.io/shinychat')) {
+        // Set a faster animation speed
+        document.documentElement.style.setProperty('--animation-speed', '0.2'); // 5x faster
+      }
+    });
+  </script>
   <header class="header">
     <div class="logo">
       <div>
diff --git a/docs/chat-styles.css b/docs/chat-styles.css
@@ -4,6 +4,10 @@
   box-sizing: border-box;
 }
 
+:root {
+  --animation-speed: 1;
+}
+
 body {
   font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
     helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica,
@@ -67,30 +71,30 @@ body {
   display: flex;
   opacity: 0;
   transform: translateY(20px);
-  animation: slideIn 0.6s ease-out forwards;
+  animation: slideIn calc(0.6s * var(--animation-speed)) ease-out forwards;
   align-items: flex-start;
   gap: 0.75rem;
 }
 
 .chat-message.user {
   flex-direction: row-reverse;
-  animation-delay: 0.5s;
+  animation-delay: calc(0.5s * var(--animation-speed));
 }
 
 .chat-message.ai {
   flex-direction: row;
 }
 
 .chat-message:nth-child(2) {
-  animation-delay: 1.5s;
+  animation-delay: calc(1.5s * var(--animation-speed));
 }
 
 .chat-message:nth-child(3) {
-  animation-delay: 3s;
+  animation-delay: calc(3s * var(--animation-speed));
 }
 
 .chat-message:nth-child(4) {
-  animation-delay: 4s;
+  animation-delay: calc(4s * var(--animation-speed));
 }
 
 .message-bubble {
@@ -190,7 +194,8 @@ body {
   padding: 2rem;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   opacity: 0;
-  animation: slideIn 0.6s ease-out forwards;
+  animation: slideIn calc(0.6s * var(--animation-speed)) ease-out forwards;
+  animation-delay: calc(1s * var(--animation-speed));;
 }
 
 .features h3 {
@@ -245,17 +250,6 @@ body {
   font-size: 0.9rem;
 }
 
-.chat-input-area {
-  border-top: 1px solid #e5e7eb;
-  padding: 1.5rem 2rem;
-  background: #f9fafb;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  opacity: 0;
-  animation: slideIn 0.6s ease-out 8s forwards;
-}
-
 @keyframes slideIn {
   to {
     opacity: 1;
diff --git a/docs/index.html b/docs/index.html
@@ -30,6 +30,19 @@
 </head>
 
 <body>
+  <script>
+    // Check if user is coming from within the same domain
+    document.addEventListener('DOMContentLoaded', function() {
+      const referrer = document.referrer;
+      debugger;
+
+      // Check if the referrer is from posit-dev.github.io/shinychat
+      if (referrer && referrer.includes('posit-dev.github.io/shinychat')) {
+        // Set a faster animation speed
+        document.documentElement.style.setProperty('--animation-speed', '0.2'); // 5x faster
+      }
+    });
+  </script>
   <header class="header">
     <div class="logo">
       <div>
@@ -167,13 +180,6 @@ <h4>In Your Favorite Language</h4>
   <script>
     // Update footer year dynamically
     document.querySelector('.footer-year').textContent = new Date().getFullYear();
-
-    // // Animate chat messages on load
-    // document.querySelectorAll('.chat-message').forEach((message, index) => {
-    //     message.style.animationDelay = `${index * 0.5}s`;
-    //     message.style.opacity = '1';
-    //     message.style.transform = 'translateY(0)';
-    // });
   </script>
 </body>
 
