Create a Smooth Flickering Text Glitch Effect in React

When building something, I always look for inspiration. While designing my Next.js portfolio, I stumbled on Jonas Emmertson's site and got stuck on one tiny detail: the way his text flickers when you hover over it.

It’s subtle, but somehow, it gives the site personality. Not over-the-top glitchy, just alive. I had to figure out how to do it myself using Next.js, TSX, and CSS Modules.

The idea is simple: each letter flickers randomly when you hover. The animation is short, 0.15 seconds, but punchy. Delays between characters are randomized so it feels organic, not like a predictable wave.

Here’s the React component I built. It takes a single text prop and handles everything internally:

import React, { useMemo } from 'react';
import styles from "./styles.module.css";

interface FlickeringTextProps {
    text: string;
}

const generateDelays = (text: string) => {
    const delays = text.split("").map((_, i) => i * (0.3 / text.length));
    for (let i = delays.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [delays[i], delays[j]] = [delays[j], delays[i]];
    }
    return delays.map(d => `${d}s`);
};

const FlickeringText: React.FC<FlickeringTextProps> = ({ text }) => {
    const delays = useMemo(() => generateDelays(text), [text]);

    return (
        <span className={styles.flickeringText}>
            {text.split("").map((char, index) => (
                <span key={index} className={styles.char} style={{ animationDelay: delays[index] }}>
                    {char === " " ? "\u00A0" : char}
                </span>
            ))}
        </span>
    );
};

export default FlickeringText;

Here’s how it works. generateDelays creates a list of delays based on each character, then shuffles them so the flicker doesn’t sweep predictably. Wrapping each character in a <span> lets them animate independently, and spaces use \u00A0 to keep everything aligned. useMemo ensures delays are only recalculated when the text changes.

And the CSS that makes it come alive:

.flickeringText .char {
    display: inline;
}

@media (hover: hover) {
    .flickeringText:hover .char {
        animation: flicker 0.15s cubic-bezier(0.65, 0, 0.35, 1);
    }
}

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

A few small things make a big difference. The hover media query keeps touch devices from getting stuck mid-flicker. The cubic-bezier curve gives the flicker a natural snap instead of a robotic beat. The keyframe is simple, just opacity changes, so it stays subtle.

For me, the biggest lesson wasn’t learning new React tricks. It was realizing that tiny effects often have the most impact. No libraries, no heavy JS, just spans, a CSS animation, and some randomized delays.

This kind of detail wouldn’t suit every site, but for a portfolio it adds personality without distraction. It’s one of those touches that people might not consciously notice, but it makes the site feel thought-out.

Now you’ve got a flickering text component ready to drop into your project. Tweak the timing, play around with it, and make it your own. I’d love to see what you create. Happy coding!