🌊 Stream of typing effect

Here’s a neat trick to level up your app with a stream of typing effect. Check out the all new https://css-library.glide.page for this code and many more!

Here is the HTML

<div style="
 text-align: center;
 width: 100%;
 margin-left: auto;
 margin-right: auto;
">
 <b class="writer" style="
  font-size: 40px; 
  color: black; 
  display: inline-block; 
 ">{Your Text Here}</b>
</div>

And Here is the CSS

.writer {
 display: inline-block;
  overflow: hidden;
  border-right: .07em solid black;
  white-space: nowrap;
  letter-spacing: .03em;
  line-height: 1.2;
  padding: 0.003em 0;
  width: auto;
  max-width: 0;
  animation:
    typing 2.5s steps(40, end) forwards,
    blink-caret .75s step-end infinite;
}


@keyframes typing {
  from { max-width: 0; }
  to { max-width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: black; }
}

Wish we could have our AI responses be provided in this type writer style vs waiting for it to finish completely!

Stream of API effect… now that would be sporty!

Streaming would be super neat, but I wonder how it affects the API usage… It would be disastrous if you have a long response and the API calls kill your usage.

Perhaps Glide could still limit the number of results per call… a stream limit that would truncate the response. If not it’s kind of like a Make scenario that accidentally fires 20k operations… buyer beware!

This is so neat!

Am I actually going to start playing around with all of these wondrous acronyms? :sweat_smile:

You Only Live Once

You are so right! Life’s too short for acronyms :face_with_hand_over_mouth:

Hi @Eric_Penn I implemented the effect. it’s great. tnx!
I did not get the part of the ‘now formula’ to refresh the text though. could you give me an idication to get this rolling?

thanks a lot

Hey @Lennart_Kooy glad you liked it!

What I did to get the text to refresh is use the now formula as the seed of a Roll Dice column. Then I used the Roll Dice column for the Row in a Single Value column and targeted a table with a few different phrases.

I hope this helps!

never got to thankyou/deploy this.

for future fans: it took me a while to realize that I had to create a template column too as final input (to JOIN html code with my {dynamic diced field}) but it seems I am getting there

tnx again!!!