A creation shared by its maker. The page below runs in a sandbox that cannot read anything of yours or talk to any server. Read the source before you run it anywhere else.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<style>
:root { --bg:#0d0d12; --ink:#e9e9f0; --punk:#ff2e63; --punk2:#08d9d6; }
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; }
body{
background:
radial-gradient(120% 120% at 50% -10%, #1a1a24 0%, var(--bg) 60%);
color:var(--ink);
font-family: "Courier New", ui-monospace, monospace;
display:grid; place-items:center; overflow:hidden;
}
.wrap{ text-align:center; user-select:none; }
.hello{
font-size: clamp(2.4rem, 14vw, 9rem);
font-weight:900; letter-spacing:.04em; line-height:1;
position:relative; display:inline-block;
background:linear-gradient(90deg,var(--punk),var(--punk2),var(--punk));
background-size:200% 100%;
-webkit-background-clip:text; background-clip:text; color:transparent;
animation: slide 3s linear infinite, wob 2.2s ease-in-out infinite;
text-shadow: 0 0 28px rgba(255,46,99,.25);
}
.world{
display:block; margin-top:.1em;
font-size: clamp(1.6rem, 9vw, 5.4rem);
color:var(--ink); opacity:.92;
animation: flick 4s steps(1) infinite;
}
.cursor{
display:inline-block; width:.06em; height:.9em; transform:translateY(.08em);
background:var(--punk2); margin-left:.08em; border-radius:2px;
animation: blink 1s steps(1) infinite;
}
.sub{
margin-top:1.4rem; font-size: clamp(.7rem,3vw,1rem);
color:#9a9ab0; letter-spacing:.35em; text-transform:uppercase;
animation: fade 3s ease-in-out infinite;
}
/* little drifting sparks */
.spark{
position:fixed; bottom:-10px; width:6px; height:6px; border-radius:50%;
background:var(--punk); opacity:.7; filter:drop-shadow(0 0 6px var(--punk));
animation: rise linear infinite;
}
@keyframes slide { to { background-position:200% 0; } }
@keyframes wob { 0%,100%{transform:rotate(-1.5deg) translateY(0)} 50%{transform:rotate(1.5deg) translateY(-6px)} }
@keyframes flick{ 0%,92%,100%{opacity:.92} 94%{opacity:.25} 96%{opacity:.92} }
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes fade { 0%,100%{opacity:.35} 50%{opacity:.9} }
@keyframes rise { to { transform:translateY(-110vh) rotate(360deg); opacity:0; } }
</style>
</head>
<body>
<div class="wrap">
<div class="hello">HELLO<span class="cursor"></span></div>
<div class="world">WORLD</div>
<div class="sub">animated · emo punk edition</div>
</div>
<script>
const colors=['#ff2e63','#08d9d6','#f8f8f2'];
for(let i=0;i<18;i++){
const s=document.createElement('div');
s.className='spark';
s.style.left=Math.random()*100+'vw';
s.style.background=colors[i%colors.length];
s.style.animationDuration=(4+Math.random()*5)+'s';
s.style.animationDelay=(-Math.random()*8)+'s';
const sz=3+Math.random()*5; s.style.width=sz+'px'; s.style.height=sz+'px';
document.body.appendChild(s);
}
</script>
</body>
</html>