You’ve seen them everywhere. An Instagram bio written as 𝓢𝓸𝓯𝓽 𝓖𝓲𝓻𝓵. A Free Fire player named ꧁༺𝕶𝖎𝖓𝖌༻꧂ at the top of the leaderboard. A WhatsApp status in letters that look like they came from a wizard’s spellbook. And maybe you’ve wondered — how? Instagram doesn’t have a font menu. WhatsApp doesn’t either.
Here’s the secret, and it’s simpler than most people think: those aren’t fonts at all. They’re Unicode characters — special letters that exist alongside the normal alphabet in the same system every phone and computer already understands. The character 𝕊 isn’t a styled “S”. It’s a completely different character that just happens to look like a decorated S. That’s why you can paste it anywhere — bios, usernames, comments, game lobbies — and it survives, because to the app it’s just text.
Once I understood that, I knew exactly what I wanted to build: a tool where you type your name once and instantly see it transformed into every fancy style at the same time, ready to copy with a single tap. So I built one. This is the Stylish Names Generator, and like every project I release at Coding Stellix, it’s completely free and runs entirely in your browser.
How It Works — Three Seconds, Start to Finish
There’s no tutorial needed here, and that’s on purpose. You open the page, you type your name in the big input box, and the moment you start typing, the grid below fills up with your name rewritten in 95+ different styles — live, as you type. Change a letter and every card updates instantly.
See one you like? Tap it. That’s it — the styled name is copied to your clipboard, a small notification confirms it, and you can go paste it wherever you want. No “select all,” no long-press struggles, no accidentally copying half the text. One tap, done. I made sure this works on older phones too, with a fallback copying method for browsers that don’t support the modern clipboard system.
What’s Inside: Five Categories, 95+ Styles
With this many styles, dumping them all in one endless list would be a mess. So everything is organized into five tabs, and honestly, each one has its own personality.
✨ All shows everything at once, if you just want to scroll and discover.
🔮 Fancy is the biggest collection — this is where the classic beautiful stuff lives. Script and Bold Script (the elegant handwriting look), Fraktur (the old gothic newspaper style), Double Struck (the outlined 𝕊𝕥𝕪𝕝𝕖 look), Circled and Squared letters, Upside Down text, Greek-style and Russian-style lettering, Asian-style characters like 卂乃匚, currency letters like ₳฿₵, three different “squiggle” alphabets, Runic letters straight out of Viking history, Leet Speak, Mirror text, and even a controlled “glitch” style for that corrupted-text aesthetic.
🎮 Gaming is built for one audience and it doesn’t apologize for it. If you play Free Fire, PUBG, or basically any game with a username, you know the meta: the top players don’t just have good stats, they have names that look legendary. This tab gives you the frames those names are made of — royal brackets like ꧁༺ ༻꧂, the crown ♛, crossed swords, the sniper rifle ╾━╤デ╦︻, dragon and skull motifs, samurai gates, Viking runes, and combinations like “Emperor,” “Venom,” “Shadow King,” and “Immortal” that wrap your name in full decoration. Copy, paste into your game profile, and you’re done.
🌸 Cute goes the opposite direction — soft, aesthetic, and perfect for bios. Hearts, sparkles, butterflies, cherry blossoms, moonlight symbols, fairy dust, ribbons, and those delicate ⋆˙⟡ star arrangements you see in every aesthetic Instagram bio. If your vibe is soft-girl or dreamcore, this tab is your home.
🅰️ Classic covers the clean, practical styles: Bold, Italic, Monospace, Small Caps, Fullwidth (the vaporwave spaced-out look), Superscript, bracketed frames like 【this】 and 「this」, and wide-spaced capitals. These are the ones I actually use most myself — subtle enough for a professional bio, but still distinct.
Why I Built It This Way
A few decisions in this tool came directly from my frustration with existing name generators, so let me be honest about them.
Everything happens in your browser. Your name is never sent to a server, because there is no server. The transformation is pure character mathematics happening on your own device. Type your name, and it stays with you.
No limits, no locks. I’ve seen generators that show you twenty styles and blur the rest behind a “premium” button. Every single style here is free and always will be. This tool exists because I enjoy building things, not to sell you your own name back.
It’s fast because it’s small. The whole tool — design, animations, all 95+ style engines — is a single file with no heavy frameworks behind it. It loads instantly even on slow connections, and it works offline once loaded.
It looks good. I gave it a theme I’m calling “Neon Royale” — a deep purple night background with glowing violet and pink orbs drifting behind the content, gold accents, and smooth card animations. A tool you use for style should have some style of its own.
One Honest Warning
Before you rename everything you own, one genuine tip from experience: check before you commit. Most platforms accept these characters in bios, statuses, and display names without any problem. But a few places — some username fields, some official forms — only accept plain letters. And screen readers used by visually impaired people can struggle with heavily stylized text, so for anything important or public-facing, keep the fancy styling in display names and bios rather than in the actual content of your posts. Style responsibly, as they say.
Made by Coding Stellix
This generator is part of my ongoing series of free browser tools at Coding Stellix, where I build useful single-file web projects and teach how they work. If you’re a developer — or want to become one — the technique behind this tool is a genuinely fun thing to learn: it’s all Unicode code-point arithmetic, character maps, and a bit of clipboard handling. I share breakdowns of projects exactly like this one on YouTube and Instagram at @coding_stellix, step by step, so you can build your own version and modify it however you like.
So go ahead — type your name, find the style that feels like you, and tap to copy. And if there’s a style you wish existed that isn’t in the collection yet, drop it in the comments. Half the styles in this tool came from requests, and I add new ones all the time.
Your name deserves better than plain text.
— Coding Stellix
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Names Generator — Coding Stellix</title>
<meta name="description" content="Free Stylish Names Generator by Coding Stellix. Turn your name into fancy Unicode fonts for Instagram, TikTok, Free Fire, PUBG & more. Tap to copy instantly.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root{
--bg:#0d0716;
--bg2:#150b24;
--card:rgba(168,85,247,.06);
--card-border:rgba(168,85,247,.22);
--violet:#a855f7;
--pink:#ec4899;
--gold:#fbbf24;
--text:#f5f0ff;
--muted:#a89bc4;
--radius:20px;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Jost',sans-serif}
body{background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
/* animated aurora background */
.bg-orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.5;animation:float 14s ease-in-out infinite}
.orb1{width:480px;height:480px;background:#7c3aed;top:-180px;left:-120px}
.orb2{width:420px;height:420px;background:#db2777;bottom:-160px;right:-100px;animation-delay:-7s}
.orb3{width:280px;height:280px;background:#4c1d95;top:40%;left:55%;animation-delay:-3s;opacity:.35}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.08)}}
.wrap{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:0 18px 70px}
/* ---------- header ---------- */
header{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.12rem;letter-spacing:.4px}
.logo .dot{
width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
background:linear-gradient(135deg,var(--violet),var(--pink));
font-weight:800;color:#fff;font-size:.95rem;box-shadow:0 0 24px rgba(168,85,247,.55)
}
.logo span b{background:linear-gradient(90deg,var(--violet),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.badge{font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);border:1px solid var(--card-border);padding:6px 14px;border-radius:999px;background:var(--card)}
/* ---------- hero ---------- */
.hero{text-align:center;padding:34px 0 8px}
.hero .crown{font-size:2.2rem;display:block;margin-bottom:6px;animation:bounce 2.4s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-8px) rotate(8deg)}}
.hero h1{font-size:clamp(1.85rem,5.8vw,3rem);font-weight:800;line-height:1.12}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--violet),var(--pink),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200%;animation:shine 5s linear infinite}
@keyframes shine{to{background-position:200%}}
.hero p{color:var(--muted);margin-top:10px;font-size:clamp(.92rem,2.5vw,1.05rem);max-width:520px;margin-inline:auto}
/* ---------- input ---------- */
.input-card{
margin-top:26px;background:linear-gradient(180deg,rgba(168,85,247,.10),rgba(236,72,153,.05));
border:1px solid var(--card-border);border-radius:var(--radius);padding:20px;backdrop-filter:blur(14px);
box-shadow:0 20px 60px rgba(124,58,237,.18)
}
.input-row{display:flex;gap:12px}
#nameInput{
flex:1;background:rgba(13,7,22,.7);border:1.5px solid var(--card-border);border-radius:14px;
padding:15px 18px;font-size:1.1rem;color:var(--text);outline:none;transition:.25s;min-width:0
}
#nameInput:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(168,85,247,.18)}
#nameInput::placeholder{color:#6d5f8a}
.clear-btn{
background:rgba(255,255,255,.05);border:1px solid var(--card-border);border-radius:14px;
color:var(--muted);padding:0 18px;cursor:pointer;font-size:1rem;transition:.2s
}
.clear-btn:hover{color:var(--pink);border-color:var(--pink)}
.hint{color:var(--muted);font-size:.8rem;margin-top:12px;text-align:center}
.hint b{color:var(--gold);font-weight:600}
/* ---------- tabs ---------- */
.tabs{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap;justify-content:center}
.tab{
padding:8px 18px;border-radius:999px;cursor:pointer;font-size:.85rem;font-weight:600;
border:1px solid var(--card-border);background:var(--card);color:var(--muted);transition:.2s;user-select:none
}
.tab:hover{color:var(--text)}
.tab.active{background:linear-gradient(135deg,var(--violet),var(--pink));color:#fff;border-color:transparent;box-shadow:0 6px 20px rgba(236,72,153,.35)}
/* ---------- results ---------- */
.results{margin-top:20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.style-card{
background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:14px 16px;
cursor:pointer;transition:.22s;position:relative;overflow:hidden;animation:pop .35s ease backwards
}
.style-card:nth-child(-n+12){animation-delay:calc(var(--i,0)*.03s)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.style-card:hover{border-color:var(--pink);transform:translateY(-3px);box-shadow:0 12px 30px rgba(236,72,153,.22)}
.style-card .label{font-size:.7rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
.style-card .label .copy-tag{color:var(--violet);font-weight:600;letter-spacing:.5px;text-transform:none;opacity:0;transition:.2s}
.style-card:hover .copy-tag{opacity:1}
.style-card .preview{font-size:1.18rem;word-break:break-all;line-height:1.45;color:var(--text)}
.style-card.copied{border-color:var(--gold)}
.style-card.copied .copy-tag{opacity:1;color:var(--gold)}
/* empty state */
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:50px 20px;border:1.5px dashed var(--card-border);border-radius:var(--radius)}
.empty .big{font-size:2.4rem;margin-bottom:10px}
/* ---------- toast ---------- */
.toast{
position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(90px);
background:#1a0f2e;border:1px solid var(--card-border);border-left:3px solid var(--pink);
padding:13px 24px;border-radius:14px;font-size:.92rem;opacity:0;transition:.35s;z-index:99;max-width:90vw
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast b{color:var(--gold)}
/* ---------- footer ---------- */
footer{text-align:center;margin-top:56px;color:var(--muted);font-size:.85rem}
footer b{background:linear-gradient(90deg,var(--violet),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:480px){
.results{grid-template-columns:1fr}
.input-row{flex-direction:row}
}
</style>
</head>
<body>
<div class="bg-orbs"><div class="orb orb1"></div><div class="orb orb2"></div><div class="orb orb3"></div></div>
<div class="wrap">
<header>
<div class="logo">
<div class="dot">CS</div>
<span>Coding<b>_Stellix</b></span>
</div>
<div class="badge">Free Tool</div>
</header>
<section class="hero">
<span class="crown">👑</span>
<h1>Stylish <em>Names Generator</em></h1>
<p>Type your name and get 95+ fancy fonts for Instagram, TikTok, Free Fire, PUBG & WhatsApp. Tap any style to copy.</p>
</section>
<div class="input-card">
<div class="input-row">
<input type="text" id="nameInput" placeholder="Type your name here…" maxlength="40" autocomplete="off">
<button class="clear-btn" id="clearBtn" title="Clear">✕</button>
</div>
<div class="hint">💡 Tip: tap any card to <b>copy instantly</b> — then paste it anywhere</div>
</div>
<div class="tabs" id="tabs">
<div class="tab active" data-cat="all">✨ All</div>
<div class="tab" data-cat="fancy">🔮 Fancy</div>
<div class="tab" data-cat="gaming">🎮 Gaming</div>
<div class="tab" data-cat="cute">🌸 Cute</div>
<div class="tab" data-cat="classic">🅰️ Classic</div>
</div>
<div class="results" id="results"></div>
<footer>Made with 💜 by <b>Coding Stellix</b> — @coding_stellix</footer>
</div>
<div class="toast" id="toast"></div>
<script>
(function(){
const input=document.getElementById('nameInput');
const results=document.getElementById('results');
const toast=document.getElementById('toast');
const clearBtn=document.getElementById('clearBtn');
let currentCat='all';
/* ---------- unicode mapping helpers ---------- */
function offsetMap(name,upStart,lowStart,digStart){
return s=>[...s].map(ch=>{
const c=ch.codePointAt(0);
if(c>=65&&c<=90&&upStart)return String.fromCodePoint(upStart+(c-65));
if(c>=97&&c<=122&&lowStart)return String.fromCodePoint(lowStart+(c-97));
if(c>=48&&c<=57&&digStart)return String.fromCodePoint(digStart+(c-48));
return ch;
}).join('');
}
function charMap(map){
return s=>[...s].map(ch=>map[ch]||map[ch.toLowerCase()]||ch).join('');
}
const bold=offsetMap('bold',0x1D400,0x1D41A,0x1D7CE);
const italic=s=>[...s].map(ch=>{
const c=ch.codePointAt(0);
if(ch==='h')return 'ℎ';
if(c>=65&&c<=90)return String.fromCodePoint(0x1D434+(c-65));
if(c>=97&&c<=122)return String.fromCodePoint(0x1D44E+(c-97));
return ch;
}).join('');
const boldItalic=offsetMap('bi',0x1D468,0x1D482,0);
const script=s=>[...s].map(ch=>{
const ex={'B':'ℬ','E':'ℰ','F':'ℱ','H':'ℋ','I':'ℐ','L':'ℒ','M':'ℳ','R':'ℛ','e':'ℯ','g':'ℊ','o':'ℴ'};
if(ex[ch])return ex[ch];
const c=ch.codePointAt(0);
if(c>=65&&c<=90)return String.fromCodePoint(0x1D49C+(c-65));
if(c>=97&&c<=122)return String.fromCodePoint(0x1D4B6+(c-97));
return ch;
}).join('');
const boldScript=offsetMap('bs',0x1D4D0,0x1D4EA,0);
const fraktur=s=>[...s].map(ch=>{
const ex={'C':'ℭ','H':'ℌ','I':'ℑ','R':'ℜ','Z':'ℨ'};
if(ex[ch])return ex[ch];
const c=ch.codePointAt(0);
if(c>=65&&c<=90)return String.fromCodePoint(0x1D504+(c-65));
if(c>=97&&c<=122)return String.fromCodePoint(0x1D51E+(c-97));
return ch;
}).join('');
const boldFraktur=offsetMap('bf',0x1D56C,0x1D586,0);
const doubleStruck=s=>[...s].map(ch=>{
const ex={'C':'ℂ','H':'ℍ','N':'ℕ','P':'ℙ','Q':'ℚ','R':'ℝ','Z':'ℤ'};
if(ex[ch])return ex[ch];
const c=ch.codePointAt(0);
if(c>=65&&c<=90)return String.fromCodePoint(0x1D538+(c-65));
if(c>=97&&c<=122)return String.fromCodePoint(0x1D552+(c-97));
if(c>=48&&c<=57)return String.fromCodePoint(0x1D7D8+(c-48));
return ch;
}).join('');
const sansBold=offsetMap('sb',0x1D5D4,0x1D5EE,0x1D7EC);
const sansItalic=offsetMap('si',0x1D608,0x1D622,0);
const sansBoldItalic=offsetMap('sbi',0x1D63C,0x1D656,0);
const mono=offsetMap('mono',0x1D670,0x1D68A,0x1D7F6);
const fullwidth=s=>[...s].map(ch=>{
const c=ch.codePointAt(0);
if(c>=33&&c<=126)return String.fromCodePoint(0xFF01+(c-33));
if(ch===' ')return ' ';
return ch;
}).join('');
const circled=s=>[...s].map(ch=>{
const c=ch.codePointAt(0);
if(c>=65&&c<=90)return String.fromCodePoint(0x24B6+(c-65));
if(c>=97&&c<=122)return String.fromCodePoint(0x24D0+(c-97));
if(c>=49&&c<=57)return String.fromCodePoint(0x2460+(c-49));
if(ch==='0')return '⓪';
return ch;
}).join('');
const negCircled=s=>[...s].map(ch=>{
const c=ch.codePointAt(0);
if(c>=65&&c<=90)return String.fromCodePoint(0x1F150+(c-65));
if(c>=97&&c<=122)return String.fromCodePoint(0x1F150+(c-97));
return ch;
}).join('');
const squared=s=>[...s].map(ch=>{
const c=ch.codePointAt(0);
if(c>=65&&c<=90)return String.fromCodePoint(0x1F130+(c-65));
if(c>=97&&c<=122)return String.fromCodePoint(0x1F130+(c-97));
return ch;
}).join('');
const negSquared=s=>[...s].map(ch=>{
const c=ch.codePointAt(0);
if(c>=65&&c<=90)return String.fromCodePoint(0x1F170+(c-65));
if(c>=97&&c<=122)return String.fromCodePoint(0x1F170+(c-97));
return ch;
}).join('');
const smallCaps=charMap({a:'ᴀ',b:'ʙ',c:'ᴄ',d:'ᴅ',e:'ᴇ',f:'ꜰ',g:'ɢ',h:'ʜ',i:'ɪ',j:'ᴊ',k:'ᴋ',l:'ʟ',m:'ᴍ',n:'ɴ',o:'ᴏ',p:'ᴘ',q:'ǫ',r:'ʀ',s:'s',t:'ᴛ',u:'ᴜ',v:'ᴠ',w:'ᴡ',x:'x',y:'ʏ',z:'ᴢ'});
const superscript=charMap({a:'ᵃ',b:'ᵇ',c:'ᶜ',d:'ᵈ',e:'ᵉ',f:'ᶠ',g:'ᵍ',h:'ʰ',i:'ⁱ',j:'ʲ',k:'ᵏ',l:'ˡ',m:'ᵐ',n:'ⁿ',o:'ᵒ',p:'ᵖ',q:'ᑫ',r:'ʳ',s:'ˢ',t:'ᵗ',u:'ᵘ',v:'ᵛ',w:'ʷ',x:'ˣ',y:'ʸ',z:'ᶻ','0':'⁰','1':'¹','2':'²','3':'³','4':'⁴','5':'⁵','6':'⁶','7':'⁷','8':'⁸','9':'⁹'});
const upsideDown=s=>{
const m={a:'ɐ',b:'q',c:'ɔ',d:'p',e:'ǝ',f:'ɟ',g:'ƃ',h:'ɥ',i:'ᴉ',j:'ɾ',k:'ʞ',l:'l',m:'ɯ',n:'u',o:'o',p:'d',q:'b',r:'ɹ',s:'s',t:'ʇ',u:'n',v:'ʌ',w:'ʍ',x:'x',y:'ʎ',z:'z','?':'¿','!':'¡','.':'˙',',':"'"};
return [...s.toLowerCase()].map(ch=>m[ch]||ch).reverse().join('');
};
const strike=s=>[...s].map(ch=>ch+'\u0336').join('');
const underline=s=>[...s].map(ch=>ch+'\u0332').join('');
const slash=s=>[...s].map(ch=>ch+'\u0338').join('');
const cursed=s=>[...s].map(ch=>ch+'\u0489').join('');
const spaced=s=>[...s].join(' ');
const dotted=s=>[...s].join('·');
const parenthesized=s=>[...s].map(ch=>{
const c=ch.codePointAt(0);
if(c>=97&&c<=122)return String.fromCodePoint(0x249C+(c-97));
if(c>=65&&c<=90)return String.fromCodePoint(0x1F110+(c-65));
if(c>=49&&c<=57)return String.fromCodePoint(0x2474+(c-49));
return ch;
}).join('');
const regional=s=>[...s].map(ch=>{
const c=ch.toLowerCase().codePointAt(0);
if(c>=97&&c<=122)return String.fromCodePoint(0x1F1E6+(c-97));
return ch;
}).join('\u200A');
const leet=charMap({a:'4',b:'8',e:'3',g:'9',i:'1',l:'£',o:'0',s:'5',t:'7',z:'2'});
const greekStyle=charMap({a:'α',b:'в',c:'¢',d:'∂',e:'є',f:'ƒ',g:'g',h:'н',i:'ι',j:'נ',k:'к',l:'ℓ',m:'м',n:'η',o:'σ',p:'ρ',q:'q',r:'я',s:'ѕ',t:'т',u:'υ',v:'ν',w:'ω',x:'χ',y:'у',z:'z'});
const currency=charMap({a:'₳',b:'฿',c:'₵',d:'Đ',e:'Ɇ',f:'₣',g:'₲',h:'Ⱨ',i:'ł',j:'J',k:'₭',l:'Ⱡ',m:'₥',n:'₦',o:'Ø',p:'₱',q:'Q',r:'Ɽ',s:'₴',t:'₮',u:'Ʉ',v:'V',w:'₩',x:'Ӿ',y:'Ɏ',z:'Ⱬ'});
const asianStyle=charMap({a:'卂',b:'乃',c:'匚',d:'ᗪ',e:'乇',f:'千',g:'Ꮆ',h:'卄',i:'丨',j:'ﾌ',k:'Ҝ',l:'ㄥ',m:'爪',n:'几',o:'ㄖ',p:'卩',q:'Ɋ',r:'尺',s:'丂',t:'ㄒ',u:'ㄩ',v:'ᐯ',w:'山',x:'乂',y:'ㄚ',z:'乙'});
const russianStyle=charMap({a:'д',b:'б',c:'c',d:'д',e:'э',f:'f',g:'g',h:'н',i:'i',j:'j',k:'к',l:'l',m:'м',n:'и',o:'ф',p:'р',q:'q',r:'я',s:'$',t:'т',u:'ц',v:'v',w:'щ',x:'ж',y:'у',z:'z'});
const squiggle1=charMap({a:'ą',b:'ҍ',c:'ç',d:'ժ',e:'ҽ',f:'ƒ',g:'ց',h:'հ',i:'ì',j:'ʝ',k:'ҟ',l:'Ӏ',m:'ʍ',n:'ղ',o:'օ',p:'ք',q:'զ',r:'ɾ',s:'ʂ',t:'է',u:'մ',v:'վ',w:'ա',x:'× ',y:'վ',z:'Հ'});
const squiggle2=charMap({a:'ค',b:'๒',c:'ς',d:'๔',e:'є',f:'Ŧ',g:'ɠ',h:'ђ',i:'เ',j:'ן',k:'к',l:'ɭ',m:'๓',n:'ภ',o:'๏',p:'ק',q:'ợ',r:'г',s:'ร',t:'Շ',u:'ย',v:'ש',w:'ฬ',x:'א',y:'ץ',z:'չ'});
const squiggle3=charMap({a:'ǟ',b:'ɮ',c:'ƈ',d:'ɖ',e:'ɛ',f:'ʄ',g:'ɢ',h:'ɦ',i:'ɨ',j:'ʝ',k:'ӄ',l:'ʟ',m:'ʍ',n:'ռ',o:'օ',p:'ք',q:'զ',r:'ʀ',s:'ֆ',t:'ȶ',u:'ʊ',v:'ʋ',w:'ա',x:'Ӽ',y:'ʏ',z:'ʐ'});
const vaporwave=charMap({a:'ᗩ',b:'ᗷ',c:'ᑕ',d:'ᗪ',e:'E',f:'ᖴ',g:'G',h:'ᕼ',i:'I',j:'ᒍ',k:'K',l:'ᒪ',m:'ᗰ',n:'ᑎ',o:'O',p:'ᑭ',q:'ᑫ',r:'ᖇ',s:'ᔕ',t:'T',u:'ᑌ',v:'ᐯ',w:'ᗯ',x:'᙭',y:'Y',z:'ᘔ'});
const runic=charMap({a:'ᚨ',b:'ᛒ',c:'ᚲ',d:'ᛞ',e:'ᛖ',f:'ᚠ',g:'ᚷ',h:'ᚺ',i:'ᛁ',j:'ᛃ',k:'ᚴ',l:'ᛚ',m:'ᛗ',n:'ᚾ',o:'ᛟ',p:'ᛈ',q:'ᛩ',r:'ᚱ',s:'ᛊ',t:'ᛏ',u:'ᚢ',v:'ᚡ',w:'ᚹ',x:'ᛪ',y:'ᛦ',z:'ᛉ'});
const doubleUnder=s=>[...s].map(ch=>ch+'\u0333').join('');
const tildeOver=s=>[...s].map(ch=>ch+'\u0303').join('');
const arrowUnder=s=>[...s].map(ch=>ch+'\u034E').join('');
const zalgoLite=s=>{
const up=['\u0301','\u0302','\u0308','\u0342','\u0344'],dn=['\u0316','\u0325','\u032C','\u0330'];
let i=0;
return [...s].map(ch=>ch+up[i++%up.length]+dn[i%dn.length]).join('');
};
const mirror=s=>{
const m={a:'ɒ',b:'d',c:'ɔ',d:'b',e:'ɘ',f:'Ꮈ',g:'ǫ',h:'ʜ',i:'i',j:'ꞁ',k:'ʞ',l:'l',m:'m',n:'ᴎ',o:'o',p:'q',q:'p',r:'ɿ',s:'ꙅ',t:'ƚ',u:'u',v:'v',w:'w',x:'x',y:'ʏ',z:'ꙃ'};
return [...s.toLowerCase()].map(ch=>m[ch]||ch).reverse().join('');
};
/* decorative wrappers */
const wrap=(pre,post)=>s=>pre+s+post;
const STYLES=[
// classic
{n:'Bold',c:'classic',f:bold},
{n:'Italic',c:'classic',f:italic},
{n:'Bold Italic',c:'classic',f:boldItalic},
{n:'Sans Bold',c:'classic',f:sansBold},
{n:'Sans Italic',c:'classic',f:sansItalic},
{n:'Sans Bold Italic',c:'classic',f:sansBoldItalic},
{n:'Monospace',c:'classic',f:mono},
{n:'Fullwidth',c:'classic',f:fullwidth},
{n:'Small Caps',c:'classic',f:smallCaps},
{n:'Superscript',c:'classic',f:superscript},
// fancy
{n:'Script',c:'fancy',f:script},
{n:'Bold Script',c:'fancy',f:boldScript},
{n:'Fraktur',c:'fancy',f:fraktur},
{n:'Bold Fraktur',c:'fancy',f:boldFraktur},
{n:'Double Struck',c:'fancy',f:doubleStruck},
{n:'Circled',c:'fancy',f:circled},
{n:'Dark Circled',c:'fancy',f:negCircled},
{n:'Squared',c:'fancy',f:squared},
{n:'Dark Squared',c:'fancy',f:negSquared},
{n:'Upside Down',c:'fancy',f:upsideDown},
{n:'Strikethrough',c:'fancy',f:strike},
{n:'Underlined',c:'fancy',f:underline},
{n:'Slashed',c:'fancy',f:slash},
{n:'Cursed',c:'fancy',f:cursed},
{n:'S p a c e d',c:'fancy',f:spaced},
{n:'Dotted',c:'fancy',f:s=>dotted(s)},
// gaming
{n:'Royal Frame',c:'gaming',f:s=>'꧁༺ '+boldScript(s)+' ༻꧂'},
{n:'Pro Player',c:'gaming',f:s=>'꧁ ζ͜͡ '+bold(s)+' ꧂'},
{n:'Dragon Wings',c:'gaming',f:s=>'༆'+sansBold(s)+'༆'},
{n:'Fire Lord',c:'gaming',f:s=>'🔥『'+bold(s)+'』🔥'},
{n:'Sniper',c:'gaming',f:s=>'╾━╤デ╦︻ '+smallCaps(s)},
{n:'Boss Mode',c:'gaming',f:s=>'𖤍 '+boldFraktur(s)+' 𖤍'},
{n:'Dark Knight',c:'gaming',f:s=>'⚔️ '+negSquared(s)+' ⚔️'},
{n:'Legend',c:'gaming',f:s=>'『'+doubleStruck(s)+'』'},
{n:'Thunder',c:'gaming',f:s=>'⚡'+sansBoldItalic(s)+'⚡'},
{n:'Alpha Wolf',c:'gaming',f:s=>'亗 '+bold(s)+' 亗'},
{n:'Ghost',c:'gaming',f:s=>'꧁𓊈'+smallCaps(s)+'𓊉꧂'},
// cute
{n:'Hearts',c:'cute',f:s=>'♡ '+script(s)+' ♡'},
{n:'Sparkles',c:'cute',f:s=>'✨'+boldScript(s)+'✨'},
{n:'Flower Crown',c:'cute',f:s=>'✿ '+script(s)+' ✿'},
{n:'Butterfly',c:'cute',f:s=>'🦋 '+italic(s)+' 🦋'},
{n:'Star Girl',c:'cute',f:s=>'⋆˙⟡ '+smallCaps(s)+' ⟡˙⋆'},
{n:'Cloud Soft',c:'cute',f:s=>'☁️ '+superscript(s)+' ☁️'},
{n:'Moonlight',c:'cute',f:s=>'☾ '+script(s)+' ☽'},
{n:'Candy',c:'cute',f:s=>'🍭'+dotted(s)+'🍬'},
{n:'Angel',c:'cute',f:s=>'⋆｡°✩ '+italic(s)+' ✩°｡⋆'},
{n:'Kawaii',c:'cute',f:s=>'(◕‿◕) '+fullwidth(s)},
// advanced character sets
{n:'Greek Style',c:'fancy',f:greekStyle},
{n:'Currency',c:'fancy',f:currency},
{n:'Asian Style',c:'fancy',f:asianStyle},
{n:'Russian Style',c:'fancy',f:russianStyle},
{n:'Squiggle One',c:'fancy',f:squiggle1},
{n:'Squiggle Two',c:'fancy',f:squiggle2},
{n:'Squiggle Three',c:'fancy',f:squiggle3},
{n:'Vaporwave Caps',c:'fancy',f:vaporwave},
{n:'Runic',c:'fancy',f:runic},
{n:'Leet Speak',c:'fancy',f:leet},
{n:'Mirror',c:'fancy',f:mirror},
{n:'Parenthesized',c:'fancy',f:parenthesized},
{n:'Flag Letters',c:'fancy',f:regional},
{n:'Double Underline',c:'fancy',f:doubleUnder},
{n:'Wavy Tilde',c:'fancy',f:tildeOver},
{n:'Anchor Under',c:'fancy',f:arrowUnder},
{n:'Glitch Lite',c:'fancy',f:zalgoLite},
// advanced gaming frames
{n:'Emperor',c:'gaming',f:s=>'꧁☬'+boldFraktur(s)+'☬꧂'},
{n:'Venom',c:'gaming',f:s=>'꧁ঔৣ☠︎ '+bold(s)+' ☠︎ঔৣ꧂'},
{n:'Samurai',c:'gaming',f:s=>'⛩️'+asianStyle(s)+'⛩️'},
{n:'Viking',c:'gaming',f:s=>'᚛'+runic(s)+'᚜'},
{n:'Toxic',c:'gaming',f:s=>'☣︎ '+squiggle3(s)+' ☣︎'},
{n:'Reaper',c:'gaming',f:s=>'𖣘'+greekStyle(s)+'𖣘'},
{n:'Hydra',c:'gaming',f:s=>'༒'+bold(s)+'༒'},
{n:'Crossfire',c:'gaming',f:s=>'҉'+sansBold(s)+'҉'},
{n:'Shadow King',c:'gaming',f:s=>'亗『'+currency(s)+'』亗'},
{n:'Assassin',c:'gaming',f:s=>'⌁⌁ '+smallCaps(s)+' ⌁⌁'},
{n:'Immortal',c:'gaming',f:s=>'꧁࿇'+doubleStruck(s)+'࿇꧂'},
{n:'Storm Breaker',c:'gaming',f:s=>'⚡︎☈ '+vaporwave(s)+' ☈⚡︎'},
{n:'Crown Royal',c:'gaming',f:s=>'♛ '+boldScript(s)+' ♛'},
{n:'War Machine',c:'gaming',f:s=>'✠ '+boldFraktur(s)+' ✠'},
{n:'Phantom',c:'gaming',f:s=>'⌖'+negCircled(s)+'⌖'},
{n:'Rebel',c:'gaming',f:s=>'≪'+squiggle2(s)+'≫'},
// advanced cute / aesthetic
{n:'Aesthetic Wave',c:'cute',f:s=>'〜'+fullwidth(s)+'〜'},
{n:'Fairy Dust',c:'cute',f:s=>'⊹₊ ⋆ '+squiggle1(s)+' ⋆ ₊⊹'},
{n:'Ribbon',c:'cute',f:s=>'🎀 '+boldScript(s)+' 🎀'},
{n:'Cherry Blossom',c:'cute',f:s=>'𓍢ִ໋🌷͙֒ '+script(s)},
{n:'Ocean Pearl',c:'cute',f:s=>'𓆉︎ '+italic(s)+' 𓇼'},
{n:'Little Star',c:'cute',f:s=>'✩₊˚ '+smallCaps(s)+' ˚₊✩'},
{n:'Honey Bee',c:'cute',f:s=>'ʚ🍯ɞ '+script(s)},
{n:'Snowflake',c:'cute',f:s=>'❅ '+doubleStruck(s)+' ❅'},
{n:'Music Soul',c:'cute',f:s=>'♪♫ '+italic(s)+' ♫♪'},
{n:'Rainbow Arch',c:'cute',f:s=>'🌈 '+greekStyle(s)+' 🌈'},
{n:'Strawberry',c:'cute',f:s=>'⋆🍓 '+squiggle1(s)+' 🍓⋆'},
{n:'Dreamy',c:'cute',f:s=>'☾⋆⁺₊ '+script(s)+' ₊⁺⋆☽'},
// advanced classic
{n:'Wide Spaced Caps',c:'classic',f:s=>spaced(s.toUpperCase())},
{n:'Dot Caps',c:'classic',f:s=>dotted(smallCaps(s))},
{n:'Bracketed',c:'classic',f:s=>'【'+bold(s)+'】'},
{n:'Corner Frame',c:'classic',f:s=>'「'+sansBold(s)+'」'},
{n:'Double Angle',c:'classic',f:s=>'《'+italic(s)+'》'},
{n:'Heavy Frame',c:'classic',f:s=>'▐ '+sansBold(s)+' ▌'}
];
function render(){
const val=input.value.trim();
results.innerHTML='';
if(!val){
results.innerHTML=`<div class="empty"><div class="big">👆</div>Type your name above to see the magic ✨</div>`;
return;
}
const list=STYLES.filter(s=>currentCat==='all'||s.c===currentCat);
list.forEach((st,i)=>{
let out;
try{out=st.f(val);}catch(e){return;}
const card=document.createElement('div');
card.className='style-card';
card.style.setProperty('--i',i);
card.innerHTML=`<div class="label"><span></span><span class="copy-tag">Tap to copy</span></div><div class="preview"></div>`;
card.querySelector('.label span').textContent=st.n;
card.querySelector('.preview').textContent=out;
card.addEventListener('click',()=>copyText(out,card,st.n));
results.appendChild(card);
});
}
function copyText(text,card,name){
const done=()=>{
card.classList.add('copied');
card.querySelector('.copy-tag').textContent='Copied ✓';
setTimeout(()=>{card.classList.remove('copied');card.querySelector('.copy-tag').textContent='Tap to copy';},1600);
toast.innerHTML='<b>'+name+'</b> style copied — paste it anywhere!';
toast.classList.add('show');
clearTimeout(toast._t);
toast._t=setTimeout(()=>toast.classList.remove('show'),2200);
};
if(navigator.clipboard&&navigator.clipboard.writeText){
navigator.clipboard.writeText(text).then(done).catch(()=>fallback(text,done));
}else fallback(text,done);
}
function fallback(text,done){
const ta=document.createElement('textarea');
ta.value=text;ta.style.position='fixed';ta.style.opacity='0';
document.body.appendChild(ta);ta.select();
try{document.execCommand('copy');done();}catch(e){}
ta.remove();
}
document.querySelectorAll('.tab').forEach(t=>{
t.addEventListener('click',()=>{
document.querySelectorAll('.tab').forEach(x=>x.classList.remove('active'));
t.classList.add('active');
currentCat=t.dataset.cat;
render();
});
});
input.addEventListener('input',render);
clearBtn.addEventListener('click',()=>{input.value='';render();input.focus();});
render();
})();
</script>
</body>
</html>
