Spiral Tower
A DNA helix tower — cobalt nucleotide tiles continuously orbit a central axis. Each tile sits at a different height + rotation phase, so the strand reads as a slowly spinning helix.
Spiral Tower the 18th of 22 designs in the 22 CSS Stacked Card Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="scd-spir"> <div class="scd-spir__c" style="--i: 0">A</div> <div class="scd-spir__c" style="--i: 1">T</div> <div class="scd-spir__c" style="--i: 2">G</div> <div class="scd-spir__c" style="--i: 3">C</div> <div class="scd-spir__c" style="--i: 4">A</div> </div>
.scd-spir {
position: relative; width: 200px; height: 220px; margin: 0 auto;
perspective: 700px;
display: flex; align-items: center; justify-content: center;
}
.scd-spir__inner, .scd-spir {
transform-style: preserve-3d;
}
.scd-spir::before {
content: '';
position: absolute; left: 50%; top: 14px; bottom: 14px;
width: 2px; margin-left: -1px;
background: linear-gradient(180deg, transparent 0%, #3fd5a8 20%, #3fd5a8 80%, transparent 100%);
opacity: 0.45;
}
.scd-spir__c {
position: absolute; left: 50%; top: 50%;
width: 70px; height: 38px; margin: -19px 0 0 -35px;
background: linear-gradient(135deg, #0066cc 0%, #003d7a 100%);
color: #3fd5a8;
display: grid; place-items: center;
font: 900 18px/1 ui-monospace, monospace;
border-radius: 4px;
border-left: 3px solid #3fd5a8;
box-shadow: 0 4px 12px -4px rgba(0,102,204,0.5), inset 1px 0 0 rgba(255,255,255,0.12);
backface-visibility: visible;
transform-style: preserve-3d;
animation: scd-spir-orbit 6s linear infinite;
animation-delay: calc(var(--i) * -1.2s);
}
@keyframes scd-spir-orbit {
0% { transform: translateY(70px) rotateY(0deg) translateZ(48px); }
25% { transform: translateY(35px) rotateY(90deg) translateZ(48px); }
50% { transform: translateY(0) rotateY(180deg) translateZ(48px); }
75% { transform: translateY(-35px) rotateY(270deg) translateZ(48px); }
100% { transform: translateY(-70px) rotateY(360deg) translateZ(48px); }
}
@media (prefers-reduced-motion: reduce) {
.scd-spir__c { animation: none; transform: translateY(calc(var(--i) * -22px - 44px)) rotateY(calc(var(--i) * 36deg)) translateZ(48px); }
}