Holo Cube
A 3D rotating cube with translucent holographic faces and a status label. Great for modern loading screens, tech-forward splash pages, or any situation where you want a futuristic waiting indicator.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
3dcubeloaderholographicrotation
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A 3D rotating cube loader with holographic faces and status text for modern loading states.
CSS
css
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
height: 220px;
box-sizing: border-box;
background: #0f0f0f;
color: #e5e7eb;
font-family: system-ui, sans-serif;
}
.cube {
position: relative;
width: 30px;
height: 30px;
transform-style: preserve-3d;
}
.face {
position: absolute;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e5e7eb;
transform-style: preserve-3d;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.face svg {
width: 50px;
height: 50px;
stroke: #e5e7eb;
}HTML
html
<div class="cube" id="cube">
<div class="face" style="transform: rotateY(0deg) translateZ(15px);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
<div class="face" style="transform: rotateY(180deg) translateZ(15px);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
<div class="face" style="transform: rotateY(90deg) translateZ(15px);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
<div class="face" style="transform: rotateY(-90deg) translateZ(15px);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
<div class="face" style="transform: rotateX(90deg) translateZ(15px);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
<div class="face" style="transform: rotateX(-90deg) translateZ(15px);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
</div>Full Source
html
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
height: 220px;
box-sizing: border-box;
background: #0f0f0f;
color: #e5e7eb;
font-family: system-ui, sans-serif;
}
.cube {
position: relative;
width: 30px;
height: 30px;
transform-style: preserve-3d;
}
.face {
position: absolute;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e5e7eb;
transform-style: preserve-3d;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.face svg {
width: 50px;
height: 50px;
stroke: #e5e7eb;
}
</style>
</head>
<body>
<div class="cube" id="cube">
<div class="face" style="transform: rotateY(0deg) translateZ(15px);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
<div class="face" style="transform: rotateY(180deg) translateZ(15px);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
<div class="face" style="transform: rotateY(90deg) translateZ(15px);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
<div class="face" style="transform: rotateY(-90deg) translateZ(15px);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
<div class="face" style="transform: rotateX(90deg) translateZ(15px);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
<div class="face" style="transform: rotateX(-90deg) translateZ(15px);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
</div>
<script>
var speed = 5;
var time = 0;
var cube = document.getElementById("cube");
setInterval(function() {
time += 0.02 * speed;
cube.style.transform = "rotateY(" + (time * 30) + "deg) rotateX(" + (time * 30) + "deg)";
}, 16);
</script>
</body>
</html>