Add typewriter animation to blog post pages

assets/css/custom.css

@@ -77,3 +77,14 @@ html.dark .theme-toggle-dark {
 html.dark .theme-toggle-light {
     display: none;
 }
+
+/* Typewriter cursor blink */
+@keyframes tk-blink {
+    0%,
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+}

layouts/blog/single.html

@@ -43,6 +43,33 @@
         <div class="content">
           {{ .Content }}
         </div>
+
+        <div class="hx:mt-16 hx:py-8 hx:px-4 hx:border-t hx:border-neutral-200 hx:dark:border-neutral-800" id="typewriter-box" style="opacity:0;transition:opacity .6s">
+          <p class="hx:text-base hx:leading-8 hx:text-gray-500 hx:dark:text-gray-400 hx:whitespace-pre-wrap">
+            <span id="typewriter-text"></span><span id="typewriter-cursor" style="display:inline-block;width:2px;height:1.1em;background:#999;vertical-align:middle;margin-left:1px;animation:tk-blink .8s step-end infinite"></span>
+          </p>
+        </div>
+        <script>
+        (function(){
+          var p=["驾驶教练机拉杆起飞的那一刻","宇治城的小溪边被斜阳刺痛双眼的那一刻","在广汕国道上骑自行车听到路旁大爷大喊加油的那一刻","我清楚的感受到我是我自己"];
+          var all="";p.forEach(function(l,i){all+=l;if(i<p.length-1)all+="\n"});
+          var i=0,del=false,dc=0;
+          var te=document.getElementById("typewriter-text");
+          var box=document.getElementById("typewriter-box");
+          if(!te||!box)return;
+          var obs=new IntersectionObserver(function(e){
+            if(e[0].isIntersecting){box.style.opacity="1";obs.disconnect();go()}
+          },{rootMargin:"120px"});obs.observe(box);
+          function go(){setTimeout(function(){
+            if(!del&&Math.random()<0.1&&i>8&&all.charAt(i-1)!=="\n"){del=true;dc=Math.floor(Math.random()*4)+1}
+            if(del){i=Math.max(0,i-1);dc--;if(dc<=0||i===0||all.charAt(i-1)==="\n")del=false}
+            else{if(i<all.length)i++}
+            te.textContent=all.substring(0,i);
+            if(i<all.length||del)go()
+          },del?55+Math.random()*30:70+Math.random()*100)}
+        })();
+        </script>
+
         {{- partial "components/last-updated.html" . -}}
         {{- if (site.Params.blog.article.displayPagination | default true) -}}
           {{- .Store.Set "reversePagination" (.Params.reversePagination | default true) -}}