Edit Reduced Motion

Name

Also known as (comma separated)

Brief definition Preference for minimal animation.

Notes **Motion & Animation:** User preference to minimise animation, which interfaces must respect.

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Caption", "default": "Loading results" }, { "id": "style", "type": "select", "label": "Motion style", "default": "spinner", "options": [ "spinner", "slide-in", "pulse" ] }, { "id": "reduceMotion", "type": "toggle", "label": "Reduced motion preferred", "default": false }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#D9C8F0", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"rm-demo\" data-style=\"{{style}}\"{{#if reduceMotion}} data-reduced=\"true\"{{/if}} style=\"--accent:{{accent}};\">\n <div class=\"rm-demo__stage\">\n <div class=\"rm-demo__spinner\"></div>\n <div class=\"rm-demo__slide\"></div>\n <div class=\"rm-demo__pulse\"></div>\n </div>\n <p class=\"rm-demo__label\">{{label}}</p>\n <p class=\"rm-demo__caption\">{{#if reduceMotion}}prefers-reduced-motion: reduce &mdash; animation replaced with an instant state change{{/if}}{{unless reduceMotion}}full animation plays{{/unless}}</p>\n</div>\n<style>\n.rm-demo { width: 300px; font: 14px system-ui, sans-serif; color: #241430; }\n.rm-demo__stage { height: 48px; display: flex; align-items: center; }\n.rm-demo__spinner, .rm-demo__slide, .rm-demo__pulse { display: none; }\n.rm-demo[data-style=\"spinner\"] .rm-demo__spinner { display: block; width: 28px; height: 28px; border-radius: 50%; border: 4px solid #24143022; border-top-color: var(--accent); }\n.rm-demo[data-style=\"slide-in\"] .rm-demo__slide { display: block; width: 28px; height: 28px; border-radius: 8px; background: var(--accent); }\n.rm-demo[data-style=\"pulse\"] .rm-demo__pulse { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); }\n@media (prefers-reduced-motion: no-preference) {\n .rm-demo[data-style=\"spinner\"] .rm-demo__spinner { animation: rm-spin .2s linear infinite; }\n .rm-demo[data-style=\"slide-in\"] .rm-demo__slide { animation: rm-slide .2s ease-in-out infinite; }\n .rm-demo[data-style=\"pulse\"] .rm-demo__pulse { animation: rm-pulse .2s ease-in-out infinite; }\n .rm-demo[data-reduced=\"true\"] .rm-demo__spinner, .rm-demo[data-reduced=\"true\"] .rm-demo__slide, .rm-demo[data-reduced=\"true\"] .rm-demo__pulse { animation: none; }\n}\n@keyframes rm-spin { to { transform: rotate(360deg); } }\n@keyframes rm-slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(80px); } }\n@keyframes rm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }\n.rm-demo__label { margin: 10px 0 2px; font-weight: 600; }\n.rm-demo__caption { margin: 0; font-size: 12px; color: #241430aa; }\n</style>", "tailwind": "<div class=\"rm-tw rm-tw--{{style}}{{#if reduceMotion}} rm-tw--reduced{{/if}}\" style=\"width:300px;font-family:system-ui,sans-serif;color:#241430\">\n <div class=\"h-12 flex items-center\">\n <div class=\"rm-tw__spinner hidden w-7 h-7 rounded-full border-4\" style=\"border-color:#24143022;border-top-color:{{accent}}\"></div>\n <div class=\"rm-tw__slide hidden w-7 h-7 rounded-lg\" style=\"background:{{accent}}\"></div>\n <div class=\"rm-tw__pulse hidden w-7 h-7 rounded-full\" style=\"background:{{accent}}\"></div>\n </div>\n <p class=\"mt-2.5 mb-0.5 font-semibold\">{{label}}</p>\n <p class=\"m-0 text-xs text-[#241430aa]\">{{#if reduceMotion}}prefers-reduced-motion: reduce &mdash; animation replaced with an instant state change{{/if}}{{unless reduceMotion}}full animation plays{{/unless}}</p>\n</div>\n<style>\n.rm-tw--spinner .rm-tw__spinner { display: block; }\n.rm-tw--slide-in .rm-tw__slide { display: block; }\n.rm-tw--pulse .rm-tw__pulse { display: block; }\n@media (prefers-reduced-motion: no-preference) {\n .rm-tw--spinner .rm-tw__spinner { animation: rm-spin-tw .2s linear infinite; }\n .rm-tw--slide-in .rm-tw__slide { animation: rm-slide-tw .2s ease-in-out infinite; }\n .rm-tw--pulse .rm-tw__pulse { animation: rm-pulse-tw .2s ease-in-out infinite; }\n .rm-tw--reduced .rm-tw__spinner, .rm-tw--reduced .rm-tw__slide, .rm-tw--reduced .rm-tw__pulse { animation: none; }\n}\n@keyframes rm-spin-tw { to { transform: rotate(360deg); } }\n@keyframes rm-slide-tw { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(80px); } }\n@keyframes rm-pulse-tw { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }\n</style>", "react": "export function ReducedMotion({\n label = \"{{label}}\",\n style = \"{{style}}\",\n reduceMotion = {{reduceMotion}},\n accent = \"{{accent}}\",\n}) {\n const shape = {\n spinner: { width: 28, height: 28, borderRadius: \"50%\", border: \"4px solid #24143022\", borderTopColor: accent },\n \"slide-in\": { width: 28, height: 28, borderRadius: 8, background: accent },\n pulse: { width: 28, height: 28, borderRadius: \"50%\", background: accent },\n }[style];\n const className = \"rm-react__shape rm-react__shape--\" + style + (reduceMotion ? \" rm-react__shape--reduced\" : \"\");\n return (\n <div style={{ width: 300, fontFamily: \"system-ui, sans-serif\", fontSize: 14, color: \"#241430\" }}>\n <div style={{ height: 48, display: \"flex\", alignItems: \"center\" }}>\n <div className={className} style={shape} />\n </div>\n <p style={{ margin: \"10px 0 2px\", fontWeight: 600 }}>{label}</p>\n <p style={{ margin: 0, fontSize: 12, color: \"#241430aa\" }}>{reduceMotion ? \"prefers-reduced-motion: reduce \\u2014 animation replaced with an instant state change\" : \"full animation plays\"}</p>\n <style>{`\n @keyframes rm-react-spin { to { transform: rotate(360deg); } }\n @keyframes rm-react-slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(80px); } }\n @keyframes rm-react-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }\n @media (prefers-reduced-motion: no-preference) {\n .rm-react__shape--spinner { animation: rm-react-spin .2s linear infinite; }\n .rm-react__shape--slide-in { animation: rm-react-slide .2s ease-in-out infinite; }\n .rm-react__shape--pulse { animation: rm-react-pulse .2s ease-in-out infinite; }\n .rm-react__shape--reduced { animation: none; }\n }\n `}</style>\n </div>\n );\n}" }