Edit Pulse

Name

Also known as (comma separated)

Brief definition Rhythmic scaling/opacity drawing attention.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "enabled", "type": "toggle", "label": "Pulsing", "default": true }, { "id": "duration", "type": "number", "label": "Duration (ms)", "default": 1200, "min": 400, "max": 3000, "step": 100 }, { "id": "scaleAmount", "type": "number", "label": "Scale amount", "default": 40, "min": 10, "max": 90, "step": 5 }, { "id": "accent", "type": "color", "label": "Colour", "default": "#F5C2E0", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"mot-pul-stage\">\n <span class=\"mot-pul-ring{{#if enabled}} mot-pul-ring--on{{/if}}\" style=\"--pulse-scale:{{scaleAmount}}%; border-color:{{accent}};\"></span>\n <span class=\"mot-pul-dot\" style=\"background:{{accent}};\"></span>\n <p class=\"mot-pul-caption\">{{#if enabled}}Pulsing{{/if}}{{#unless enabled}}Static{{/unless}} &middot; {{duration}}ms &middot; draws attention to a live indicator</p>\n</div>\n<style>\n.mot-pul-stage { position: relative; width: 100%; max-width: 320px; padding: 26px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 13px system-ui, sans-serif; color: #241430aa; text-align: center; }\n.mot-pul-ring, .mot-pul-dot { display: inline-block; border-radius: 999px; }\n.mot-pul-ring { position: absolute; top: 26px; left: calc(50% - 12px); width: 24px; height: 24px; border: 2px solid; opacity: 0; }\n.mot-pul-dot { position: relative; width: 24px; height: 24px; }\n.mot-pul-caption { margin: 12px 0 0; }\n@media (prefers-reduced-motion: no-preference) {\n .mot-pul-ring--on { animation: mot-pul-ring {{duration}}ms ease-out infinite; }\n @keyframes mot-pul-ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(calc(1 + var(--pulse-scale) / 100)); opacity: 0; } }\n}\n</style>", "tailwind": "<div class=\"relative w-full max-w-[320px] p-[26px] bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-sm text-[#241430]/70 text-center\">\n <span class=\"tw-pul-ring{{#if enabled}} tw-pul-ring-on{{/if}} absolute top-[26px] left-[calc(50%-12px)] w-6 h-6 rounded-full border-2 opacity-0\" style=\"--pulse-scale:{{scaleAmount}}%; border-color:{{accent}};\"></span>\n <span class=\"relative inline-block w-6 h-6 rounded-full\" style=\"background:{{accent}};\"></span>\n <p class=\"mt-3\">{{#if enabled}}Pulsing{{/if}}{{#unless enabled}}Static{{/unless}} &middot; {{duration}}ms &middot; draws attention to a live indicator</p>\n</div>\n<style>\n@media (prefers-reduced-motion: no-preference) {\n .tw-pul-ring-on { animation: mot-pul-tw-ring {{duration}}ms ease-out infinite; }\n @keyframes mot-pul-tw-ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(calc(1 + var(--pulse-scale) / 100)); opacity: 0; } }\n}\n</style>", "react": "export function Pulse({\n enabled = {{enabled}},\n duration = {{duration}},\n scaleAmount = {{scaleAmount}},\n accent = \"{{accent}}\",\n}) {\n return (\n <div style={{ position: \"relative\", width: \"100%\", maxWidth: 320, padding: 26, background: \"#FAF7F2\", border: \"1px solid #24143022\", borderRadius: 12, fontFamily: \"system-ui, sans-serif\", fontSize: 13, color: \"#241430aa\", textAlign: \"center\" }}>\n <span className={enabled ? \"ring on\" : \"ring\"} style={{ position: \"absolute\", top: 26, left: \"calc(50% - 12px)\", width: 24, height: 24, borderRadius: 999, border: `2px solid ${accent}`, opacity: 0, \"--pulse-scale\": `${scaleAmount}%` }} />\n <span style={{ position: \"relative\", display: \"inline-block\", width: 24, height: 24, borderRadius: 999, background: accent }} />\n <p style={{ margin: \"12px 0 0\" }}>{enabled ? \"Pulsing\" : \"Static\"} &middot; {duration}ms &middot; draws attention to a live indicator</p>\n <style>{`\n @media (prefers-reduced-motion: no-preference) {\n .ring.on { animation: mot-pul-ring ${duration}ms ease-out infinite; }\n @keyframes mot-pul-ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(calc(1 + var(--pulse-scale) / 100)); opacity: 0; } }\n }\n `}</style>\n </div>\n );\n}" }