Make Your Username Impossible to Scroll Past, Without Breaking It

Khan Zai — Sun, 25 Oct 2026 19:46:54 +0000

In a lobby, a server list, or a comments thread, dozens of names look almost identical. Same fonts, same casing, same short phrases. Your eye moves on before it ever stops. Glitch text can break that pattern. Used lightly, it gives a plain name texture and motion. Used heavily, it turns the same name into a puzzle nobody wants to read. This article is about the middle ground, and how to take glitch text from a profile trick into a reusable project asset.

The tool described here is a free online glitch text generator with 30+ styles, Zalgo effects, animated text, PNG/GIF exports, and copy-and-paste Unicode fonts, for Discord, Roblox, Minecraft, Instagram, TikTok, usernames, gaming profiles, and social media, with live previews, adjustable glitch intensity, presets from Clean to Chaos, animated glitch text with HTML and CSS output, PNG, GIF, and WebM exports, text cleaners, symbol generators, and educational guides. You can find it at https://glitchtextgenerators.com

What glitch text actually is

Glitch text looks broken on purpose. Letters appear stretched, doubled, offset, or covered with marks above and below the line. Underneath that look, most glitch text is not an image and it is not a special font you install. It is ordinary text with extra Unicode characters added to it, which is why it can travel into a username field, a bio, a status, or a chat message, as long as that field accepts Unicode text.

A username has to be short, memorable, and readable at a glance, often in a small font next to dozens of other names. Plain text does that job well, but it does not stand out, because most platforms use the same system font for names. Glitch text adds contrast by breaking the clean horizontal line of the list, and motion draws attention for a second before it settles. The risk is overdoing it. If a name takes three seconds to decode, people will skip it. Make the base word readable first, then add style on top of it.

How Unicode combining characters work

Think of a normal letter as a hook. A combining character hangs a mark on that hook. One mark might add a dot above the letter. Another might add a line through it. Another might add a small shape below it.

Stack a few of those marks and a simple word starts to look corrupted. Stack a lot of them and the word starts to fall apart. That is the whole trick, and it is why the same text can look great in one place and unreadable in another.

Zalgo text is a well known version of this idea. It piles combining marks around letters until the text spills above and below its normal line. A generator gives you control over that pile. You can add a little, or you can go all the way to chaos. The difference between a cool username and a mess is usually just intensity, not the idea itself.

Generators automate this work. You type a word, pick a style, set an intensity, and see a live preview. Then you copy the result and paste it where plain text is accepted. Results can vary, because different platforms, apps, and fonts render combining characters a little differently. Always check the result where people will actually see it, not just in the generator. Text cleaners do the opposite job, stripping the extra marks and leaving the base letters, so testing a style is reversible.

A practical walkthrough for a Discord or gaming profile

Start with a short base name. Short names survive glitch effects better than long ones, because there is less to decode and less vertical spill. Two words or fewer is a good starting point.

Next, pick a style that matches the mood you want. A light distortion works for a clean gaming tag. A heavier Zalgo style works for a horror themed profile or a Halloween event. A symbol heavy style works when you want the name to feel more like a logo than a sentence.

Then set intensity, and use the presets as a guide. Start at Clean, move up one step at a time, and stop as soon as the name feels distinct. In many cases, the second or third step is enough. The highest setting, Chaos, is fun to try, but it is rarely the best choice for a name people need to read quickly or search for later.

Copy the result, paste it into your profile, and read it back in the profile itself and in a smaller chat or member list. Ask if a new player could type it, mention it, or remember it after seeing it once. If not, lower the intensity or shorten the name. Keep a clean copy saved for a tournament signup, a team roster, or a support message. Use glitch text as an accent, not your whole brand.

Animated text, HTML and CSS output, and image exports

Animated glitch text adds movement, useful where you control the page, such as a personal site, a project page, a stream overlay, or a landing page. When a generator gives you HTML and CSS output for animated text, you get a starting point to paste into a web project and style further. A typical pattern uses a span for the visible text, plus a data attribute holding the same text for a layered effect. For example:

<span class="glitch" data-text="PLAYER ONE">PLAYER ONE</span>

In your own stylesheet, you can use that data attribute to create offset copies of the text, shift them slightly, and animate them with keyframes, from a subtle flicker to a hard slice effect where the text splits and rejoins. Keep the base text readable while the effect runs.

Image exports fit a different need. PNG is useful for a single frame, such as a thumbnail or badge. GIF is useful when you want motion in a place where HTML and CSS are not an option. WebM is useful for a video style clip for a project page or social post. In all three cases, you trade editable text for a fixed visual, which is good when the look matters most and bad when people need to search for, copy, or read the text later. Use Unicode text for names, bios, and chat, HTML and CSS for pages you control, and PNG, GIF, or WebM for thumbnails, overlays, and social images.

Readability limits, and how to respect them

Glitch text has real limits. The first is vertical space. Heavy Zalgo text spills above and below its line and can overlap other lines in a tight list or small chat window. If your name overlaps the name above it, lower the intensity.

The second limit is screen readers and search. A name covered in combining characters may be hard for assistive tools to read clearly, and hard for other people to search for. Keep a clean version alongside the styled version for titles, alt text, and anywhere the exact name needs to be found.

The third limit is platform rendering. Fonts differ, apps differ, and updates change how text is drawn. Test in the real place, keep a clean copy, and avoid the most extreme settings for anything important.

Closing checklist

Before you publish a glitch name or use it in a project, run through this checklist.

First, can a stranger read the base word at a glance. If not, lower the intensity or shorten the word.

Second, does it still look right in a small list, not just in a large preview. If it overlaps or crowds other lines, lower the intensity.

Third, do you have a clean copy saved. If not, save one before you replace a working name.

Fourth, does the style match the mood. Light distortion for a clean tag, heavier effects for a themed event, and the highest intensity only for short lived, visual only uses.

Fifth, have you picked the right format. Unicode text for copy and paste names and bios, HTML and CSS for pages you control, and PNG, GIF, or WebM for images and video style clips.

Sixth, have you left most of the page clean. If glitch text is everywhere, it stops being an accent and starts being noise.

Glitch text pays off when readability stays the main goal and style stays the support. Start clean, add just enough distortion to stand out, test it where people will see it, and keep a clean version ready.

You can try the generator described here at https://glitchtextgenerators.com and test a few styles with live previews before you commit to one. Start at Clean, move up slowly, and stop when the name feels like yours.

Find Your Mile Pace in Seconds with This Free Calculator

Khan Zai — Tue, 20 Oct 2026 04:54:10 +0000

Pace is the single number that tells a runner whether a training run or a race plan is realistic. Most pace charts bury it in complicated tables. A simpler route is a pace calculator that does the math for you.

The free Mile Pace Calculator takes your time and distance and returns your pace per mile, per kilometre, plus predicted finish times. It covers the tools runners actually use: mile pace, treadmill pace, marathon pace and splits, age-graded pace, a pace converter, track lap times, the 1.5-mile test distance, and a celebrity pace match for fun. It also keeps a log of your mile times so you can watch progress over weeks and months.

Try it here: https://milepacecalculator.com/

Key features:

Mile pace from any time and distance
Marathon pace and race day splits
Age-graded comparison for your age
Free forever, no signup, works on any device

Whether you are chasing a sub 20 minute 5K or just curious what your easy run pace converts to per kilometre, it answers in seconds.

How I Built a Free Army Fitness Test Score Calculator with Vanilla JavaScript

Khan Zai — Thu, 15 Oct 2026 16:45:11 +0000

I recently built a free Army Fitness Test score calculator as a static website. It is a small project, but it touches several ideas that come up in real front-end work. Here is how I put it together.

The five events

The Army Fitness Test (AFT) has five events: the 3-repetition maximum deadlift, the hand-release push-up, the sprint-drag-carry, the plank, and the 2-mile run. Each event is scored from 0 to 100 points. To pass, a soldier must score at least 60 points in every event and reach a minimum total of 300 out of 500 points. Those two rules drive the whole calculator.

A canonical data layer

The heart of the project is the scoring data. The official AFT scoring tables map a performance value, like a deadlift weight or a 2-mile run time, to a point score for each event. I keep all of these tables in one canonical data structure near the top of the script. That separation matters. If the official tables ever change, I only edit one place. The rest of the code never hard-codes a number.

A pure scoring function

Above that data layer sits a single pure scoring function. It takes an event name and a raw performance value, looks up the matching row in the table, and returns a score between 0 and 100. No DOM access and no side effects. That purity makes the function easy to test. I can feed it sample performances and assert the returned scores without rendering anything.

Form inputs per event

The page has one form input per event. Each input handler reads the value, passes it to the scoring function, and renders the per-event score. The total updates live as the user types. Keeping each input independent means one invalid value never breaks the others. The pass or fail message applies the 60 per event and 300 total rule and changes color accordingly.

Score history with localStorage

After a full result is computed, the calculator saves the total and the date to localStorage. On load it reads the history back and renders a simple table of past scores. This gives returning visitors a training log with zero backend. The lesson for a static site is that browser storage is enough for personal history features.

Why a static site

The whole calculator is a static site. There is no server, no database, and no build step beyond plain files. That keeps hosting free and the page fast. All logic runs in the browser, so the page stays responsive and easy to deploy anywhere.

You can try the finished calculator here: https://www.armyfitnesstestcalculator.com/

Not affiliated with the U.S. Army.

DEV Community: Khan Zai