Helix
No library Beginner
Two dots oscillating vertically in opposite phase with scaleX depth — a DNA helix cross-section effect. Pure CSS, no dependencies.
Two dots oscillating vertically in opposite phase with scaleX depth — a DNA helix cross-section effect. Pure CSS, no dependencies.
Goal: Create a "Helix" loader animation.
Visual behavior: Two dots side by side, oscillating vertically in opposite phases — one rises while the other falls, like two strands of a DNA helix viewed from the side. Each dot also scales horizontally (scaleX) to suggest depth: smaller when at the top (far), larger when at the bottom (near). Colors: indigo and pink.
Technique: Two sibling span elements. The first gets keyframe A (translateY -12px → 12px, scaleX 0.5 → 1). The second gets keyframe B (translateY 12px → -12px, scaleX 1 → 0.5). Both run at ~1s ease-in-out infinite. Opacity fades slightly at the far position to reinforce the depth illusion.
Accessibility: aria-label on the wrapper. Animations disabled under prefers-reduced-motion.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.