Random typing effect

This commit is contained in:
Thomas Smith 2023-02-28 13:54:48 -05:00
parent 3ee0cd1290
commit 5b5245e3d1
2 changed files with 7 additions and 6 deletions

View file

@ -151,7 +151,6 @@
</div>
</div>
</div>
<hr class="mb-3">
<div class="row">
<div class="col">
{{- partial "click-to-copy.html" . -}}
@ -626,7 +625,7 @@
<div class="row two-boxes-down">
<div class="col">
<h2 class="display-5 text-center">Ready to start building?<br>All you need is tea.</h2>
<p class="lead text-center mb-5"><span class="tea">tea</span>s +pkg syntax embodies our core belief that good tools should just get out of the way so that you can keep making the internet a better place. Access your entire ecosystem with one command, compose and combine everything, and enjoy an all-around more delightful dev experience.</p>
<p class="lead text-center mb-5"><span class="tea">tea</span>s +pkg syntax embodies our core belief that good tools should just get out of the way so that you can keep making the internet a better place. Access the entire open source ecosystem with one command, compose and combine everything, and enjoy an all-around more delightful dev experience.</p>
<div class="bottom-cta">{{- partial "desktop-ctas.html" -}}</div>
</div>
</div>

View file

@ -51,9 +51,9 @@
}
let currentChar = command.input[0];
if (currentChar === '$') {
currentChar = '<span class="purple">$</span>';
}
if (currentChar === '$') {
currentChar = '<span class="purple">$</span>';
}
commandOutput += currentChar;
command.input = command.input.slice(1);
@ -61,7 +61,9 @@
if (document.querySelector(".grid-gray").contains(document.createTextNode(currentChar))) {
setTimeout(typeCommand, 50); // Reduce timeout delay for '#' character for faster animation
} else {
setTimeout(typeCommand, 80);
// Add a random delay between 40ms and 80ms (except for '#' characters)
const delay = Math.floor(Math.random() * 40) + 80;
setTimeout(typeCommand, delay);
}
document.querySelector("#terminal-output").innerHTML = commandOutput;