Sign
React + Tailwind
import { useState } from 'react';
const css = `
@keyframes toggle-sign-swing-a { 0% { transform: rotate(0deg); } 18% { transform: rotate(7deg); } 40% { transform: rotate(-5deg); } 62% { transform: rotate(3deg); } 82% { transform: rotate(-1.5deg); } 100% { transform: rotate(0deg); } }
@keyframes toggle-sign-swing-b { 0% { transform: rotate(0deg); } 18% { transform: rotate(-7deg); } 40% { transform: rotate(5deg); } 62% { transform: rotate(-3deg); } 82% { transform: rotate(1.5deg); } 100% { transform: rotate(0deg); } }
.toggle-sign { display: inline-flex; align-items: center; gap: 14px; color: light-dark(#42454c, #e5e6e9); font-size: 15px; cursor: pointer; user-select: none; }
.toggle-sign__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.toggle-sign__art { position: relative; display: block; width: 92px; height: 78px; border-radius: 8px; }
.toggle-sign__input:focus-visible + .toggle-sign__art { outline: 2px solid light-dark(#5f626a, #a7abb2); outline-offset: 4px; }
.toggle-sign__nail { position: absolute; left: 43px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: light-dark(#6d7179, #7d8087); box-shadow: 0 1px 2px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.4)); z-index: 1; }
.toggle-sign__swing { position: absolute; inset: 0; transform-origin: 46px 6px; }
.toggle-sign[data-flip='a'] .toggle-sign__swing { animation: toggle-sign-swing-a 1.6s ease-out 0.35s; }
.toggle-sign[data-flip='b'] .toggle-sign__swing { animation: toggle-sign-swing-b 1.6s ease-out 0.35s; }
.toggle-sign__string { position: absolute; left: 0; top: 0; width: 92px; height: 34px; overflow: visible; }
.toggle-sign__string path { fill: none; stroke: light-dark(#5f626a, #a7abb2); stroke-width: 1.2; }
/* The board turns on its string. One and a half turns brings the other face round. */
.toggle-sign__board { position: absolute; left: 14px; top: 30px; width: 64px; height: 32px; perspective: 240px; }
.toggle-sign__spin { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(0.25, 0.8, 0.35, 1); }
.toggle-sign__face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; backface-visibility: hidden; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, light-dark(#373a40, #f1f2f3) 14%, transparent), 0 3px 6px -2px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.45)); }
.toggle-sign__face--closed { background: light-dark(#dbdde1, #2e3035); color: light-dark(#50535b, #c6c8cd); }
.toggle-sign__face--open { background: light-dark(#373a40, #f1f2f3); color: light-dark(#fbfcfd, #121417); transform: rotateY(180deg); }
.toggle-sign__input:checked + .toggle-sign__art .toggle-sign__spin { transform: rotateY(540deg); }
@media (prefers-reduced-motion: reduce) {
.toggle-sign__spin { transition: none; }
.toggle-sign[data-flip] .toggle-sign__swing { animation: none; }
}
`;
export function SignToggle() {
// Each change flips data-flip between a and b, so the swing replays even on a quick second press.
const [flip, setFlip] = useState(0);
return (
<>
<style>
{css}
</style>
<label className="toggle-sign" data-flip={flip ? (flip % 2 ? 'a' : 'b') : undefined}>
<input className="toggle-sign__input" type="checkbox" role="switch" onChange={() => setFlip((f) => f + 1)} />
<span className="toggle-sign__art" aria-hidden="true">
<span className="toggle-sign__swing">
<svg className="toggle-sign__string" viewBox="0 0 92 34">
<path d="M46 6L24 31M46 6L68 31" />
</svg>
<span className="toggle-sign__board">
<span className="toggle-sign__spin">
<span className="toggle-sign__face toggle-sign__face--closed">CLOSED</span>
<span className="toggle-sign__face toggle-sign__face--open">OPEN</span>
</span>
</span>
</span>
<span className="toggle-sign__nail" />
</span>
<span>Open for orders</span>
</label>
</>
);
}Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initToggleSign(el) on the mounted element instead.
HTML
<label class="toggle-sign">
<input class="toggle-sign__input" type="checkbox" role="switch"/>
<span class="toggle-sign__art" aria-hidden="true">
<span class="toggle-sign__swing">
<svg class="toggle-sign__string" viewBox="0 0 92 34">
<path d="M46 6L24 31M46 6L68 31"></path>
</svg>
<span class="toggle-sign__board">
<span class="toggle-sign__spin">
<span class="toggle-sign__face toggle-sign__face--closed">CLOSED</span>
<span class="toggle-sign__face toggle-sign__face--open">OPEN</span>
</span>
</span>
</span>
<span class="toggle-sign__nail"></span>
</span>
<span>Open for orders</span>
</label>CSS
@keyframes toggle-sign-swing-a { 0% { transform: rotate(0deg); } 18% { transform: rotate(7deg); } 40% { transform: rotate(-5deg); } 62% { transform: rotate(3deg); } 82% { transform: rotate(-1.5deg); } 100% { transform: rotate(0deg); } }
@keyframes toggle-sign-swing-b { 0% { transform: rotate(0deg); } 18% { transform: rotate(-7deg); } 40% { transform: rotate(5deg); } 62% { transform: rotate(-3deg); } 82% { transform: rotate(1.5deg); } 100% { transform: rotate(0deg); } }
.toggle-sign { display: inline-flex; align-items: center; gap: 14px; color: light-dark(#42454c, #e5e6e9); font-size: 15px; cursor: pointer; user-select: none; }
.toggle-sign__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.toggle-sign__art { position: relative; display: block; width: 92px; height: 78px; border-radius: 8px; }
.toggle-sign__input:focus-visible + .toggle-sign__art { outline: 2px solid light-dark(#5f626a, #a7abb2); outline-offset: 4px; }
.toggle-sign__nail { position: absolute; left: 43px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: light-dark(#6d7179, #7d8087); box-shadow: 0 1px 2px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.4)); z-index: 1; }
.toggle-sign__swing { position: absolute; inset: 0; transform-origin: 46px 6px; }
.toggle-sign[data-flip='a'] .toggle-sign__swing { animation: toggle-sign-swing-a 1.6s ease-out 0.35s; }
.toggle-sign[data-flip='b'] .toggle-sign__swing { animation: toggle-sign-swing-b 1.6s ease-out 0.35s; }
.toggle-sign__string { position: absolute; left: 0; top: 0; width: 92px; height: 34px; overflow: visible; }
.toggle-sign__string path { fill: none; stroke: light-dark(#5f626a, #a7abb2); stroke-width: 1.2; }
/* The board turns on its string. One and a half turns brings the other face round. */
.toggle-sign__board { position: absolute; left: 14px; top: 30px; width: 64px; height: 32px; perspective: 240px; }
.toggle-sign__spin { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(0.25, 0.8, 0.35, 1); }
.toggle-sign__face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; backface-visibility: hidden; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, light-dark(#373a40, #f1f2f3) 14%, transparent), 0 3px 6px -2px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.45)); }
.toggle-sign__face--closed { background: light-dark(#dbdde1, #2e3035); color: light-dark(#50535b, #c6c8cd); }
.toggle-sign__face--open { background: light-dark(#373a40, #f1f2f3); color: light-dark(#fbfcfd, #121417); transform: rotateY(180deg); }
.toggle-sign__input:checked + .toggle-sign__art .toggle-sign__spin { transform: rotateY(540deg); }
@media (prefers-reduced-motion: reduce) {
.toggle-sign__spin { transition: none; }
.toggle-sign[data-flip] .toggle-sign__swing { animation: none; }
}JavaScript
function initToggleSign(root) {
var flip = 0;
// Each change flips data-flip between a and b, so the swing on the nail restarts every time.
function onChange() {
flip += 1;
root.setAttribute('data-flip', flip % 2 ? 'a' : 'b');
}
root.addEventListener('change', onChange);
return function () {
root.removeEventListener('change', onChange);
};
}
document.querySelectorAll('.toggle-sign').forEach(initToggleSign);Goal: Create a "Sign" toggle switch.
Visual behavior: An open for orders switch drawn as a shop sign on a nail: it spins round from Closed to Open and swings on its string before settling.
Technique:
- A native checkbox with role="switch", visually hidden but focusable, sits inside a <label> before an aria-hidden drawing and the visible text. Every on state is styled from the input's :checked state through the adjacent sibling combinator, so Space and clicks both work.
- The board is a two-faced card with backface-visibility hidden, turned a turn and a half with rotateY in a perspective to bring the other face round.
- Each change flips data-flip between two identical swing keyframes, so the sign swings on its nail even on a quick second press.
Accessibility: A native checkbox with role="switch" inside a <label>, so Space toggles it and the visible text names it; :focus-visible on the input outlines the drawing, which is aria-hidden. Under prefers-reduced-motion the sign turns at once and does not swing.
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 "Sign" toggle switch.
Visual behavior: An open for orders switch drawn as a shop sign on a nail: it spins round from Closed to Open and swings on its string before settling.
Technique:
- A native checkbox with role="switch", visually hidden but focusable, sits inside a <label> before an aria-hidden drawing and the visible text. Every on state is styled from the input's :checked state through the adjacent sibling combinator, so Space and clicks both work.
- The board is a two-faced card with backface-visibility hidden, turned a turn and a half with rotateY in a perspective to bring the other face round.
- Each change flips data-flip between two identical swing keyframes, so the sign swings on its nail even on a quick second press.
Accessibility: A native checkbox with role="switch" inside a <label>, so Space toggles it and the visible text names it; :focus-visible on the input outlines the drawing, which is aria-hidden. Under prefers-reduced-motion the sign turns at once and does not swing.
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
An open for orders switch drawn as a shop sign on a nail: it spins round from Closed to Open and swings on its string before settling.
- Dependencies
- None
- Difficulty
- Intermediate
- Triggers
- click, state change, 3d, keyframe
- Techniques
- 3d transform, perspective, keyframes
- 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 the visible text names it; :focus-visible on the input outlines the drawing, which is aria-hidden. Under prefers-reduced-motion the sign turns at once and does not swing.