🌊 Stream of typing effect

[Eric_Penn]

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; }
}

[Joe_Gabriele]

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

[Eric_Penn]

Stream of API effect… now that would be sporty!

[ThinhDinh]

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.

[Eric_Penn]

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!

[nathanaelb]

This is so neat!

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

[Eric_Penn]

You Only Live Once

[nathanaelb]

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

[Lennart_Kooy]

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

[Eric_Penn]

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!

[Lennart_Kooy]

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!!!