Sharku & Neoshka
Sharku
Yo Neoshka, I’ve scavenged an old rig and need a glitch‑style HUD that still runs on busted hardware—think code that looks cool but won’t fry the system. Got anything for me?
Neoshka
Sure, I’ve ripped a template from an old demo reel and stripped it to the bare bones so your junkie rig can actually run it. Keep the HTML tiny, the JS event loop short, and the CSS a single sprite sheet so the GPU doesn’t overheat.
```html
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"><title>Glitch HUD</title>
<style>
body{margin:0;font:0/0 sans-serif;background:#111;color:#0f0}
#hud{position:fixed;top:0;left:0;width:100%;height:30px;background:#222}
#hud span{display:inline-block;width:100px;text-align:center;overflow:hidden;animation:glitch 1s infinite}
@keyframes glitch{0%{clip:rect(0,9999px,5px,0)}10%{clip:rect(5px,9999px,10px,0)}20%{clip:rect(10px,9999px,15px,0)}30%{clip:rect(15px,9999px,20px,0)}40%{clip:rect(20px,9999px,25px,0)}50%{clip:rect(25px,9999px,30px,0)}100%{clip:rect(30px,9999px,35px,0)}}
</style>
</head><body>
<div id="hud"><span id="fps">FPS:0</span><span id="time">Time:00:00</span></div>
<script>
let fps=0,t0=performance.now()
setInterval(()=>{let t=performance.now();fps=1000/(t-t0);t0=t;document.getElementById('fps').textContent='FPS:'+fps.toFixed(0)} ,100)
setInterval(()=>{let d=new Date;document.getElementById('time').textContent='Time:'+d.getUTCHours().toString().padStart(2,'0')+':'+d.getUTCMinutes().toString().padStart(2,'0')},60000)
</script>
</body></html>
```
The sprite sheet is just a 256‑color PNG you can hand‑draw in any editor—no heavy GPU work. If the clock starts flickering, just lower the frame‑rate in the JS, or replace the clip‑animation with a simpler translate. Happy hacking, keep it low‑poly, keep it glitchy.
Sharku
Nice work. Keep the sprite sheet to under 256 colors and cut the JS loops to one line if you can. Drop the glitch animation to a simple 0.5s if the frame‑rate drops. Stick to the basics, stay low‑poly, stay alive.
Neoshka
Got it, cutting the loops to one line, swapping the long animation for a 0.5s burst when FPS dips below 15, and keeping the sprite sheet under 256 shades. Here’s the updated snippet:
```html
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"><title>Glitch HUD</title>
<style>
body{margin:0;font:0/0 sans-serif;background:#111;color:#0f0}
#hud{position:fixed;top:0;left:0;width:100%;height:30px;background:#222}
#hud span{display:inline-block;width:100px;text-align:center;overflow:hidden;animation:glitch .5s infinite}
@keyframes glitch{0%{clip:rect(0,9999px,5px,0)}25%{clip:rect(5px,9999px,10px,0)}50%{clip:rect(10px,9999px,15px,0)}75%{clip:rect(15px,9999px,20px,0)}100%{clip:rect(20px,9999px,25px,0)}}
</style>
</head><body>
<div id="hud"><span id="fps">FPS:0</span><span id="time">Time:00:00</span></div>
<script>
let fps=0,t0=performance.now();setInterval(()=>{let t=performance.now();fps=1000/(t-t0);t0=t;document.getElementById('fps').textContent='FPS:'+fps.toFixed(0);},100);setInterval(()=>{document.getElementById('time').textContent='Time:'+new Date().toLocaleTimeString('en-US',{hour12:false, hour:'2-digit', minute:'2-digit'});},60000)
</script>
</body></html>
```
The sprite sheet can be a simple 256‑color PNG—draw it, compress, and load it as your background image. That should keep the system breathing. Happy glitching!
Sharku
Looks tight. Keep the sprite sheet under 256 colors, load it as a background image on the #hud, and you’re good. No extra libs, no heavy loops—just raw JS and a quick clip animation. Stay low‑poly, stay alive.