Futuristic text glitch effect

Recreating a glitch text effect that can be used to bring interfaces to life.

#featured #animation #web design #web development

Last updated ~ October • 2024

This is an approach to recreate the cool sci-fi glitch animation as seen on Jonas Emmertsen’s portfolio when you hover over the cards.

To recreate the hover animation shown below, the text string should be split to animate each character separately. An animation with a random delay is applied to each character.

_exeHover_/.HERE

Here is the code for the demo above.

<!--html, where ever you want to parse some text to use the effect-->
<!--disregard client:load if you are not using this in an astro project-->

<div className="hover-trigger flex justify-between">
  <FlickeringText text="_exe" client:load />
  <FlickeringText text="Hover_/.HERE" client:load />
</div>

Have a look at the end of this post to see the references.

//FlickeringText.tsx or just use javascript in a script tag

import React from "react";

interface FlickeringTextProps {
  text: string;
}

const FlickeringText: React.FC<FlickeringTextProps> = ({ text }) => {
  const getRandomDelay = () => `${Math.random() * 0.6}s`;

  return (
    <span className="flickering-text">
      {text.split("").map((char, index) => (
        <span
          key={index}
          className="char"
          style={{ animationDelay: getRandomDelay() }}
        >
          {char === " " ? "\u00A0" : char}
        </span>
      ))}
    </span>
  );
};

export default FlickeringText;

This is the flicker animation that is applied to each character which in this case, is a span with the class name char.

/*global.css*/

.flickering-text {
  display: inline-block;
}

.hover-trigger:hover .flickering-text .char {
  animation: flicker 0.1s ease-in-out;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

References