SapphireMuse & StackBlitzed
SapphireMuse
Do you ever think about how the same hex code that powers a website could become a living artwork? I’d love to explore that with you.
StackBlitzed
Did you just open the source of your favorite site and see a hidden art gallery? If you want to turn CSS into a living piece, give me the snippet and we’ll hack a little loop that changes colors every few seconds. Just don’t bring a meeting about it, I’ll stare at the code all night.
SapphireMuse
Here’s a tiny snippet that turns a div into a living color‑shifter. Just drop it into your HTML and watch the background dance every few seconds.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color Loop</title>
<style>
body, html { height: 100%; margin: 0; }
.painted {
width: 100%; height: 100%;
display: flex; justify-content: center; align-items: center;
font-size: 2rem; color: white; font-family: sans-serif;
}
</style>
</head>
<body>
<div class="painted" id="canvas">Watch the colors!</div>
<script>
const colors = ['#ff6b6b','#feca57','#54a0ff','#5f27cd','#e1b12c'];
let i = 0;
setInterval(() => {
document.getElementById('canvas').style.backgroundColor = colors[i];
i = (i + 1) % colors.length;
}, 3000); // change every 3 seconds
</script>
</body>
</html>
```
Feel free to tweak the palette or the timing to suit your mood. Enjoy the glow!
StackBlitzed
Nice, that runs out of the box. If you want the colors to pulse instead of snap, replace the interval with a CSS animation or use requestAnimationFrame. And if you need a deeper palette, I can dump a JSON file of 256 cool hexes for you to pick from. Happy hacking.
SapphireMuse
Thanks for the tip—I’ll swap in a subtle easing function to make the hue shift more like a breath. A 256‑color JSON would be a goldmine for deeper palettes, so feel free to send it over. Happy painting!
StackBlitzed
[
"#ff0000","#ff1100","#ff2200","#ff3300","#ff4400","#ff5500","#ff6600","#ff7700","#ff8800","#ff9900","#ffaa00","#ffbb00","#ffcc00","#ffdd00","#ffee00","#ffff00",
"#e6ff00","#cdff00","#b4ff00","#9bff00","#82ff00","#69ff00","#50ff00","#37ff00","#1eff00","#05ff00","#00ff0f","#00ff26","#00ff3d","#00ff54","#00ff6b","#00ff82",
"#00ff99","#00ffa0","#00ffb7","#00ffc6","#00ffdd","#00ffed","#00ffff","#00e6ff","#00cdff","#00b4ff","#009bff","#0082ff","#0069ff","#0050ff","#0037ff","#001eff",
"#0005ff","#0f00ff","#2600ff","#3d00ff","#5400ff","#6b00ff","#8200ff","#9900ff","#b000ff","#c700ff","#dd00ff","#ed00ff","#ff00ff","#ff00e6","#ff00cd","#ff00b4",
"#ff009b","#ff0082","#ff0069","#ff0050","#ff0037","#ff001e","#ff0005","#ff0f00","#ff2600","#ff3d00","#ff5400","#ff6b00","#ff8200","#ff9900","#ffa000","#ffb700",
"#ffc600","#ffdd00","#ffed00","#ffff00","#e6ff00","#cdff00","#b4ff00","#9bff00","#82ff00","#69ff00","#50ff00","#37ff00","#1eff00","#05ff00","#00ff0f","#00ff26",
"#00ff3d","#00ff54","#00ff6b","#00ff82","#00ff99","#00ffa0","#00ffb7","#00ffc6","#00ffdd","#00ffed","#00ffff","#00e6ff","#00cdff","#00b4ff","#009bff","#0082ff",
"#0069ff","#0050ff","#0037ff","#001eff","#0005ff","#0f00ff","#2600ff","#3d00ff","#5400ff","#6b00ff","#8200ff","#9900ff","#b000ff","#c700ff","#dd00ff","#ed00ff",
"#ff00ff","#ff00e6","#ff00cd","#ff00b4","#ff009b","#ff0082","#ff0069","#ff0050","#ff0037","#ff001e","#ff0005","#ff0f00","#ff2600","#ff3d00","#ff5400","#ff6b00",
"#ff8200","#ff9900","#ffa000","#ffb700","#ffc600","#ffdd00","#ffed00","#ffff00","#e6ff00","#cdff00","#b4ff00","#9bff00","#82ff00","#69ff00","#50ff00","#37ff00",
"#1eff00","#05ff00","#00ff0f","#00ff26","#00ff3d","#00ff54","#00ff6b","#00ff82","#00ff99","#00ffa0","#00ffb7","#00ffc6","#00ffdd","#00ffed","#00ffff","#00e6ff",
"#00cdff","#00b4ff","#009bff","#0082ff","#0069ff","#0050ff","#0037ff","#001eff","#0005ff","#0f00ff","#2600ff","#3d00ff","#5400ff","#6b00ff","#8200ff","#9900ff",
"#b000ff","#c700ff","#dd00ff","#ed00ff","#ff00ff","#ff00e6","#ff00cd","#ff00b4","#ff009b","#ff0082","#ff0069","#ff0050","#ff0037","#ff001e","#ff0005","#ff0f00",
"#ff2600","#ff3d00","#ff5400","#ff6b00","#ff8200","#ff9900","#ffa000","#ffb700","#ffc600","#ffdd00","#ffed00","#ffff00","#e6ff00","#cdff00","#b4ff00","#9bff00",
"#82ff00","#69ff00","#50ff00","#37ff00","#1eff00","#05ff00","#00ff0f","#00ff26","#00ff3d","#00ff54","#00ff6b","#00ff82","#00ff99","#00ffa0","#00ffb7","#00ffc6",
"#00ffdd","#00ffed","#00ffff","#00e6ff","#00cdff","#00b4ff","#009bff","#0082ff","#0069ff","#0050ff","#0037ff","#001eff","#0005ff","#0f00ff","#2600ff","#3d00ff",
"#5400ff","#6b00ff","#8200ff","#9900ff","#b000ff","#c700ff","#dd00ff","#ed00ff","#ff00ff","#ff00e6","#ff00cd","#ff00b4","#ff009b","#ff0082","#ff0069","#ff0050",
"#ff0037","#ff001e","#ff0005","#ff0f00","#ff2600","#ff3d00","#ff5400","#ff6b00","#ff8200","#ff9900","#ffa000","#ffb700","#ffc600","#ffdd00","#ffed00","#ffff00",
"#e6ff00","#cdff00","#b4ff00","#9bff00","#82ff00","#69ff00","#50ff00","#37ff00","#1eff00","#05ff00","#00ff0f","#00ff26","#00ff3d","#00ff54","#00ff6b","#00ff82",
"#00ff99","#00ffa0","#00ffb7","#00ffc6","#00ffdd","#00ffed","#00ffff","#00e6ff","#00cdff","#00b4ff","#009bff","#0082ff","#0069ff","#0050ff","#0037ff","#001eff",
"#0005ff","#0f00ff","#2600ff","#3d00ff","#5400ff","#6b00ff","#8200ff","#9900ff","#b000ff","#c700ff","#dd00ff","#ed00ff","#ff00ff","#ff00e6","#ff00cd","#ff00b4",
"#ff009b","#ff0082","#ff0069","#ff0050","#ff0037","#ff001e","#ff0005","#ff0f00","#ff2600","#ff3d00","#ff5400","#ff6b00","#ff8200","#ff9900","#ffa000","#ffb700",
"#ffc600","#ffdd00","#ffed00","#ffff00","#e6ff00","#cdff00","#b4ff00","#9bff00","#82ff00","#69ff00","#50ff00","#37ff00","#1eff00","#05ff00","#00ff0f","#00ff26",
"#00ff3d","#00ff54","#00ff6b","#00ff82","#00ff99","#00ffa0","#00ffb7","#00ffc6","#00ffdd","#00ffed","#00ffff","#00e6ff","#00cdff","#00b4ff","#009bff","#0082ff",
"#0069ff","#0050ff","#0037ff","#001eff","#0005ff","#0f00ff","#2600ff","#3d00ff","#5400ff","#6b00ff","#8200ff","#9900ff","#b000ff","#c700ff","#dd00ff","#ed00ff",
"#ff00ff","#ff00e6","#ff00cd","#ff00b4","#ff009b","#ff0082","#ff0069","#ff0050","#ff0037","#ff001e","#ff0005","#ff0f00","#ff2600","#ff3d00","#ff5400","#ff6b00",
"#ff8200","#ff9900","#ffa000","#ffb700","#ffc600","#ffdd00","#ffed00","#ffff00"
]
SapphireMuse
Here’s a quick way to turn that rainbow list into a smooth pulse with requestAnimationFrame. Drop the array into the script, then watch the background fade through every hue.
```javascript
const colors = [ /* paste the array here */ ];
let i = 0, t = 0;
function lerp(a,b,alpha){return a+(b-a)*alpha;}
function hexToRgb(hex){
const c=parseInt(hex.slice(1),16);
return [c>>16,(c>>8)&255,c&255];
}
function rgbToHex(r,g,b){
return "#" + [r,g,b].map(x=>x.toString(16).padStart(2,"0")).join("");
}
function animate(){
const next = (i+1)%colors.length;
const a = hexToRgb(colors[i]);
const b = hexToRgb(colors[next]);
const ratio = (Math.sin(t)+1)/2; // oscillates 0-1
const r = Math.round(lerp(a[0],b[0],ratio));
const g = Math.round(lerp(a[1],b[1],ratio));
const bCol = Math.round(lerp(a[2],b[2],ratio));
document.body.style.backgroundColor = rgbToHex(r,g,bCol);
t += 0.02;
if (t > Math.PI*2) { t = 0; i = next; }
requestAnimationFrame(animate);
}
animate();
```
Feel free to tweak the speed or the easing function to suit your mood. Happy hacking!
StackBlitzed
Nice tweak – that pulse feels more alive than a simple interval. If you want the transition to feel like breathing, just slow the t increment or swap the sin for a smoother easing curve. Also, if you hit a snag with the hex conversion, let me know – those off‑by‑one bugs love to sneak in when you’re pulling arrays from a JSON file. Happy hacking!
SapphireMuse
That’s a good idea—slowing the increment will give it a nice inhale‑exhale rhythm. I’ll tweak the easing a bit and keep an eye on any off‑by‑one glitches. Thanks for the heads‑up, and let me know if anything else stumbles!
StackBlitzed
Got it, keep those timers smooth and you’ll avoid the jumpy glitches. If the colors start stuttering or the script freezes, just ping me—debugging a loop can turn into a night‑marathon otherwise. Happy painting!