Edit Rhythm

Name

Also known as (comma separated)

Brief definition Repetition/consistency of spacing.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "consistent", "type": "toggle", "label": "Consistent rhythm", "default": true }, { "id": "spacing", "type": "number", "label": "Spacing unit", "default": 16, "min": 8, "max": 32, "step": 4 }, { "id": "accent", "type": "color", "label": "Bar colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0" ] }, { "id": "barCount", "type": "select", "label": "Bars shown", "default": "4", "options": [ "3", "4", "5" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"rh-wrap\" role=\"img\" aria-label=\"A stack of bars spaced either by one repeated unit or by irregular gaps, showing what visual rhythm looks like when it holds and when it breaks\" data-count=\"{{barCount}}\">\n <div class=\"rh-stack\">\n <div class=\"rh-bar\" style=\"background:{{accent}};margin-bottom:{{#if consistent}}{{spacing}}px{{/if}}{{#unless consistent}}6px{{/unless}};\">1</div>\n <div class=\"rh-bar\" style=\"background:{{accent}};margin-bottom:{{#if consistent}}{{spacing}}px{{/if}}{{#unless consistent}}28px{{/unless}};\">2</div>\n <div class=\"rh-bar\" style=\"background:{{accent}};margin-bottom:{{#if consistent}}{{spacing}}px{{/if}}{{#unless consistent}}10px{{/unless}};\">3</div>\n <div class=\"rh-bar rh-bar--4\" style=\"background:{{accent}};margin-bottom:{{#if consistent}}{{spacing}}px{{/if}}{{#unless consistent}}22px{{/unless}};\">4</div>\n <div class=\"rh-bar rh-bar--5\" style=\"background:{{accent}};\">5</div>\n </div>\n <p class=\"rh-caption\">{{#if consistent}}Every gap is {{spacing}}px — a steady rhythm.{{/if}}{{#unless consistent}}Gaps vary — rhythm breaks.{{/unless}} ({{barCount}} bars shown)</p>\n</div>\n<style>\n.rh-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 260px; }\n.rh-stack { background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 12px; box-sizing: border-box; }\n.rh-bar { height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; }\n.rh-bar--4, .rh-bar--5 { display: none; }\n[data-count=\"4\"] .rh-bar--4 { display: flex; }\n[data-count=\"5\"] .rh-bar--4, [data-count=\"5\"] .rh-bar--5 { display: flex; }\n.rh-caption { margin: 12px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"rh-tw font-sans text-[#241430] w-[260px]\" role=\"img\" aria-label=\"A stack of bars spaced either by one repeated unit or by irregular gaps, showing what visual rhythm looks like when it holds and when it breaks\" data-count=\"{{barCount}}\">\n <div class=\"bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-3 box-border\">\n <div class=\"h-[26px] rounded-md flex items-center justify-center font-bold\" style=\"background:{{accent}};margin-bottom:{{#if consistent}}{{spacing}}px{{/if}}{{#unless consistent}}6px{{/unless}};\">1</div>\n <div class=\"h-[26px] rounded-md flex items-center justify-center font-bold\" style=\"background:{{accent}};margin-bottom:{{#if consistent}}{{spacing}}px{{/if}}{{#unless consistent}}28px{{/unless}};\">2</div>\n <div class=\"h-[26px] rounded-md flex items-center justify-center font-bold\" style=\"background:{{accent}};margin-bottom:{{#if consistent}}{{spacing}}px{{/if}}{{#unless consistent}}10px{{/unless}};\">3</div>\n <div class=\"rh-tw-bar4 h-[26px] rounded-md items-center justify-center font-bold\" style=\"background:{{accent}};margin-bottom:{{#if consistent}}{{spacing}}px{{/if}}{{#unless consistent}}22px{{/unless}};\">4</div>\n <div class=\"rh-tw-bar5 h-[26px] rounded-md items-center justify-center font-bold\" style=\"background:{{accent}};\">5</div>\n </div>\n <p class=\"mt-3 text-xs text-[#241430]/80\">{{#if consistent}}Every gap is {{spacing}}px — a steady rhythm.{{/if}}{{#unless consistent}}Gaps vary — rhythm breaks.{{/unless}} ({{barCount}} bars shown)</p>\n</div>\n<style>\n.rh-tw-bar4, .rh-tw-bar5 { display: none; }\n.rh-tw[data-count=\"4\"] .rh-tw-bar4 { display: flex; }\n.rh-tw[data-count=\"5\"] .rh-tw-bar4, .rh-tw[data-count=\"5\"] .rh-tw-bar5 { display: flex; }\n</style>", "react": "export function Rhythm({\n consistent = {{consistent}},\n spacing = {{spacing}},\n accent = \"{{accent}}\",\n barCount = \"{{barCount}}\",\n}) {\n const bar = { height: 26, background: accent, borderRadius: 6, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", fontWeight: 700 };\n const gaps = consistent ? [spacing, spacing, spacing, spacing] : [6, 28, 10, 22];\n const n = Number(barCount);\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 260 }}\n role=\"img\" aria-label=\"A stack of bars spaced either by one repeated unit or by irregular gaps, showing what visual rhythm looks like when it holds and when it breaks\">\n <div style={{ background: \"#FAF7F2\", border: \"1.5px dashed #24143055\", borderRadius: 8, padding: 12, boxSizing: \"border-box\" }}>\n <div style={{ ...bar, marginBottom: gaps[0] }}>1</div>\n <div style={{ ...bar, marginBottom: gaps[1] }}>2</div>\n <div style={{ ...bar, marginBottom: gaps[2] }}>3</div>\n {n >= 4 && <div style={{ ...bar, marginBottom: gaps[3] }}>4</div>}\n {n >= 5 && <div style={bar}>5</div>}\n </div>\n <p style={{ marginTop: 12, fontSize: 12, color: \"#241430cc\" }}>\n {consistent ? `Every gap is ${spacing}px — a steady rhythm.` : \"Gaps vary — rhythm breaks.\"} ({barCount} bars shown)\n </p>\n </div>\n );\n}" }