Kevin Powell - Community•2mo ago

Really cool text effect

Hey yall, I kind of wanted to recreate the effect that this website has on their Header text for their home page https://www.homagames.com/homa-lab Does anyone have any idea how to replicate it? the closest ive come, is just doing a typewriter effect, but with a randomized letter being shown before the intended letter.

Homa

Homa | Homa Lab

Homa Lab is a SaaS workspace and data platform built by and for game devs. It helps you develop new game ideas by looking at market trends to spot niches and fresh mechanics. Then it helps you test out builds for quality, engagement, and marketability.

11 Replies

MarkBoots•2mo ago

you could do something like this

<h1 data-text-animation="IF YOU’RE NOT USING THIS, YOU’RE JUST PLAYING AROUND"></h1>

<h1 data-text-animation="IF YOU’RE NOT USING THIS, YOU’RE JUST PLAYING AROUND"></h1>

const randomInt = (min, max) => Math.floor(min + Math.random() * (max - min + 1));
const randomString = (length) => String.fromCharCode(...Array.from({length}, () => randomInt(32, 126))) 

textAnimation(document.querySelector("[data-text-animation]"));

function textAnimation (textEl, currentIdx = 0){
  const text = textEl.dataset.textAnimation;
  if(currentIdx > text.length) return;
  textEl.innerText = text.slice(0, currentIdx) + randomString(text.length - currentIdx);
  setTimeout(()=> textAnimation(textEl, ++currentIdx), randomInt(5, 50));
}

const randomInt = (min, max) => Math.floor(min + Math.random() * (max - min + 1));
const randomString = (length) => String.fromCharCode(...Array.from({length}, () => randomInt(32, 126))) 

textAnimation(document.querySelector("[data-text-animation]"));

function textAnimation (textEl, currentIdx = 0){
  const text = textEl.dataset.textAnimation;
  if(currentIdx > text.length) return;
  textEl.innerText = text.slice(0, currentIdx) + randomString(text.length - currentIdx);
  setTimeout(()=> textAnimation(textEl, ++currentIdx), randomInt(5, 50));
}

https://codepen.io/MarkBoots/pen/VwOPOdE?editors=1011 this will generate random characters every iteration until all of the text is revealed

Step Chicken•2mo ago

yeah thats kind of what ive done as well, but their animation, the change isnt being done at just the latest index the function is iterating on, its being done at multiple indexes at the same time, and thats what makes it look so cool tbh and also the part that throws me off

MarkBoots•2mo ago

then we'll have to dive into the source... will see if i have some time later on

MarkBoots•2mo ago

found this in the source think they are using this lib (although it's not maintained anymore) https://www.npmjs.com/package/@a7sc11u/scramble

npm

@a7sc11u/scramble

A scramble text UI component for react.. Latest version: 0.0.6, last published: 3 years ago. Start using @a7sc11u/scramble in your project by running npm i @a7sc11u/scramble. There are no other projects in the npm registry using @a7sc11u/scramble.

MarkBoots•2mo ago

I altered it a bit to make it work in vanilla js. https://codepen.io/MarkBoots/pen/rNgjEJZ as backup here the code

message.txt

Step Chicken•2mo ago

Oh my That’s awesome Thank you so much!!!

MarkBoots•2mo ago

no problem

vince•2mo ago

Great work, but one concern I have for this is it would probably be pretty bad for SEO / potentially accessibility especially since it's the h1, as the text isn't available on the page before the JS is loaded. Would it be possible to maybe include the actual, full text in a sr-only class? Something like this:

<h1 data-text-animation="IF YOU'RE NOT USING THIS, YOU'RE JUST PLAYING AROUND">
  <span class="sr-only">
    IF YOU'RE NOT USING THIS, YOU'RE JUST PLAYING AROUND
  </span>
</h1>

<h1 data-text-animation="IF YOU'RE NOT USING THIS, YOU'RE JUST PLAYING AROUND">
  <span class="sr-only">
    IF YOU'RE NOT USING THIS, YOU'RE JUST PLAYING AROUND
  </span>
</h1>

Not sure how that would read on a screenreader though... might read twice 🤔 if it does read twice, maybe we can remove the sr-only element if the full text is loaded?

clevermissfox•2mo ago

Could add aria-hidden to one and sr-only to the other.

vince•2mo ago

true! didn't think about that 👀

Chris Bolson•2mo ago

Hyperplxed made a video on something similar a year or so ago. https://youtu.be/W5oawMJaXbU?si=jsdQBs2YSO2K163D https://codepen.io/Hyperplexed/pen/rNrJgrd

Gaming

Programming

Really cool text effect