Helix
React + Tailwind
const css = `
@keyframes toggle-helix-twist { 0% { transform: scaleY(1); } 50% { transform: scaleY(-1); } 100% { transform: scaleY(1); } }
.toggle-helix { position: relative; display: inline-flex; align-items: center; gap: 12px; color: light-dark(#42454c, #e5e6e9); font-size: 14px; cursor: pointer; user-select: none; }
.toggle-helix__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.toggle-helix__track {
position: relative;
width: 88px;
height: 34px;
border-radius: 999px;
background: light-dark(#f3f4f7, #1a1c1f);
box-shadow: inset 0 0 0 1px light-dark(#dbdde1, #2e3035);
}
.toggle-helix__input:focus-visible + .toggle-helix__track { outline: 2px solid light-dark(#5f626a, #a7abb2); outline-offset: 3px; }
.toggle-helix__rung {
position: absolute;
top: 8px;
bottom: 8px;
width: 2px;
background: light-dark(#dbdde1, #2e3035);
transition: background-color 0.3s;
}
.toggle-helix__rung::before, .toggle-helix__rung::after {
content: '';
position: absolute;
left: -1.5px;
width: 5px;
height: 5px;
border-radius: 50%;
transition: background-color 0.3s;
}
.toggle-helix__rung::before { top: -3px; background: light-dark(#5f626a, #a7abb2); }
.toggle-helix__rung::after { bottom: -3px; background: light-dark(#cbced3, #393c41); }
/* Off, the strands lie flat and parallel. On, each rung turns a little behind the last, so the ladder twists into a helix. */
.toggle-helix__input:checked + .toggle-helix__track .toggle-helix__rung {
background: light-dark(#6d7179, #7d8087);
animation: toggle-helix-twist 1.8s ease-in-out infinite;
animation-delay: calc(var(--i) * -0.14s);
}
.toggle-helix__input:checked + .toggle-helix__track .toggle-helix__rung::before { background: light-dark(#373a40, #f1f2f3); }
.toggle-helix__input:checked + .toggle-helix__track .toggle-helix__rung::after { background: light-dark(#50535b, #c6c8cd); }
@media (prefers-reduced-motion: reduce) {
.toggle-helix__input:checked + .toggle-helix__track .toggle-helix__rung { animation: none; }
}
`;
export function HelixToggle() {
return (
<>
<style>
{css}
</style>
<label className="toggle-helix">
<input className="toggle-helix__input" type="checkbox" role="switch" />
<span className="toggle-helix__track" aria-hidden="true">
{Array.from({ length: 11 }, (_, i) => (
<span key={i} className="toggle-helix__rung" style={{ left: 13 + i * 6.2, '--i': i } as React.CSSProperties} />
))}
</span>
Sync
</label>
</>
);
}Markup where the component goes, CSS in your stylesheet. No JavaScript.
HTML
<label class="toggle-helix"><input class="toggle-helix__input" type="checkbox" role="switch"/><span class="toggle-helix__track" aria-hidden="true"><span class="toggle-helix__rung" style="left:13px;--i:0"></span><span class="toggle-helix__rung" style="left:19.2px;--i:1"></span><span class="toggle-helix__rung" style="left:25.4px;--i:2"></span><span class="toggle-helix__rung" style="left:31.6px;--i:3"></span><span class="toggle-helix__rung" style="left:37.8px;--i:4"></span><span class="toggle-helix__rung" style="left:44px;--i:5"></span><span class="toggle-helix__rung" style="left:50.2px;--i:6"></span><span class="toggle-helix__rung" style="left:56.4px;--i:7"></span><span class="toggle-helix__rung" style="left:62.6px;--i:8"></span><span class="toggle-helix__rung" style="left:68.80000000000001px;--i:9"></span><span class="toggle-helix__rung" style="left:75px;--i:10"></span></span>Sync</label>CSS
@keyframes toggle-helix-twist { 0% { transform: scaleY(1); } 50% { transform: scaleY(-1); } 100% { transform: scaleY(1); } }
.toggle-helix { position: relative; display: inline-flex; align-items: center; gap: 12px; color: light-dark(#42454c, #e5e6e9); font-size: 14px; cursor: pointer; user-select: none; }
.toggle-helix__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.toggle-helix__track {
position: relative;
width: 88px;
height: 34px;
border-radius: 999px;
background: light-dark(#f3f4f7, #1a1c1f);
box-shadow: inset 0 0 0 1px light-dark(#dbdde1, #2e3035);
}
.toggle-helix__input:focus-visible + .toggle-helix__track { outline: 2px solid light-dark(#5f626a, #a7abb2); outline-offset: 3px; }
.toggle-helix__rung {
position: absolute;
top: 8px;
bottom: 8px;
width: 2px;
background: light-dark(#dbdde1, #2e3035);
transition: background-color 0.3s;
}
.toggle-helix__rung::before, .toggle-helix__rung::after {
content: '';
position: absolute;
left: -1.5px;
width: 5px;
height: 5px;
border-radius: 50%;
transition: background-color 0.3s;
}
.toggle-helix__rung::before { top: -3px; background: light-dark(#5f626a, #a7abb2); }
.toggle-helix__rung::after { bottom: -3px; background: light-dark(#cbced3, #393c41); }
/* Off, the strands lie flat and parallel. On, each rung turns a little behind the last, so the ladder twists into a helix. */
.toggle-helix__input:checked + .toggle-helix__track .toggle-helix__rung {
background: light-dark(#6d7179, #7d8087);
animation: toggle-helix-twist 1.8s ease-in-out infinite;
animation-delay: calc(var(--i) * -0.14s);
}
.toggle-helix__input:checked + .toggle-helix__track .toggle-helix__rung::before { background: light-dark(#373a40, #f1f2f3); }
.toggle-helix__input:checked + .toggle-helix__track .toggle-helix__rung::after { background: light-dark(#50535b, #c6c8cd); }
@media (prefers-reduced-motion: reduce) {
.toggle-helix__input:checked + .toggle-helix__track .toggle-helix__rung { animation: none; }
}Goal: Create a "Helix" toggle.
Visual behavior: A sync switch: off, two strands lie flat and parallel; on, they twist into a turning double helix.
Technique:
- A real native checkbox with role="switch" (visually hidden: absolute, 1x1, opacity 0) inside a <label>; every visual is aria-hidden and styled from the input with :checked + sibling selectors.
- Eleven rungs, each a line with two end dots (::before and ::after).
- On, every rung runs scaleY(1 to -1 to 1) on a loop with a delay of -0.14s per index; passing through zero swaps the dots, so the ladder reads as a twisting helix.
Accessibility: A native checkbox with role="switch" inside a <label>, so Space toggles it and screen readers announce a switch; the visible label names it and :focus-visible on the input outlines the visual. Under prefers-reduced-motion the strands stay flat.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
My colors: neutral only. Black, white and grays, no hues. Use the color values above as written, or my project's closest neutral tokens.
Return a single self-contained component. No dependencies.Goal: Create a "Helix" toggle.
Visual behavior: A sync switch: off, two strands lie flat and parallel; on, they twist into a turning double helix.
Technique:
- A real native checkbox with role="switch" (visually hidden: absolute, 1x1, opacity 0) inside a <label>; every visual is aria-hidden and styled from the input with :checked + sibling selectors.
- Eleven rungs, each a line with two end dots (::before and ::after).
- On, every rung runs scaleY(1 to -1 to 1) on a loop with a delay of -0.14s per index; passing through zero swaps the dots, so the ladder reads as a twisting helix.
Accessibility: A native checkbox with role="switch" inside a <label>, so Space toggles it and screen readers announce a switch; the visible label names it and :focus-visible on the input outlines the visual. Under prefers-reduced-motion the strands stay flat.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
My colors: use my project's existing color tokens. The color values above are grayscale placeholders. Map each one by its role (surface, text, border, accent, glow) to my theme, and keep their relative lightness so contrast and the effect still read.
Return a single self-contained component. No dependencies.Paste into Claude, ChatGPT or Cursor after filling in {{USER_STACK}}, {{USER_STYLING}} and {{USER_CONSTRAINTS}}. Neutral keeps the greys you see here; Match my project asks the model to map them onto your own colour tokens.
Free to use in any project, commercial included. MIT-0, no attribution required. Licence
About this component
A sync switch: off, two strands lie flat and parallel; on, they twist into a turning double helix.
- Dependencies
- None
- Difficulty
- Beginner
- Triggers
- click, state change, continuous, delay stagger
- Techniques
- keyframes, css variables, pseudo elements
- Reduced motion
- Respected
- Theme
- Light and dark (follows your page's color-scheme)
A native checkbox with role="switch" inside a <label>, so Space toggles it and screen readers announce a switch; the visible label names it and :focus-visible on the input outlines the visual. Under prefers-reduced-motion the strands stay flat.